返回头设置 X-Frame-Options
X-Frame-Options 是一个可选的返回头参数,可以决定当前页面是否可以在 iframe 中使用。它有三个可选属性值:ALLOW-FROM,DENY,SAMEORIGIN。
不设置 X-Frame-Options 头可以允许在任何页面中使用 iframe 嵌套当前页面。
ALLOW-FROM: 可以将特定链接设置为白名单,允许在白名单的页面中使用iframe嵌套当前页面。DENY: 不允许在任何页面中使用iframe嵌套当前页面。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 属性值。