CODEWITHSUNDEEP
imagegoogle-chromeamazon-s3request
Whatsrupp
Whatsrupp

Reputation: 61

Why are images loaded from a public S3 bucket no longer displaying after upgrading to Chrome 76?

I am developing a react app that loads images from a public s3 bucket, this has been working consistently for months. Today I upgraded to google chrome 76 and instead of loading the images it just returns a blank. The same effect was seen on a number of machines.

Interestingly the request for the image returns 200 but there's no image shown. If I visit the S3 url link manually the image is visible.

I was wondering if it could have anything to do with this forum post and new security measures introduced in the new version of chrome?

Here's a snippet of the content security policy we have for image requests

<meta
    http-equiv="Content-Security-Policy"
    content="img-src * 'self' blob: data:;"
/>

Is there anything I can do to get these images loading again?

Upvotes: 1

Views: 563

Answers (1)

Whatsrupp
Whatsrupp

Reputation: 61

I have got to the root of this and it seems like this was a CORB issue. Which must have been updated slightly in the new v76 release.

What was happening is that, when we were uploading the images to S3, we weren't explicitly setting the Content-Type header in the upload request. S3 then was incorrectly deriving the Content-Type as application/x-www-form-urlencoded. So when we tried to GET the images and load them into an img tag, Chrome saw this as invalid (understandably) and then blocked them.

Interestingly, the images have been loading in with the wrong content type fine up until now and I wasn't shown any CORB warnings until I started uploading new images.

Useful article on CORB for developers

Stack Overflow Article that helped: How to change content type of Amazon S3 objects

Hope this helps!

Upvotes: 1

Related Questions