Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent HTTP Basic Authentication from displaying prompt for images

Tags:

html

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

like image 302
JackW Avatar asked Nov 07 '15 18:11

JackW


People also ask

How do I stop browser invoke basic auth pop up?

Make an /login url, than accept "user" and "password" parameters via GET and don't require basic auth.

Why is basic authentication generally not recommended?

Basic authentication is simple and convenient, but it is not secure. It should only be used to prevent unintentional access from nonmalicious parties or used in combination with an encryption technology such as SSL.

What is HTTP basic authentication and how it works?

HTTP basic authentication is a simple challenge and response mechanism with which a server can request authentication information (a user ID and password) from a client. The client passes the authentication information to the server in an Authorization header. The authentication information is in base-64 encoding.


1 Answers

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.

like image 85
JackW Avatar answered Nov 06 '22 06:11

JackW