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.
On June 26, 2014 AWS released proper Vary: Origin behavior on CloudFront so now you just
Set a CORS Configuration for your S3 bucket including
Now your CloudFront distribution should cache different responses (with proper CORS headers) for different client Origin headers.
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:
In your S3 bucket go to Permissions -> CORS configuration Add rules for CORS in the editor, the
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
https://i.stack.imgur.com/GuoCh.png
And with that CORS from CloudFront with S3 should work.
UPDATE: this is no longer true with recent changes on CloudFront. Yippee! See the other responses for the details. I'm leaving this here for context/history.
Problem
CloudFront does not support CORS 100%. The problem is how CloudFront caches the response to the request. Any other request for the same URL after that will result in the cached request no matter the origin. The key part about that is that it includes the response headers from the origin.
First request before CloudFront has anything cached from Origin: http://example.com
has a response header of:
Access-Control-Allow-Origin: http://example.com
Second request from Origin: https://example.com
(note that it is HTTPS not HTTP) also has the response header of:
Access-Control-Allow-Origin: http://example.com
Because that is what CloudFront cached for the URL. This is invalid -- the browser console (in Chrome at least) will show a CORS violation message and things will break.
Workaround
The suggested work around is to use different URLs for different origins. The trick is to append a unique query string that is different so that there is one cached record per origin.
So our URLs would be something like:
http://.../some.png?http_mysite.com
https://.../some.png?https_mysite.com
This kind of works but anyone can make your site work poorly by swapping the querystrings. Is that likely? Probably not but debugging this issue is a huge hassle.
The right workaround is to not use CloudFront with CORS until they fully support CORS.
In Practice
If you use CloudFront for CORS, have a fallback to another method that will work when CORS does not. This isn't always an option but right now I'm dynamically loading fonts with JavaScript. If the CORS-based request to CloudFront fails, I fall back to a server-side proxy to the fonts (not cross origin). This way, things keep working even though CloudFront somehow got a bad cached record for the font.
As a completion on the previous answer, I would like to share AWS steps on how to enable CORS. I found it very useful, providing additional links: https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/
Also, something that you should consider when testing your changes, other than CloudFront deploy delay, is the browser cache. I suggest using different sessions for incognito when testing your changes.
curl -H "origin: example.com" -v "https://www.anything.net/video/call/System.generateId.dwr"
Posting some of the non-trivial configurations that I did to make it work:
Assign custom domain to cloudfront such that the custom domain is a subdomain from where your app's frontend will run. In OP's case, he is using localhost:3000; most probably he is testing on his dev setup, but he must deploy this app at some domain: let's call this 'myapp.com'. So, he can assign a custom domain, say cdn.myapp.com to point to blah.cloudfront.net. You will need to create/import custom SSL certificate for the new custom domain; default cloudfront certificate won't work. Refer to this: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html
https://i.stack.imgur.com/GUIH7.png
Cloudfront behaviour: I am assuming you have already set up trusted key group as at this point, you already have the signed cookie with you. HOWEVER, You will need to create custom Cache Policy and Origin Request Policy. See the following screenshots of the custom Cache Policy:and Origin Request Policy: The thing to notice is that you will need to whitelist these Headers: Origin, Access-Control-Request-Method, Access-Control-Allow-Origin, Access-Control-Request-Headers. (You might notice that Access-Control-Allow-Origin is not in the dropdown; just go ahead and type it!). Also, allow all cookies. S3 CORS configuration: Go to the S3 bucket and click on the permissions tab. Scroll down to the CORS configuration. Disclaimer: I just pasted what worked for me. The rationale behind this was that this S3 was going to be accessed by either CDN or app in my scenario. I tried putting '*' being lenient, but CORS policy on Chrome complained that I cannot use a wildcard entry in AllowedOrigins!
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "PUT", "POST", "GET", "HEAD", "DELETE" ], "AllowedOrigins": [ "cdn.myapp.com", "myapp.com", "https://cdn.myapp.com", "https://myapp.com" ], "ExposeHeaders": [ "ETag" ] } ]
react-player: I am using react-player like this (note forceHLS option being set, but it is again specific to my use case. I think this is not mandatory in general)
Not entirely sure what your issue is but:
https://forums.aws.amazon.com/thread.jspa?messageID=377513
answered some of my problem with CORS, S3 and Cloudfront.
I also found that some assets within a bucket would return with the correct CORS headers and some wouldn't. After invalidating the assets they all came back with correct headers, not sure why some needed invalidating and others didn't as the were uploaded at same time, same type same bucket :(
An additional reason for CORS errors could be the HTTP to HTTPS redirect configured in CloudFront.
According to documentation redirects to different origin are not allowed in CORS requests.
As an example, if you will try to access some URL http://example.com what has cloudfront rule to redirect HTTP to HTTPS, you will get a CORS error, since https://cloudfront.url is considered by the browser as a different origin.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed
I followed AWS documentation:
CloudFront- CORS
S3- CORS
Then I used aws cdk to do it for me. Full source here: https://github.com/quincycs/quincymitchell.com
const myBucket = new Bucket(this, 'bucket', {
bucketName: `prod-${domainName}`,
cors: [{
allowedMethods: [HttpMethods.GET],
allowedOrigins: ['*'],
allowedHeaders: ['*']
}],
enforceSSL: true,
blockPublicAccess: BlockPublicAccess.BLOCK_ALL,
removalPolicy: RemovalPolicy.RETAIN
});
const mycert = Certificate.fromCertificateArn(this, 'certificate', ssmCertArn);
new Distribution(this, 'myDist', {
defaultBehavior: {
origin: new S3Origin(myBucket),
viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
originRequestPolicy: OriginRequestPolicy.CORS_S3_ORIGIN,
responseHeadersPolicy: ResponseHeadersPolicy.CORS_ALLOW_ALL_ORIGINS,
allowedMethods: AllowedMethods.ALLOW_GET_HEAD_OPTIONS, // needed for cors
cachedMethods: CachedMethods.CACHE_GET_HEAD_OPTIONS, // needed for cors
},
defaultRootObject: 'index.html',
domainNames: [domainName, `www.${domainName}`],
certificate: mycert
});
2022 answer:
Go to your S3 bucket -> Permissions Scroll down to Cross-origin resource sharing (CORS) Apply policy:
[
{
"AllowedHeaders": [],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
This will allow GET request from all origins. Modify according to your project's needs.
Go to your CloudFront distribution -> Behaviors -> Edit (in my case I had only one Behavior) Scroll down to Cache key and origin requests Select Cache policy and origin request policy (recommended) Under Origin request policy - optional select CORS-CustomOrigin Save Changes
Done!
Success story sharing
Access-Control-Request-Headers
andAccess-Control-Request-Method
if using an S3 origin and you wantOPTIONS
cached (which generally I believe you will want).