8

If I have an image from a different domain on a page, and that image is protected by HTTP Basic Authentication, the browser will present the authentication dialog to the user, looking like this:

Auth Dialog

Given that the site is a forum, so contains a lot of user-generated content, it's pretty easy for a malicious user to add an image like this, then potentially harvest the login credentials of the one or two people who fall for it and type their site credentials into the dialog.

Is there any way to prevent that credential prompt from being displayed without either using a whitelist of image hosts (not ideal because it's very restrictive for users) or making sure the image is accessible before allowing it (which can be worked around)?

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
JackW
  • 999
  • 11
  • 22
  • as this is Browser Functionality , there is no way to override .. – Kishore Sahasranaman Nov 07 '15 at 18:23
  • you can just put the image alone in open location and access the same. – Kishore Sahasranaman Nov 07 '15 at 18:24
  • The source of the issue here is that you reference an image someone else wants not to be accessed. Such cross domain references are questionable. And as you can see they can lead to serious issues. In short: you should not reference such an image, you should only publish content you hold on your site. – arkascha Nov 07 '15 at 18:26

1 Answers1

5

If you add the crossorigin="anonymous" attribute to the image, it will no longer prompt for credentials, although it also means that no cookies or cached credentials will be sent either (which doesn't matter in my case).

Note however that, this restricts it to only images that have been served using the Access-Control-Allow-Origin header, which must be set to * or the page's origin. If the header is omitted or incorrect, the image will not be rendered, and a broken image error will be displayed instead. This makes this solution fairly useless, but unfortunately there doesn't seem to be an alternative.

JackW
  • 999
  • 11
  • 22
  • It's worth noting however that this is not particularly well-supported, unfortunately. [It seems](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) that it was only added in IE11, and Opera doesn't support it at all. – Niet the Dark Absol Dec 03 '15 at 16:16
  • @NiettheDarkAbsol the 4 mayor browser already support it. I say it worth it. – Braiam Dec 03 '15 at 16:33
  • Oh absolutely worth adding the attribute, no doubt about that. But it's still worth noting. – Niet the Dark Absol Dec 03 '15 at 16:33
  • when i add this property in the image tag , it doesn't render even a valid image. let me know how did you actually implemented in your code. – Amit May 02 '17 at 09:51
  • 2
    @AmitK unfortunately the images that are displayed must support CORS, so they have to include the `Access-Control-Allow-Origin` header, set either to `*` or to the page origin. There doesn't appear to be a workaround for this. I will update my answer. – JackW May 07 '17 at 20:41
  • @JackW thanks for updating the answer. i could figure this after some hit and try. – Amit May 08 '17 at 03:03