How can I allow my site to be embeded within iframe?

Question

I have a site hosted on an external server and I would like to be able run it (within an iframe) from my local dev environment (localhost). Unfortunately, I am getting "This content cannot be displayed in a frame" message within the frame content when trying to load the page with the iframe. How can I resolve this?

The local website that uses the iframe is classic asp, while the site hosted on an external server is MVC4. I only get the error when trying to iframe the MVC4 web app. When I try to iframe a classic asp site that sits on the same server (same domain) as the MVC4 app, I get no error.

Solution 1

According to Mozilla Developer Network, there are three options which are supported on either <frame>, <iframe> or <object> elements:

• X-Frame-Options: DENY
• X-Frame-Options: SAMEORIGIN

Edited: From Dorner's comment, the below option is no longer supported and should not be used:

• X-Frame-Options: ALLOW-FROM https://example.com/

The first and last are definitely not what you need. I tried with a local server to access another local server using:

X-Frame-Options: ALLOW-FROM http://localhost/

But I got a response: 'allow-from http://localhost/' is not a recognized directive. The header will be ignored.

It sort of worked because the header was ignored, yet you have to evaluate if that is desirable for your website. In that case it would just be simpler to ask your server to NOT send this header. But only do it if you understand the consequences for your project.

On IIS it can be done through web.config with:

<system.webServer>
 <httpProtocol>
  <customHeaders>
    <remove name="X-Frame-Options" />
  </customHeaders>
 </httpProtocol>
</system.webServer>

For Apache, see this topic.

Just remember, it is up to your web browser to honor the header. Mozilla even states that as:

The added security is only provided if the user accessing the document is using a browser supporting X-Frame-Options.

I believe Edge is being more strict with this rule than Webkit for example.

Solution 2

What turned out to be the fix was using SuppressXFrameOptionsHeader to ensure that the XFrameOptionsHeader setting is not being overwritten automatically.