Issue with crossorigin anonymous failing to load images

Question

Reference: Prevent HTTP Basic Authentication from displaying prompt for images

In order to protect my user-generated content from this potential "exploit", I added crossorigin="anonymous" to all [img] BBCodes.

Well, it worked in IE11: when I tested the exploit, the image no longer triggered the authentication dialog (tested with cache disabled and different URLs for good measure).

But in Chrome, the exploit doesn't work... because images aren't being loaded at all. Instead I'm getting the apparently fairly common error:

Image from origin 'XXXXX' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'YYYYY' is therefore not allowed access.

Maybe my understanding is wrong, but I thought the "anonymous" value of the attribute would allow this to work.

Am I missing something, and if so what other options are there to protect against this issue?

Answer 1

Firstly, as per my understanding, you mean to say the images didn't load in IE. Which is perfect! That's how it has to work.

Secondly(& finally), the behaviour of Chrome is perfect as well.

Process/Details:

The server does not give credentials to the origin site (by setting the Access-Control-Allow-Origin to Anonymous), the image will be tainted and its usage is restricted.

Now, if you have a cross-origin image you can copy it into a canvas but this "taints" the canvas which prevents you from reading it (so you cannot "steal" or "download" images). However, by using CORS the server where the image is stored can tell the browser that cross-origin access is permitted and thus you can access the image data through a canvas.

When the header is not from the same origin i.e., if the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), and as it becomes invalid, then, it is handled as if the enumerated keyword anonymous was used.

So my guess is that null is either the same as not being present or being invalid in which case it is handled like anonymous.

So, you see that error in Chrome means exactly doing what IE is doing.

---

Some references that can help-

• Purpose of the crossorigin attribute …?

• HTML crossorigin attribute for img tag

• Javascript CORS image / canvas manipulation

• Drawing images to canvas with img.crossOrigin = “Anonymous” doesn't work

Though not a direct answer, but, helpful links-

• How can I override javascript files referenced with the crossorigin=“anonymous” using a Google Chrome extension?

• CORS enabled image

Hope it helps! :) Happy coding!

Answer 2

As per I researched,

Firstly What do you mean by Tainted canvas:

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.
ref:https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

CORS settings attributes:

In HTML5, some HTML elements which provide support for CORS, such as img or video, have a crossorigin attribute (crossOrigin property), which lets you configure the CORS requests for the element's fetched data. By default (that is, when the attribute is not specified), CORS is not used at all.
The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication

Since, The image you're linking to isn't CORS-enabled, you are getting Access-Control-Allow-Origin error.

To fix the issue, not only do the crossOrigin attribute but proper headers need to be sent. You can set this to crossOrigin to use-credentials which sets the credentials request header - which the server can use to decide whether you have rights to the content. When the CORS headers are sent back from the server for an image, and that image is used on a canvas, the origin-clean flag is true.