Javascript 如何设置'；X-Frame-Options'；在iframe上？

如果我像这样创建一个

iframe

：

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

var dialog=$（''）.dialog({

如何修复错误：

拒绝显示

'https://www.google.com.ua/?gws_rd=ssl“

在帧中，因为它将“X-frame-Options”设置为“SAMEORIGIN”

---

使用JavaScript？

您不能在

iframe

上设置

X-Frame-Options

。这是由您请求资源的域设置的响应头（

google.com.ua

）。在这种情况下，他们将标题设置为

SAMEORIGIN

，这意味着他们不允许在其域之外的

iframe

中加载资源。有关更多信息，请参阅MDN

快速检查标题（如Chrome developer tools中所示）将显示从主机返回的

X-Frame-Options

值

---

X-Frame-Options

是请求响应中包含的一个标头，用于说明请求的域是否允许在一个框架中显示自己。它与javascript或HTML无关，请求的发起人无法更改

---

此网站已将此标题设置为不允许在

iframe

中显示。客户端无法停止此行为

---

为此，您需要匹配apache或您正在使用的任何其他服务中的位置

如果您使用的是apache，则在httpd.conf文件中

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

ProxyPass应用程序的绝对路径/相对路径
ProxyPass应用程序的反向绝对路径/相对路径

如果您控制发送iframe内容的服务器，您可以在Web服务器中设置

X-Frame-Options

配置Apache 要发送所有页面的X-Frame-Options标题，请将其添加到站点配置中：

Header always append X-Frame-Options SAMEORIGIN

add_header X-Frame-Options SAMEORIGIN;

配置nginx 要将nginx配置为发送X-Frame-Options标头，请将其添加到http、服务器或位置配置中：

Header always append X-Frame-Options SAMEORIGIN

add_header X-Frame-Options SAMEORIGIN;

无配置 此标题选项是可选的，因此如果根本未设置此选项，则您将为下一个实例（例如，访问者浏览器或代理）提供配置此标题的选项

---

来源：

X-Frame-Options HTTP响应头可用于指示是否允许浏览器在

、

或

中呈现页面。网站可通过确保其内容未嵌入其他网站来避免点击劫持攻击

有关更多信息：

对于这个问题，我有一个替代解决方案，我将使用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");
?>

---

解决方案是安装浏览器插件

发布值为

DENY

的HTTP头

X-Frame-Options

（或具有不同服务器源的

SAMEORIGIN

）的网站不能集成到IFRAME中…除非您通过安装忽略

X-Frame-Options

头的浏览器插件来更改此行为（例如）

---

请注意，出于安全原因，完全不建议这样做。

您可以在要在iframe中加载的站点的web配置中设置x-frame-option，如下所示

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

不太可能……我用过

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

---

由于没有真正提到服务器端的解决方案：

必须这样设置（来自apache的示例），这并不是最好的选择，因为它在所有方面都允许，但是在看到服务器正常工作后，您可以轻松地更改设置

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

---

您不能在HTML正文中真正添加x-iframe，因为它必须由站点所有者提供，并且在服务器规则中

---

您可能要做的是创建一个PHP文件，加载目标URL和该PHP URL的内容，这应该可以顺利运行。

您可以在tomcat实例级配置文件（web.xml）中完成 需要在web.xml配置文件中添加“过滤器”和“过滤器映射”。 这将在所有页面中添加[X-frame-options=DENY]，因为它是一个全局设置

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

httpHeaderSecurity
org.apache.catalina.filters.HttpHeaderSecurityFilter
真的
防舔
真的
防舔吸
否认
httpHeaderSecurity
/*
如果没有任何帮助，你仍然想在iFrAME中呈现这个网站，考虑使用一个代理。
 
如果你遵循XML方法，那么下面的代码将起作用。
    <security:headers>
        <security:frame-options />
        <security:cache-control />
        <security:content-type-options />
        <security:xss-protection />
    </security:headers>
<security:http>



（我重新提出这个答案，因为我想分享我为解决这个问题而创建的变通方法）

如果您无法访问承载您希望在
元素中提供服务的网页的网站，您可以通过使用启用CORS的反向代理绕过
X-Frame-Options
SAMEORIGIN限制，该反向代理可以从web服务器（上游）请求网页并将其提供给最终用户

以下是该概念的直观示意图：


由于我对我发现的CORS代理不满意，我最终自己创建了一个，我称之为CORSflare：它被设计为在一个（无服务器计算）环境中运行，因此它是100%免费的解决方案-只要你不需要它来每天接受超过10万个请求

您可以在上找到代理源代码；完整文档（包括安装说明）可以在我的博客的中找到。
这也是一个新的浏览器安全功能，可防止网络钓鱼和其他安全威胁。对于chrome，您可以下载扩展以防止浏览器拒绝请求。
我在本地使用WordPress时遇到了这个问题