CORS settings for images in canvas

Question

I am attempted to use Caman.js and load images from Amazon S3. Caman.js is a JS library for producing image effects and it works by creating a copy of the image to a canvas object and doing various pixel manipulations to the data. It looks like canvas has some security details in place to limit the ability of javascript to access the pixel data when that data is coming from a foreign server unless that server passes along some security credentials in the request, or Cross-Origin Resource Sharing (CORS).

I've never encountered CORS before, am trying to learn about it, but I can't seem to get this working. From what I can understand, in order to avoid this error which appears in Chrome:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18 

You need to set a CORS file on your Amazon bucket. Here's the CORS file I'm using:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

This does not seem to have any effect. Are these CORS files cached by Amazon or should I expect it to take effect immediately? -- update: I tried 8 hours later and it still is not working so I assume caching is not the issue.

It seems like the CORS file specified above should allow everything through, no? I've looked through the Chrome documentation on CORS and Google but I can't seem to find any good answers. Has anyone dealt with this issue before?

Thanks! Kevin

Update: Here's the Response Headers I get from the image request to Amazon:

Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2

Answer 1

Even though, this is 4 month old question, i would like to help others who fetched S3, CORS and HTML canvas issues by putting here a reference to a working solution.

Amazon S3 will send Cross-Origin headers only if was explicitly asked for (see CORS specs). It means that the client must ask for them explicitly in the HTTP request. The expected behavior is that the client will specify the host-name inside the "Origin: host-name" header in the request, and the server will check if it should share the resources with the specific origin name. What is important to understand here, if your client is a Web-Browser, it will not send this header for no reason.

This is the way how the Cross-Domain ajax requests works. Recently support added for some other resources like fonts and images.

Images: HTML5 added Cross-Origin support for images in HTML tags and Javascript... Use the crossOrigin attribute on images and the browser will fetch the resource as a Cross-Origin resource (it will add the Origin header to the HTTP request) link to the original post.

The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.

read more on MDN

i also fetched similar issue, if you can rely on HTML5 support on the client side, use that solution!