How to set 'X-Frame-Options' on iframe?

Question

If I create an iframe like this:

var dialog = $('<div id="' + dialogId + '" align="center"><iframe id="' + frameId + '" src="' + url + '" width="100%" frameborder="0" height="'+frameHeightForIe8+'" data-ssotoken="' + token + '"></iframe></div>').dialog({

How can I fix the error:

Refused to display 'https://www.google.com.ua/?gws_rd=ssl' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

with JavaScript?

Drew Gaynor · Accepted Answer · 2014-12-08T13:35:43.293

292

You can't set X-Frame-Options on the iframe. That is a response header set by the domain from which you are requesting the resource (google.com.ua in your example). They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain. For more information see The X-Frame-Options response header on MDN.

A quick inspection of the headers (shown here in Chrome developer tools) reveals the X-Frame-Options value returned from the host.

enter image description here

edited Dec 08 '14 at 13:35

answered Dec 08 '14 at 13:23

Drew Gaynor

8,292
5
40
53

15

With YouTube, you can change the endpoint URL to the "embed" version. See http://stackoverflow.com/questions/25661182/embed-youtube-video-refused-to-display-in-a-frame-because-it-set-x-frame-opti (I know this isn't strictly what the OP is searching for, but google gives this result first!) – Jan 27 '16 at 13:56
9

Now 2021. According to the [https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#syntax](latest MDN docs), DENY and SAMEORIGIN are the only remaining valid options, with ALLOW-FROM deemed obsolete. Does this mean that cross-site iframes are officially something of the past (except if explicitly circumvented with plugins, etc.)? – Cornel Masson Mar 08 '21 at 09:09
`Note: The Content-Security-Policy HTTP header has a frame-ancestors directive which obsoletes this header for supporting browsers.` Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options Solution: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors – Daniel Klimuntowski May 10 '22 at 13:08

Rory McCrossan · Answer 2 · 2022-02-11T08:45:27.887

101

X-Frame-Options is a header included in the response to the request to state if the domain requested will allow itself to be displayed within a frame. It has nothing to do with javascript or HTML, and cannot be changed by the originator of the request.

This website has set this header to disallow it to be displayed in an iframe. There is nothing that can be done in a client-side web browser to stop this behaviour.

Configuring Apache

To send the X-Frame-Options header for all pages, add this to your site's configuration:

Header always append X-Frame-Options SAMEORIGIN

Configuring nginx

To configure nginx to send the X-Frame-Options header, add this either to your http, server or location configuration:

add_header X-Frame-Options SAMEORIGIN;

No configuration

This header option is optional, so if the option is not set at all, you will give the option to configure this to the next instance (e.g. the visitors browser or a proxy)

source: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

edited May 17 '16 at 06:04

answered Mar 04 '16 at 07:37

rubo77

19,527
31
134
226

This helped me. I comment out these two lines: `add_header Strict-Transport-Security "max-age=86400; includeSubdomains"; add_header X-Frame-Options DENY;` from the nginx-snippets, and then it worked straight away. – Zeth Oct 20 '17 at 08:19
2

NGINX, **important to say where**, inside location? – Peter Krauss Apr 21 '19 at 22:47
May I know the location where I need to set this header for Apache? – Pallavi Jul 25 '20 at 04:38
For Apache add the options inside the tag for your website, most probably a config file inside /etc/apache2/sites-enabled/ – rubo77 Jul 25 '20 at 07:10

score 23 · Answer 4 · answered Nov 28 '18 at 19:43

23

Since the solution wasn't really mentioned for the server side:

One has to set things like this (example from apache), this isn't the best option as it allows in everything, but after you see your server working correctly you can easily change the settings.

           Header set Access-Control-Allow-Origin "*"
           Header set X-Frame-Options "allow-from *"

answered Nov 28 '18 at 19:43

Mike Q

6,716
5
55
62

where i need to add this lines ? in proxy ? – يعقوب Sep 20 '22 at 16:49
1

@YaaKouB I am not sure what you are trying to do but it can go into the .htaccess or the config files for apache for example. FYI https://tecadmin.net/configure-x-frame-options-apache/ – Mike Q Sep 26 '22 at 15:57
@MikeQ have tried this but getting an issue apache2.service failed because the control process exited – Naren Verma Jul 13 '23 at 09:05

score 7 · Answer 5 · answered Jun 26 '19 at 11:49

7

and if nothing helps and you still want to present that website in an iframe consider using X Frame Bypass Component which will utilize a proxy.

answered Jun 26 '19 at 11:49

Tomer Ben David

8,286
1
43
24

score 5 · Answer 6 · answered Feb 07 '18 at 12:40

5

not really... I used

 <system.webServer>
     <httpProtocol allowKeepAlive="true" >
       <customHeaders>
         <add name="X-Frame-Options" value="*" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>

answered Feb 07 '18 at 12:40

LongChalk

783
8
13

This looks like a solution, but is this a security breach? – Yogurtu Nov 30 '18 at 17:39
1

It's **not** a good idea to disable same origin policy for your site unless you know exactly what you are doing. You should not allow domains different from yours to embed content. See https://www.codecademy.com/articles/what-is-cors and similar tutorials. – slhck Dec 10 '18 at 14:54

score 4 · Answer 7 · edited Oct 21 '17 at 15:01

4

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

For More Information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

I have an alternate solution for this problem, which I am going to demonstrate by using PHP:

iframe.php:

<iframe src="target_url.php" width="925" height="2400" frameborder="0" ></iframe>

target_url.php:

<?php 
  echo file_get_contents("http://www.example.com");
?>

edited Oct 21 '17 at 15:01

Rory McCrossan

331,213
40
305
339

answered Oct 25 '16 at 11:30

Shailesh Dwivedi

657
7
15

6

Is this a viable solution to use the page after it loads? Will I be able to interact with the pages after inital load? Wouldn't every request for the domain have to be proxied in order to use the content after it loads? – Timothy Gonzalez Nov 10 '16 at 20:05

score 2 · Answer 8 · answered Sep 21 '20 at 23:35

This is also a new browser security feature to prevent phishing and other security threats. For chrome, you can download an extension to prevent the browser from denying the request. I encountered this issue while working on WordPress locally.

I use this extension https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe

score 1 · Answer 9 · answered Jul 23 '20 at 03:09

(I'm resurrecting this answer because I would like to share the workaround I created to solve this issue)

If you don't have access to the website hosting the web page you want to serve within the <iframe> element, you can circumvent the X-Frame-Options SAMEORIGIN restrictions by using a CORS-enabled reverse proxy that could request the web page(s) from the web server (upstream) and serve them to the end-user.

Here's a visual diagram of the concept:

Since I was unhappy with the CORS proxies I found, I ended up creating one myself, which I called CORSflare: it has been designed to run in a Cloudflare Worker (serverless computing), therefore it's a 100% free workaround - as long as you don't need it to accept more than 100.000 request per day.

You can find the proxy source code on GitHub; the full documentation, including the installation instruction, can be found in this post of my blog.

Is Server A requesting the content from Server B, or is the NOdeJS proxy doing that? For instance, is the request IP passed onto the Server B API? — MeSo2, Mar 19 '23 at 23:11

score 0 · Answer 10 · answered Nov 18 '15 at 10:51

For this purpose you need to match the location in your apache or any other service you are using

If you are using apache then in httpd.conf file.

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>

score 0 · Answer 11 · answered May 03 '17 at 21:26

0

The solution is to install a browser plugin.

A web site which issues HTTP Header X-Frame-Options with a value of DENY (or SAMEORIGIN with a different server origin) cannot be integrated into an IFRAME... unless you change this behavior by installing a Browser plugin which ignores the X-Frame-Options Header (e.g. Chrome's Ignore X-Frame Headers).

Note that this not recommended at all for security reasons.

answered May 03 '17 at 21:26

Julien Kronegg

4,968
1
47
60

"solution" is a strong word, I'd say work around – Liam Apr 19 '22 at 13:36

score 0 · Answer 12 · answered Dec 01 '22 at 12:06

The way around this is to grab the HTML server side, add a <base href="..." /> so any relative and absolute paths still work.

Here's my node route /api/url/:url

export default async function handler(req, res) {
  const url = `https://${req.query.url}`;
  const response = await fetch(url);
  const urlContents = await response.text();

  // Prepend the base to make sure all relative and absolute paths work
  const urlContentsWithHead = `<base href='${url}' /></head>${urlContents}`;

  res.status(200).send(urlContentsWithHead);
}

You can then use this route directly in the iframe

<iframe src={`/api/url/${url}`} />

Oddly when I tried to do this "properly" by putting the <base /> element just before the closing </head> tag by using a replace, it didn't work. But putting the base before all of the markup (even the <html>) seemed to work.

Not sure if there will be any adverse affects

score -1 · Answer 13 · answered Nov 07 '17 at 06:06

-1

you can set the x-frame-option in web config of the site you want to load in iframe like this

<httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="*" />
    </customHeaders>
  </httpProtocol>

answered Nov 07 '17 at 06:06

Nikki

409
1
5
15

if i want to open stackoverflow, where can i find web config ? isn't it for server side ? – irum zahra Jul 11 '19 at 08:41

score -2 · Answer 14 · answered Mar 25 '19 at 11:50

-2

You can not really add the x-iframe in your HTML body as it has to be provided by the site owner and it lies within the server rules.

What you can probably do is create a PHP file which loads the content of target URL and iframe that php URL, this should work smoothly.

answered Mar 25 '19 at 11:50

so_sc

17
1
7

2

"You can probably" then post it as a comment if its not an answer – M.K Mar 25 '19 at 12:13
1

What if it turns out to be an answer MK – so_sc Jun 07 '19 at 07:12
Then it is a suggestion that worked, not a specific solution, so it should be placed as a comment – M.K Jun 08 '19 at 08:15

score -3 · Answer 15 · answered May 30 '19 at 14:19

you can do it in tomcat instance level config file (web.xml) need to add the 'filter' and filter-mapping' in web.xml config file. this will add the [X-frame-options = DENY] in all the page as it is a global setting.

<filter>
        <filter-name>httpHeaderSecurity</filter-name>
        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
        <async-supported>true</async-supported>
        <init-param>
          <param-name>antiClickJackingEnabled</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>antiClickJackingOption</param-name>
          <param-value>DENY</param-value>
        </init-param>
    </filter>

  <filter-mapping> 
    <filter-name>httpHeaderSecurity</filter-name> 
    <url-pattern>/*</url-pattern>
</filter-mapping>

How to set 'X-Frame-Options' on iframe?

15 Answers15

Configuring Apache

Configuring nginx

No configuration

Linked

Related