Embedded HTML page from S3 bucket via iframe can't load resources and media files

Question

We have an s3 bucket where we have multiple folders with different small projects that contain basic, static webpages with an index.html entry point. The plan is to integrate those static pages within a react-app through an iframe. When we do that with an example page, the embedding of the HTML document works but none of the resources get loaded (image files + stylesheets), throwing the following error:

DOMException: Blocked a frame with origin "BUCKET-DOMAIN" from accessing a cross-origin frame.

When looking up that error I usually find people trying to control some parts of the document rendered within the iframe using the postMessage API. In my case however I only want to make sure that the iframe embeds the website as it is shown on the publically available link with all resources.

I've tried making the S3 bucket specifically serve just one static website, thinking that this might influence the way the embedding works. However it's still the same problem. Pretty sure there's a very simple solution to this and something I'm overlooking. One potential option would be to give the S3 bucket a subdomain on our site, but I don't see how that would work for example in local development.

Answer 1

If you bucket is public then you can access with your cdn link. Otherwise You will configure it with aws sdk. I think this link will help you

Access files stored on Amazon S3 through web browser