11 ms·
Amazon S3 - Cross Origin Resource Sharing Support
- logical42 14y agooh my god it is about friggin' time.
- nathancahill 14y agoYes! Fonts in Firefox will work now!
- theli0nheart 14y agoHah, about time. About 6 months ago I rewrote the Let's Crate (https://letscrate.com https://letscrate.com) backend to work exclusively with Amazon S3 Direct POST uploads. Getting upload progress to work with that was a royal PITA, but in the end I got it working. If you're interested in how, perhaps that's a good subject for a far more lengthy post on how to write extremely convoluted Javascript. I gave myself a pat on the back (no flash, yay!) and vowed to never do anything like that again. As requested: Basically, the gist is that you accept the upload via a local JS file that acts as a conduit. You then turn the dropped / selected file object into a blob object and transfer that blob JS file that lives on S3 (using postMessage and a hidden iframe). That JS file on S3 is what actually performs the upload and tracks the upload progress. On progress events, I send back postMessage payloads to the local JS file to show updates to the user. Convoluted, but it works. :)
- tectonic 14y agoI'd really like to hear about how you did this. Any chance of open sourcing it?
- theli0nheart 14y agoSure! Although now that this is supported natively it seems like more of an academic exercise than anything else. If any others have interest (reply to this comment if you do), I can turn it into a library and put it on Github.
- mattyb 14y ago+1!
- john2365 14y ago-2
- tlack 14y agoI'd like to see it.
- iProject 14y agoI'd love to see it... for what it might guide to do on services other than S3
- fuzzythinker 14y agoYes please!
- btown 14y agoI'd love it if you could write that blog post. The technique sounds like it could be used for a lot of things, including communication in the other direction, i.e. downloading images meant to be drawn on a canvas from servers that don't support CORS.
- ajtaylor 14y agoI'll soon be implementing image upload support where the images live on S3. It would be fantastic to be able to have the user's browser directly upload to S3 rather than go through the web server. If you were to open source your code I'd love to learn from it.
- tlrobinson 14y agoHow do you get access to the file to be uploaded in JavaScript? Are you using the HTML5 File API?
- lyime 14y agoBefore upload yes. After uploaded, you have the URL.
- dylanpyle 14y agoI found this solution for a very similar problem, which is roughly the same approach: http://dira.ro/2011/10/17/heroku-s3-canvas-and-the-security-error-of-doom http://dira.ro/2011/10/17/heroku-s3-canvas-and-the-security-... Implementation here: https://github.com/dira/cross-domain-image-proxy https://github.com/dira/cross-domain-image-proxy And a jQuery plugin here: https://github.com/rlmattax/jquery-s3-image-proxy https://github.com/rlmattax/jquery-s3-image-proxy After weighing the pros and cons of proxying versus this, I settled on the postMessage strategy -- but still no fun at all, and I'm so glad that CORS is finally an option.
- EthanEtienne 14y agoHere's one example from jquery file upload: https://github.com/ncri/s3_uploader_example https://github.com/ncri/s3_uploader_example
- deleted 14y ago[deleted]
- akoumjian 14y agoIt's been 3.5 long years since first feature request, but thank you!
- ceejayoz 14y agoOK, now how about CloudFront?
- jeffbarr 14y agoI am researching that with the team as we speak. Need to make sure that the right headers are passed back from CloudFront to the S3 origin.
- grandalf 14y agoit works
- logical42 14y agorather beautifully, might i add.
- kateray 14y agoHow did you get it to work? I've been wracking my brain over this but can't configure it correctly http://stackoverflow.com/questions/12358173/correct-s3-cloudfront-cors-configuration http://stackoverflow.com/questions/12358173/correct-s3-cloud...
- ceejayoz 14y agoSweeeeet!
- ceejayoz 14y agoThanks!
- RoboTeddy 14y agoFinally, I won't have to proxy s3 requests through my own nginxes. I've pled for this feature in the AWS forum, over their commercial support (which I bought just to bug them about this), and to werner vogels directly. Thanks jeffbarr!
- jeffbarr 14y agoYou are very welcome!
- EthanEtienne 14y agoThank you so much man, you saved me and my team a bunch of development next week. ABSOLUTELY PERFECT TIMING!! We used the iframe trick, but it sucked. This is MUCH, MUCH, MUCH better, thank you!!!!
- aidos 14y agoFunny, I had an email from the s3 team asking if I was in need of redirection support yesterday. I said I'd rather have CORS and SSL. So, SSL support next week, Jeff? :)
- 46Bit 14y agoAwesome. Will this allow us to load images into canvas without security errors?
- throw_away 14y agosomewhat shocked they pushed Friday before the weekend.
- notatoad 14y agopretty good strategy if you ask me. amazon has to have engineers working seven days a week anyways, if they push new stuff on a friday afternoon then it gets a couple days of low usage before all their customers get back to work on monday and try to implement it.
- nickm12 14y agoSure, critical systems have round-the-clock coverage, but pushing big changes before the weekend is still not optimal. If there is an emergency, you'd rather have most of your workforce available, awake, and at work.
- northband 14y agoI prefer Friday launches. If crap hits the fan I would rather fix on Sat/Sun vs the Monday morning rush.
- chao- 14y agoAs excited as I am about this finally happening, I was so pissed about having to deal with this issue over and over (e.g. JS files describing WebGL models), that I was on the verge of starting a service to provide the layer of redirection with CORS support, ala what Heroku does for EC2. I was actually getting a bit psyched for it, because I was convinced Amazon didn't care about ever implementing this. At least now I won't launch something only to have Amazon eat my lunch when they finally came around to providing this much-needed feature.
- petervandijck 14y agoAdding a feature people want to AWS isn't a business, they'll always launch it eventually :)
- purephase 14y agoThis must have been difficult to work out. My thanks (or condolences?) to Amazon for this. It will make my life a bit easier!
- TazeTSchnitzel 14y agoGreat. Could somebody explain CORS to me? How is making the server you're contacting specify it wants to receive requests, in the response header, secure? The request has already been made!
- muriithi 14y agoIf the request is made by a web page from a different server it would ordinarily be rejected because of the same origin policy. Using CORS allows you to specify which servers you can accept requests from unless of course you are using ; Access-Control-Allow-Origin: * More info ; https://developer.mozilla.org/en-US/docs/HTTP_access_control https://developer.mozilla.org/en-US/docs/HTTP_access_control http://en.wikipedia.org/wiki/Cross-origin_resource_sharing http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
- TazeTSchnitzel 14y agoDoesn't it keep a risk of XSS attacks though, since the CORS policy is only disovered AFTER the request is made?
- charliesome 14y agoThe request is still made regardless, your JavaScript just won't be able to access the response without a CORS header set.
- MatthewPhillips 14y agoThe request isn't actually made (at least not your request). The browser sends an OPTIONS request to get the CORS policy and then will block your request if its not allowed. Edit: My above comment is slightly incorrect. If the request is "simple" it will be made and then you'll be blocked if it doesn't fit the CORS policy. If the request is not deemed "simple" (according to some rules you can look up in the spec) then the OPTIONS flow occurs.
- rhmontv 14y agoCan anybody Show me an working example of a working html/JavaScript script which uploads to S3 directly over html. Never worked with html5 Upload before. Where can i get more information how this will work? Is it a normal form send with additional fields for authentication? I really have no clue and would be very happy to be pointed into right direction. Thanks in advance
- jeromeparadis 14y agoGreat timing. I recently began working on a project where I ran into the problem of cross-domain fonts in Firefox trying to serve static assets from S3 to CloudFront. Had to resort using my own nginx proxy through CloudFront for fonts and add an additional request to the page. Finally, problem solved!