Amazon S3 - Cross Origin Resource Sharing Support

Why CORS?

In order to keep your content safe, your web browser implements something called the same origin policy.

The default policy ensures that scripts and other active content loaded from one site or domain cannot interfere or interact with content from another location without an explicit indication that this is the desired behavior.

In certain cases, the developer of the original page might have legitimate reasons to write code that interacts with content or services at other locations. CORS provides the mechanism to allow the developer to tell the browser to allow this interaction.

Good News
Here's the good news in a nutshell: Amazon S3 now supports Cross Origin Resource Sharing (aka CORS). The CORS specification gives you the ability to build web applications that make requests to domains other than the one which supplied the primary content.

You can use CORS support to build web applications that use JavaScript and HTML5 to interact directly with resources in Amazon S3 without the need for a proxy server.  You can implement HTML5 drag and drop uploads to Amazon S3, show upload progress, or update content directly from your web applications. External web pages, style sheets, and HTML5 applications hosted in different domains can now reference assets such as web fonts and images stored in an S3 bucket, enabling you to share these assets across multiple web sites.

Read the new CORS documentation to learn more.

 

You can configure any of your S3 buckets for cross-domain access through the AWS Management Console or the S3 API. You do this by adding one or more CORS rules to your bucket. Each rule can specify a domain that should have access to your bucket (e.g. www.mysite.com) and a set of HTTP verbs you wish to allow (e.g. PUT). Here is a quick tour of the relevant parts of the console. There is a new Add CORS Configuration option in the property page for each bucket:

Clicking that option will display the CORS Configuration Editor:

We have included a number of sample CORS configurations in the S3 documentation.

I know that many of you have been asking for this feature for quite some time. Let me know how it works out for you!

-- Jeff;

 

Comments

[Samuel Sutch]

Right on. Will you be adding support to CloudFront at any point in the near future?

[Timrpeterson]

oh man this is awesome! thanks for the post @Jeff!

[R]

Lovely. Clients use S3 together with our service and have asked about using it for fonts. So easy to switch on, too! Thanks.

[Podviaznikov]

Thank you! I really wanted this feature for long time.
S3 will be even more usable for me now.

[Criação de Sites]

Thanks for the sample CORS configurations. They really helped me!

[Dwlz]

I'm not sure you guys knew this, but uploading using HTML5 only and direct POST was already possible before this (was I really the only one who figured this out? I doubt it...). You just have to hide an iframe containing a JS file on S3 to proxy the upload through, using a mixture of postMessage + JS blobs. Obviously doing this through CORS is much more straightforward, but it was by no means impossible before this.

For an example of the implementation, look at https://letscrate.com. Drag + drop, upload progress, direct to S3. Contact me on Twitter if you have any more specific questions about how to do this (@dwlz).

[BenjaminCoe]

I Just finished porting our Chrome Extension over to using CORS/HTML 5 for uploading. Awesome, thanks!

Here's what it involved:

http://bencoe.tumblr.com/post/30685403088/browser-side-amazon-s3-uploads-using-cors

[concerto49]

Thanks for the best Jeff. CORS will be a great addition to S3. Going to make use of it now.

[S3Browser]

Thanks!

New version of S3 Browser Freeware comes with supports for CORS configuration:
http://s3browser.com/s3-bucket-cors-configuration.php

[Casron]

For anyone who might be interested I put together a couple examples of using this new feature with XHR2 and the FileAPI (both supported in newer browsers). Along with the Javascript needed I created an example of signing a PUT request in both PHP and Ruby. You can find all the source here: https://github.com/carsonmcdonald/direct-browser-s3-upload-example

[Rockerston]

Does anyone know if it works with IE? And if so, which versions? And has anyone managed to put together any sample code in Javascript?

[danny korenblum]

just in time! thank you amazon

[amanuel]

Hi, how would one do this using s3cmd? I want to update my chef recipe that creates the buckets.

[Brenton]

Thanks for this writeup, Jeff. My question is 2 part:
1. Would it be more effective to just have the file uploaded to the web server (EC2) first then transfer the file over to S3 to avoid non CORS compatible browsers?
2. I'm using a php image resizing script that resizes the image in real time... So I need a solution that stores the full sized image in S3, then fetches that fullsized image directly from S3 and resizes it in real time when the image needs to be displayed. Is this possible with the method you've outlined in this post?

[PaddlePoP]

There is a rails plugin that does resumable uploads from the browser here http://cotag.github.com/Condominios/ doesn't support anything less then IE10