Is it possible to set Origin Header for a iframe?

Question

What is required

I have a HTML/CSS document that I want to load on another Webapp and modify.

Choose to use a iframe so no style parent leaks into the document to be edited.

What have been done

The original document is saved on S3. S3 is correctly configured for CORS support.

When a image or video tag is placed with crossorigin="anonymous" attribute. The correct origin headers are send and S3 sets Access-Control-Allow-Origin in the response header.

Problem

When loading a html document inside a iframe from the same S3 bucket. I don't get Access-Control-Allow-Origin in the reponse header since origin header for CORS is not set.

So S3 won't send Access-Control-Allow-Origin if it doesn't receive the correct origin header in the request.

Solution Tried

I am happy with a solution that works only in modern browsers. And thus have looked into HTML5 iframe attributes sandbox and seamless. But none of them seems to help in this case.

I have also tried loading the content through xhr2 with content type set as document and correct origin headers set. And adding this to a iframe on the page. The problem with this is the css in the head of the document doesn't get loaded.

Is there any other solution for this? I was expecting a attribute that I can set on the iframe but nothing like that in w3c spec.

Answer 1

I think the solution is the one you already tried:

Load the HTML through AJAX, add it to the iframe using:

document.open() / document.write() / document.close()

and then rewrite all relative links to absolute links

/css/style.css -> <origina-domain>/css/style.css

You'll need to do this for all CSS, JS, images, etc.