Does displaying images on profiles by URL have security implications?

Question

I am Developing a Web Application Currently, in which users can Make a Profile and Fill out the User's information, In this i have also kept a Section for Profile Picture, in that i have used a logic that No Users shall be Upload any Image to the Profile picture just for Testing and instead of that i am showing Images like <div style="background-image: url("http://example.com/image.jpg")></div>

In this i have made a Input for user to place the path of jpg image from any site he likes and I directly display the image from that site only, which is http://example.com/image.jpg in our case.

I want to consider the worst situation here, I haven't placed check nor whitelisted any domains into the example.com/image.jpg. I placed a URL like http://stackoverflow.com/index.html it shows me blank, I tried many PHP scripts like http://attacker.com/omg.php and it doesn't run the script on my domain.

Is there any possibility of attack vector here? If yes, kindly suggest me. And also is CORS or SOP Bypass possible here, I have CSP protection of the domain.

Note: In the URL Section, i am making First validating check at scheme of URL where http:// , // and https:// are WhiteListed & in the Image section i have ONLY whitelisted Numbers + Alphabets and special characters like ., - & / .Rest else are blocked

Answer 1

i tried many php scripts like http://attacker.com/omg.php and it doesn't runs the script on my domain ..

The problem here would not be a server side vulnerability but more of a reflective XSS vulnerability that runs on the browser not on the server which is why the php file did not work.

Taken from OWASP (see here):

Reflected Cross-site Scripting (XSS) occur when an attacker injects browser executable code within a single HTTP response. The injected attack is not stored within the application itself; it is non-persistent and only impacts users who open a maliciously crafted link or third-party web page. The attack string is included as part of the crafted URI or HTTP parameters, improperly processed by the application, and returned to the victim.

If I attached a file (lets call it script.html) and had Javascript execute there then any one viewing the "image" will run the Javascript on their browser.

For example:

I am a user on your website and I attach a profile picture with the link http://mymalicouswebsite.com/script.html and in the script.html file I have the following code:

...Some HTML...
<script>
    window.onload = function(){
        //Anything I put here will run on any viewers browser
    }
</script>
...Some HTML...

This can be even worse, the attacker can do the following:

• Replace your whole html body with any content he wants (he can load an iframe which is a phishing page)
• He can steal users cookies and send it to his page using AJAX
• Redirect the user to a drive by where a virus will be downloaded and the user will think its coming from your website

Now, Is there any Possibility of Attack vector here, If yes, kindly suggest me. And also is CORS or SOP Bypass possible here, I have CSP protection of the domain.

CORS is when an HTTP request comes from a script which is not this case. What you are doing is as if you are loading an iframe.

About CSP: I would have to see your setting that are set to see if an attack can be made...

Answer 2

The risk isn't that a script such as http://attacker.com/omg.php runs on your domain, it is that a user manages to break out of the

<div style='background-image: url("http://example.com/image.jpg")'></div>

context where the URL is written to the page. Note the code has been corrected from your question (single quotes used for HTML attribute to make things clearer).

PHP is server-side, however because you are displaying a client-side image there is no server-side risk.

Even if //example.com/evil.js was entered, the script won't execute on the browser because it is requested in the context of an image, not a script.

Back to the problem: To mitigate the user managing to break out of the context where the URL is written, you need to mitigate against XSS (Cross-site scripting).

For that, see rule #4 here: "CSS Escape And Strictly Validate Before Inserting Untrusted Data into HTML Style Property Values".

Not doing so may allow the user to enter something like

")'><script>alert('xss')</script>

as their image URL which would render

<div style='background-image: url("")'><script>alert('xss')</script>")'></div>

on the page and execute the script. Here it is just showing an alert box, however XSS vulnerabilities can be used to compromise the whole user session.

The rule to make this safe is as follows:

Except for alphanumeric characters, escape all characters with ASCII values less than 256 with the \HH escaping format.

This should be done on output to the page.

As a second line of defence, you could also validate on input that the URL entered starts with http://, // or https:// and ask the user to correct it if not. This would be an extra check against javascript: URLs, however you still need the proper encoding to prevent CSS and attribute context breakouts.