CODEWITHSUNDEEP
iisiframelocalhostx-frame-options
Tom S
Tom S

Reputation: 165

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

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.

Upvotes: 7

Views: 28472

Answers (3)

Daniel
Daniel

Reputation: 713

X-Frame-Options header only supports two directives: DENY or SAMEORIGIN. While DENY blocks all attempts to embed the website in an iframe, SAMEORIGIN allows embedding only on the same domain. This limitation makes it unsuitable for allowing embedding on specific domains other than your own.

What you need is Content-Security-Policy HTTP header, it has a frame-ancestors directive which is what you need.

To make it work, set you headers to desired domain

In node.js:

res.setHeader('Content-Security-Policy', 'frame-ancestors https://www.google.com/;');

In ruby on rails:

response.headers["Content-Security-Policy"] = "frame-ancestors https://www.google.com/;"

With CSP header, you're good to go!

Upvotes: 1

Reuel Ribeiro
Reuel Ribeiro

Reputation: 1479

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:

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.

Upvotes: 2

Tom S
Tom S

Reputation: 165

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

Upvotes: 1

Related Questions