html - Prevent HTTP Basic Authentication from displaying prompt for images

Question

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:

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)?

Answer 1

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.