How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

Question

I am developing a web page that needs to display, in an iframe, a report served by another company's SharePoint server. They are fine with this.

The page we're trying to render in the iframe is giving us X-Frame-Options: SAMEORIGIN which causes the browser (at least IE8) to refuse to render the content in a frame.

First, is this something they can control or is it something SharePoint just does by default? If I ask them to turn this off, could they even do it?

Second, can I do something to tell the browser to ignore this http header and just render the frame?

Answer 1

If the 2nd company is happy for you to access their content in an IFrame then they need to take the restriction off - they can do this fairly easily in the IIS config.

There's nothing you can do to circumvent it and anything that does work should get patched quickly in a security hotfix. You can't tell the browser to just render the frame if the source content header says not allowed in frames. That would make it easier for session hijacking.

If the content is GET only you don't post data back then you could get the page server side and proxy the content without the header, but then any post back should get invalidated.

Answer 2

UPDATE 2019: You can bypass X-Frame-Options in an <iframe> using my X-Frame-Bypass Web Component. It extends the IFrame element by using multiple CORS proxies and it was tested in the latest Firefox and Chrome.

You can use it as follows:

1. (Optional) Include the Custom Elements with Built-in Extends polyfill for Safari:

   <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>
   

2. Include the X-Frame-Bypass JS module:

   <script type="module" src="x-frame-bypass.js"></script>
   

3. Insert the X-Frame-Bypass Custom Element:

   <iframe is="x-frame-bypass" src="https://example.org/"></iframe>
   

Answer 3

The X-Frame-Options header is a security feature enforced at the browser level.

If you have control over your user base (IT dept for corp app), you could try something like a greasemonkey script (if you can a) deploy greasemonkey across everyone and b) deploy your script in a shared way)...

Alternatively, you can proxy their result. Create an endpoint on your server, and have that endpoint open a connection to the target endpoint, and simply funnel traffic backwards.

Answer 4

As for second question - you can use Fiddler filters to set response X-Frame-Options header manually to something like ALLOW-FROM *. But, of course, this trick will work only for you - other users still won't be able to see iframe content(if they not do the same).

Answer 5

Yes Fiddler is an option for me:

1. Open Fiddler menu > Rules > Customize Rules (this effectively edits CustomRules.js).
2. Find the function OnBeforeResponse

3. Add the following lines:

   oSession.oResponse.headers.Remove("X-Frame-Options");
   oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
   

4. Remember to save the script!