Correct S3 + Cloudfront CORS Configuration?

Question

My application stores images on S3 and then proxies them through Cloudfront. I'm excited to use the new S3 CORS support so that I can use HTML5 canvas methods (which have a cross-origin policy) but can't seem to configure my S3 and Cloudfront correctly. Still running into "Uncaught Error: SECURITY_ERR: DOM Exception 18" when I try to convert an image to a canvas element.

Here's what I have so far:

S3

<CORSConfiguration>   <CORSRule>     <AllowedOrigin>MY_WEBSITE_URL</AllowedOrigin>     <AllowedMethod>GET</AllowedMethod>     <MaxAgeSeconds>3000</MaxAgeSeconds>     <AllowedHeader>*</AllowedHeader>   </CORSRule>   <CORSRule>     <AllowedOrigin>MY_CLOUDFRONT_URL</AllowedOrigin>     <AllowedMethod>GET</AllowedMethod>     <AllowedHeader>*</AllowedHeader>     </CORSRule>   </CORSConfiguration> 

Cloudfront

Origins

Origin Protocol Policy: Match Viewer  HTTP Port: 80  HTTPS Port: 443 

Behaviors

Origin: MY_WEBSITE_URL  Object Caching: Use Origin Cache Headers  Forward Cookies: None  Forward Query Strings: Yes 

Is there something I'm missing here?

UPDATE : Just tried changing the headers to

<AllowedHeader>Content-*</AllowedHeader> <AllowedHeader>Host</AllowedHeader> 

based on this question Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

Still no go.

UPDATE: MORE INFO ON REQUEST

Request URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8 Request Method:GET Status Code:200 OK (from cache) 

UPDATE

I think maybe my request wasn't correct, so I tried enabling CORS with

img.crossOrigin = ''; 

but then the image doesn't load and I get the error: Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Answer 1

On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just

1. Set a CORS Configuration for your S3 bucket including

   <AllowedOrigin>*</AllowedOrigin>

2. In CloudFront -> Distribution -> Behaviors for this origin

   • Allowed HTTP Methods: +OPTIONS
   • Cached HTTP Methods +OPTIONS
   • Cache Based on Selected Request Headers: Whitelist the Origin header.

3. Wait for ~20 minutes while CloudFront propagates the new rule

Now your CloudFront distribution should cache different responses (with proper CORS headers) for different client Origin headers.

Answer 2

To complement @Brett's answer. There are AWS documentation pages detailing CORS on CloudFront and CORS on S3.

The steps detailed there are as follows:

1. In your S3 bucket go to Permissions -> CORS configuration
2. Add rules for CORS in the editor, the <AllowedOrigin> rule is the important one. Save the configuration.
3. In your CloudFront distribution go to Behavior -> choose a behavior -> Edit
4. Depending on whether you want OPTIONS responses cached or not, there are two ways according to AWS:

• If you want OPTIONS responses to be cached, do the following:
  • Choose the options for default cache behavior settings that enable caching for OPTIONS responses.
  • Configure CloudFront to forward the following headers: Origin, Access-Control-Request-Headers, and Access-Control-Request-Method.
• If you don't want OPTIONS responses to be cached, configure CloudFront to forward the Origin header, together with any other headers required by your origin

And with that CORS from CloudFront with S3 should work.