X-Frame-Options 学习

1,321 阅读2分钟

返回头设置 X-Frame-Options

X-Frame-Options 是一个可选的返回头参数,可以决定当前页面是否可以在 iframe 中使用。它有三个可选属性值:ALLOW-FROMDENYSAMEORIGIN。 不设置 X-Frame-Options 头可以允许在任何页面中使用 iframe 嵌套当前页面。

  1. ALLOW-FROM: 可以将特定链接设置为白名单,允许在白名单的页面中使用 iframe 嵌套当前页面。
  2. DENY: 不允许在任何页面中使用 iframe 嵌套当前页面。
  3. SAMEORIGIN: 允许在同源页面中使用 iframe 嵌套当前页面。

MDN的页面就设置了这个参数,可以访问查看控制台。

禁止页面嵌入 iframe

通过禁止页面嵌入 iframe 可以避免很多攻击

Clickjacking 点击劫持

恶意网站会使用 iframe 显示其他网站,然后将其变得透明,再通过展示一个按钮覆盖在隐藏在网页上,这样当你点击了这个按钮的时候,可能会触发 iframe 页面的操作。

举个例子,我是一个掘金作者,我希望有更多的人关注我,但是我写的文章又不好,所以我就想了一个办法。我写了一个网站,里面可能推荐了一些你感兴趣的书,在底部我放了一个按钮,点击这按钮你就可以下载这些书籍。但实际上,我在这个按钮上叠加了一个透明的掘金页面,将关注按钮定位到了下载按钮上,当你想下载这些书的时候,其实你是关注了我,如果恰好你在这个电脑上也登录了掘金,那我的关注量就蹭蹭的往上涨了。

为了避免这种情况,就需要掘金做一些安全设置,可以设置 X-Frame-Options 来规避这种风险,当然还有其他的方法。

低版本浏览器兼容(仅对于IE)

在目前高版本的浏览器中,有更为严格的安全机制,但如果父级网页声明了低版本的浏览器,那么使用 iframe 嵌入的网页也会继承这个声明。

<meta http-equiv="X-UA-Compatible" content="IE=7">

以上代码告诉IE浏览器,无论实际版本是什么,都会以 IE7 引擎来渲染页面。

window.name

如果在 A 页面使用 iframe 嵌入 B 页面,我们知道在 A 页面时无法获取 B 页面的内容的,但是通过 iframe.contentWindow.name 我们可以获取 B 页面的 name 属性值。

参考文章

blog.mozilla.org/security/20…