IE10 and Cross-origin resource sharing (CORS) issues with Image / Canvas

Question

I was under the impression that Internet Explorer 10 fully supported CORS, but now I'm not sure.

We have a JS/HTML5 App that uses multiple domains, and reads image data. We are loading images in the JS from another domain, imageDraw()ing the image to our canvas, and then using getImageData on the canvas. (We aren't using cross-domain XMLHttpRequests). For this to work we have had to set response headers on the server that's serving the images:

access-control-allow-origin: * access-control-allow-credentials: true 

And set this on the image object in the JS before loading:

image.crossOrigin = 'Anonymous'; //Also tried lowercase

This is working fine for all new browsers, apart from IE10 which is throwing security errors when we try to read the data.

SCRIPT5022: SecurityError 

Is there something more that needs to be done for IE10 to treat these cross domain images as not tainting?

UPDATE:

I noticed this answer to a previous question. Interestingly this JSFiddle also does not work for IE10 - can anyone confirm that this does not work in their IE10?

Answer 1

Unfortunately, IE10 still remains the only popular browser that doesn't support CORS for image drawn to Canvas even when CORS headers are properly set. But there is workaround for that via XMLHttpRequest:

var xhr = new XMLHttpRequest(); xhr.onload = function () {     var url = URL.createObjectURL(this.response), img = new Image();     img.onload = function () {         // here you can use img for drawing to canvas and handling         // ...         // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)         URL.revokeObjectURL(url);     };     img.src = url; }; xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.send(); 

Answer 2

Confirmed: IE10 does not support CORS images in an HTML 5 canvas. See RReverser's answer for a workaround.

Edit

Sorry, I haven't dealt with CORS images before and thought this question was about an AJAX request.

According to Mozilla Developer Network you need to set image.crossOrigin to anonymous or use-credentials. Also, according to that page today, these attributes are not supported in IE, Safari, or Opera. This test was made to demonstrate that IE9 did not support it and it seems that same test still fails in IE10, so even if Safari and Opera have added support since the MDN article was written, it is quite possible that IE10 still lacks support.

The only tip I can give you is that in general, allow-credentials is incompatible with a wildcard allow-origin. Either drop the allow-credentials or echo the request Origin in the allow-origin.

Below is for AJAX calls, not image or video canvas resources

Early versions of IE10 were known to have AJAX bugs,

• http://bugs.idsl.pl/ie/xhr.htm
• http://connect.microsoft.com/IE/feedback/details/771552/i-e-10-and-the-post-method

so it could be another browser bug. Then again, CORS is deceptively tricky to get right. I recommend the following steps to debug CORS problems.

1. Point the browser at http://test-cors.appspot.com/#technical to get a compatibility report. If anything fails then you have a bug or lack of support for CORS in the browser.
2. If everything passes, use the CORS headers the test is sending as a starting point to get your CORS request working. Then change one header at a time and retest until you get the headers the way you want for your application or you run into a failure you cannot explain or work around.
3. If necessary, post a question about that one tiny change that breaks the CORS request, posting both the working "before" and the failing "after". It always helps if you can include a runnable example.

The complete code for the CORS test client and server (Python script for Google App Engine) is available at https://github.com/rapportive-oss/cors-test to get you started.