entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/47ede88b35d67c5693d202fa3d19e7cb.png|imageAlt|blocks|key|1ar5r|text|你不能设置|unstyled|depth|inlineStyleRanges|entityRanges|6dtgn|在|62nqf|..。这是您向其请求资源的域设置的响应头(|841kg|在您的示例中)。他们已将标头设置为|8bj3j|在这种情况下，这意味着他们不允许在|7npdi|在他们的领域之外。有关更多信息，请参阅|36b55|X-Frame-Options响应头|4ic5l|在MDN上。|cmvbc|快速检查标头(此处显示在Chrome开发人员工具中)会发现|7okcp|从主机返回的值。|c8hpr|​|2793s|8dlqm|?|atomic|offset|length|ckcm3|9h100^0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|1B|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|1C|H|@]|I|@]|6|$]]|$B|L|D|M|2|F|G|1D|H|@]|I|@]|6|$]]|$B|N|D|O|2|F|G|1E|H|@]|I|@]|6|$]]|$B|P|D|Q|2|F|G|1F|H|@]|I|@]|6|$]]|$B|R|D|S|2|F|G|1G|H|@]|I|@]|6|$]]|$B|T|D|U|2|F|G|1H|H|@]|I|@]|6|$]]|$B|V|D|W|2|F|G|1I|H|@]|I|@]|6|$]]|$B|X|D|Y|2|F|G|1J|H|@]|I|@]|6|$]]|$B|Z|D|10|2|F|G|1K|H|@]|I|@]|6|$]]|$B|11|D|12|2|F|G|1L|H|@]|I|@]|6|$]]|$B|13|D|-4|2|F|G|1M|H|@]|I|@]|6|$]]|$B|14|D|15|2|16|G|1N|H|@]|I|@$17|1O|18|1P|B|1Q]]|6|$]]|$B|19|D|-4|2|F|G|1R|H|@]|I|@]|6|$]]|$B|1A|D|12|2|F|G|1S|H|@]|I|@]|6|$]]]]

You can't set <code>X-Frame-Options</code> on the <code>iframe</code>. That is a response header set by the domain from which you are requesting the resource (<code>google.com.ua</code> in your example). They have set the header to <code>SAMEORIGIN</code> in this case, which means that they have disallowed loading of the resource in an <code>iframe</code> outside of their domain. For more information see <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">The X-Frame-Options response header</a> on MDN.

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

<img src="https://i.stack.imgur.com/bjM2C.png" alt="enter image description here">

entityMap|blocks|key|e0rb9|text|是包含在|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8j24i|响应|3ok4v|请求声明所请求的域是否将允许其自身显示在帧内。它与javascript或HTML无关，并且不能由请求的发起者更改。|dpqno|此网站已将此标题设置为不允许在|9cqke|..。客户端无法阻止这种行为。|8t2j9|进一步阅读X-Frame-Options^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|N|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|O|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|P|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|Q|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|R|9|@]|A|@]|B|$]]]]

<code>X-Frame-Options</code> 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 <code>iframe</code>. There is nothing a client can do to stop this behaviour.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options" rel="noreferrer">Further reading on X-Frame-Options</a>

entityMap|blocks|key|4cqhl|text|如果您可以控制发送iframe内容的服务器，您可以为设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|egbas|在你的网络服务器上。|b102|配置Apache|cemh0|要发送所有页面的X-Frame-Options标头，请将以下内容添加到站点的配置中：|10s9c|Header+always+append+X-Frame-Options+SAMEORIGIN|code-block|syntax|javascript|b02sp|配置nginx|8nt0|要将nginx配置为发送X-Frame-Options报头，请将以下内容添加到您的http、服务器或位置配置中：|2ut0m|add_header+X-Frame-Options+SAMEORIGIN;|3oed0|无配置|bblm1|此标头选项是可选的，因此如果根本没有设置此选项，您将给下一个实例(例如访问者浏览器或代理)配置此选项。|8971i|来源：|4rdc0|9rtmh|https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|12|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|13|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|14|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|15|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|16|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|17|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|18|9|@]|A|@]|B|$]]|$2|R|4|S|6|K|8|19|9|@]|A|@]|B|$L|M]]|$2|T|4|U|6|7|8|1A|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1B|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1C|9|@]|A|@]|B|$]]|$2|Z|4|-4|6|7|8|1D|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|1E|9|@]|A|@]|B|$]]]]

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

<h1>Configuring Apache</h1>

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

<pre><code>Header always append X-Frame-Options SAMEORIGIN
</code></pre>

<h1>Configuring nginx</h1>

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

<pre><code>add_header X-Frame-Options SAMEORIGIN;
</code></pre>

<h1>No configuration</h1>

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: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options</a>

entityMap|blocks|key|f7e1f|text|由于服务器端并未真正提到该解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2d0dt|你必须像这样设置(来自apache的例子)，这不是最好的选择，因为它允许一切，但在你看到你的服务器正常工作后，你可以很容易地改变设置。|f2r63|Header+set+Access-Control-Allow-Origin+"*"
+++++++++++Header+set+X-Frame-Options+"allow-from+*"|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

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.

<pre><code> Header set Access-Control-Allow-Origin "*"
 Header set X-Frame-Options "allow-from *"
</code></pre>

entityMap|blocks|key|3u1fa|text|如果没有任何帮助，并且您仍然希望在iframe中显示该网站，请考虑使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|27vcf|X框架绕过组件|dk54m|它将利用代理。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

and if nothing helps and you still want to present that website in an iframe consider using <a href="https://github.com/niutech/x-frame-bypass" rel="noreferrer">X Frame Bypass Component</a> which will utilize a proxy.

entityMap|blocks|key|7shit|text|不是真的..。我用过|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

not really... I used 

<pre><code> &lt;system.webServer&gt;
 &lt;httpProtocol allowKeepAlive="true" &gt;
 &lt;customHeaders&gt;
 &lt;add name="X-Frame-Options" value="*" /&gt;
 &lt;/customHeaders&gt;
 &lt;/httpProtocol&gt;
 &lt;/system.webServer&gt;
</code></pre>

entityMap|blocks|key|fk15v|text|X-Frame-Options+HTTP响应头可用于指示是否应允许浏览器在|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4nev1|95pdc|目标|70imh|_|1nrih|url.php：^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|K|9|@]|A|@]|B|$]]|$2|D|4|E|6|7|8|L|9|@]|A|@]|B|$]]|$2|F|4|G|6|7|8|M|9|@]|A|@]|B|$]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]]]

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 <code>&lt;frame&gt;</code>, <code>&lt;iframe&gt;</code> or <code>&lt;object&gt;</code>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

For More Information: 
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options</a>

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

iframe.php:

<pre><code>&lt;iframe src="target_url.php" width="925" height="2400" frameborder="0" &gt;&lt;/iframe&gt;
</code></pre>

target_url.php:

<pre><code>&lt;?php 
 echo file_get_contents("http://www.example.com");
?&gt;
</code></pre>

entityMap|blocks|key|5kq7o|text|解决方案是安装一个浏览器插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6ouf1|发出HTTP标头的网站|etitr|值为|4j7cr|(或|57i2s|具有不同服务器源的)无法集成到IFRAME...除非您通过安装浏览器插件来更改此行为，该插件会忽略|6rkm7|标题(例如|cvr9q|Chrome忽略X-Frame标头|abqt|)。|7d9j6|请注意，出于安全原因，根本不建议这样做。^0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|S|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|T|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|U|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|V|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|W|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|X|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|Y|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|Z|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|10|9|@]|A|@]|B|$]]]]

The solution is to install a browser plugin. 

A web site which issues HTTP Header <code>X-Frame-Options</code> with a value of <code>DENY</code> (or <code>SAMEORIGIN</code> with a different server origin) cannot be integrated into an IFRAME... unless you change this behavior by installing a Browser plugin which ignores the <code>X-Frame-Options</code> Header (e.g. <a href="https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe" rel="nofollow noreferrer">Chrome's Ignore X-Frame Headers</a>).

Note that this not recommended at all for security reasons.

entityMap|blocks|key|8aidq|text|(我复活了这个答案，因为我想分享我为解决这个问题而创建的解决方法)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|35mov|如果您无法访问托管要在中提供的网页的网站^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

(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 <code>&lt;iframe&gt;</code> element, you can circumvent the <code>X-Frame-Options</code> 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:
<a href="https://i.stack.imgur.com/RaNnq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RaNnq.png" alt="enter image description here" /></a>
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 <a href="https://www.cloudflare.com/it-it/products/cloudflare-workers/" rel="nofollow noreferrer">Cloudflare Worker</a> (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 <a href="https://github.com/Darkseal/CORSflare" rel="nofollow noreferrer">GitHub</a>; the full documentation, including the installation instruction, can be found in <a href="https://www.ryadel.com/en/corsflare-free-cors-reverse-proxy-bypass-same-origin/" rel="nofollow noreferrer">this post</a> of my blog.

entityMap|blocks|key|16j6j|text|为此，您需要匹配apache或正在使用的任何其他服务中的位置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4cnh4|如果你使用的是apache，那么在httpd.conf文件中。|a1u1n|ProxyPass+absolute_path_of_your_application/your_relative_path
++++++ProxyPassReverse+absolute_path_of_your_application/your_relative_path|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

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.

<pre><code> &lt;LocationMatch "/your_relative_path"&gt;
 ProxyPass absolute_path_of_your_application/your_relative_path
 ProxyPassReverse absolute_path_of_your_application/your_relative_path
 &lt;/LocationMatch&gt;
</code></pre>

entityMap|blocks|key|ai84d|text|您可以在想要在iframe中加载的站点的web配置中设置x-frame-option，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

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

<pre><code>&lt;httpProtocol&gt;
 &lt;customHeaders&gt;
 &lt;add name="X-Frame-Options" value="*" /&gt;
 &lt;/customHeaders&gt;
 &lt;/httpProtocol&gt;
</code></pre>

entityMap|blocks|key|dnq6i|text|这也是一项新的浏览器安全功能，可防止网络钓鱼和其他安全威胁。对于chrome，你可以下载一个扩展来防止浏览器拒绝请求。我在本地使用WordPress时遇到了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7ndr6|我使用这个扩展|bgbkb|https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

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 <a href="https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe" rel="nofollow noreferrer">https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe</a>

entityMap|blocks|key|emnnp|text|您不能真的在您的HTML主体中添加x-iframe，因为它必须由站点所有者提供，并且它在服务器规则范围内。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e7deb|你可以做的就是创建一个PHP文件来加载目标URL和iframe的内容，这应该会很顺利。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

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.

entityMap|blocks|key|8ei94|text|您可以在tomcat实例级配置文件(+web.xml+)中完成此操作，需要在tomcat配置文件中添加“过滤器”和“过滤器映射”。这将添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|d4qiq|X-frame-options+=拒绝|8d2k8|因为它是一个全局设置。|3gsmh|httpHeaderSecurity
++++++++org.apache.catalina.filters.HttpHeaderSecurityFilter
++++++++true
++++++++
++++++++++antiClickJackingEnabled
++++++++++true
++++++++
++++++++
++++++++++antiClickJackingOption
++++++++++DENY
++++++++
++++

+++
++++httpHeaderSecurity+
++++/*|code-block|syntax|javascript^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|O|9|@]|A|@]|B|$J|K]]]]

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.

<pre><code>&lt;filter&gt;
 &lt;filter-name&gt;httpHeaderSecurity&lt;/filter-name&gt;
 &lt;filter-class&gt;org.apache.catalina.filters.HttpHeaderSecurityFilter&lt;/filter-class&gt;
 &lt;async-supported&gt;true&lt;/async-supported&gt;
 &lt;init-param&gt;
 &lt;param-name&gt;antiClickJackingEnabled&lt;/param-name&gt;
 &lt;param-value&gt;true&lt;/param-value&gt;
 &lt;/init-param&gt;
 &lt;init-param&gt;
 &lt;param-name&gt;antiClickJackingOption&lt;/param-name&gt;
 &lt;param-value&gt;DENY&lt;/param-value&gt;
 &lt;/init-param&gt;
 &lt;/filter&gt;

 &lt;filter-mapping&gt; 
 &lt;filter-name&gt;httpHeaderSecurity&lt;/filter-name&gt; 
 &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
&lt;/filter-mapping&gt;
</code></pre>

If I create an <code>iframe</code> like this: 

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

How can I fix the error:

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

with JavaScript?

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

 如果我创建一个 如下所示： var dialog = $('').dialog({ 如何修复错误： 拒绝展示 因为它将“X- frame -Options”设置为“SAMEORIGIN”。  和JavaScript？

问如何在iframe上设置'X-Frame-Options‘？
EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在iframe上设置'X-Frame-Options‘？EN

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在iframe上设置'X-Frame-Options‘？
EN