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

Question

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

239

如果我像这样创建一个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({

如何修复JavaScript中的以下错误？

拒绝在框架中显示'https://www.google.com.ua/?gws_rd=ssl'，因为它将'X-Frame-Options'设置为'SAMEORIGIN'。

- Darien Fawkes

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- martinedwards · Answer 1

解决这个问题的方法是在服务器端获取HTML，添加一个<base href="..." />，这样任何相对路径和绝对路径仍然可以正常工作。

这是我的Node路由 /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);
}

然后您可以直接在 iframe 中使用此路由

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

有趣的是，当我尝试通过使用替换将<base />元素放置在关闭的</head>标记之前来“正确”地执行此操作时，它并没有起作用。但是，在所有标记（甚至是<html>）之前放置基础似乎可以工作。

不确定是否会有任何负面影响。

- Julien Kronegg · Answer 2

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

一个发出HTTP头X-Frame-Options的网站，如果值为DENY（或者SAMEORIGIN与不同的服务器来源），则无法集成到IFRAME中...除非您通过安装浏览器插件来更改此行为，该插件忽略X-Frame-Options头（例如Chrome's Ignore X-Frame Headers）。

请注意，出于安全原因，这绝不是推荐的做法。

- Nikki · Answer 3

你可以在想要加载到 iframe 中的网站的 Web 配置中设置 x-frame-option，就像这样

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

- so_sc · Answer 4

您不能在HTML主体中真正添加x-iframe，因为它必须由网站所有者提供，并且位于服务器规则之内。

您可以尝试创建一个PHP文件，该文件将加载目标URL的内容并将该php URL作为iframe引入，这应该可以顺利运行。

- Rejji · Answer 5

您可以在Tomcat实例级别的配置文件（web.xml）中完成此操作。需要在web.xml配置文件中添加“filter”和“filter-mapping”。这将在所有页面中添加[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>