2

We use S3 to store our images for Wecora.com. We have a bucket setup called cdn-production and have are using S3's ability to interpret a CNAME with cdn-production.wecora.com to avoid CORS issues. Lastly, we are using HTML5 Canvas in our application to display images.

With that all said, we are getting daily reports from random users using everything from Chrome to Safari to iPads and Android reporting that images are not loading on their HTML5 canvas! We cannot duplicate these issues locally when we try to load their saved canvases, but they send over screen shots that shot the images missing! It's driving us nuts!

The only thing we can think is that it's a weird CORS issue but we cannot replicate. Below is our CORS and bucket policy. Has anyone else seen this type of intermittent missing image behavior (possibly access denied, possibly something else)

Our CORS policy is as follows:

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

and our bucket policy is thus:

{
"Version": "2012-10-17",
"Statement": [
    {
        "Sid": "AddPerm",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::cdn-production.wecora.com/*"
    }
]
}
JoshL
  • 1,397
  • 1
  • 12
  • 28
  • I'm encountering this as well. I have a Canvas app and intermittently, but fairly regularly, we have some images that simply do not load. They load for everyone else. They exist on the server and load when hit directly or with CURL. Other images from Amazon load fine. It is very hard to reproduce but once it happens will tend to continue happening every refresh for a while. Did you ever figure this out? – Samuel Horwitz Feb 12 '16 at 21:17
  • 1
    As a quick followup, http://stackoverflow.com/questions/14176470/canvas-element-with-and-image-loaded-from-aws-s3-using-cors-does-not-work-first and http://stackoverflow.com/questions/14228839/all-of-my-browsers-are-not-sending-the-origin-header seemed relevant to my situation. I haven't been able to fully test yet because reproduction is hard, but I believe this is caused essentially by loading the images beforehand (perhaps in an `` tag in a preview window) without CORS headers and then that cahced, un-CORS'd image not being allowed onto the canvas. I don't want to make it an answer yet – Samuel Horwitz Feb 16 '16 at 15:05
  • Thank you @SamuelHorwitz, you helped me as well. – Brandon May 03 '18 at 22:59

0 Answers0