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

问题

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?

回答1:

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.

回答2:

You seem to be misunderstanding the problem. 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 you can do to stop this behaviour.

Further reading on X-Frame-Options

回答3:

In case you are in control of the Server that sends the content of the iframe you can set the setting for X-Frame-Options in your webserver.

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

回答4:

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 *"

回答5:

not really... I used

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

回答6:

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.

回答7:

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");
?>

回答8:

I had the same problem on my virtualmin server (apache) for wordpress in a subdirecotry and none of above answers could solve the problem on my case and still was getting the x-frame-options denied error message on console, until I tried to add below line to .htaccess file placed on my public_html\subdirectory\(wordpress root) directory:

header always set x-frame-options "SAMEORIGIN"

and this was the only working solution in my case. (note that there is a part containing always set rather than append or always append)

回答9:

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.

回答10:

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>

回答11:

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>

回答12:

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.

回答13:

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>

回答14:

If you are following xml approach, then below code will work.

    <security:headers>
        <security:frame-options />
        <security:cache-control />
        <security:content-type-options />
        <security:xss-protection />
    </security:headers>
<security:http>

来源：https://stackoverflow.com/questions/27358966/how-to-set-x-frame-options-on-iframe