嵌入的iframe又不能访问了？还有这些你不知道的事

客户又反馈内嵌的第三方页面不能正常访问啦！ 快来学一学iframe相关的知识，一次搞定iframe吧。

iframe 是一个 html 标签

iframe 标签的一些属性：

sandbox 选项是顶层上下文用来控制 iframe 安全性的，配置项有：

更多选项，点击这里查看

iframe 标签的作用是：在文档中嵌套文档，或者说在网页中嵌套网页。 举个例子：

A 页面

B 页面

B 页面内嵌在 A 页面当中

打开 A 页面看一下

嵌套成功了，是不是很 nice？这样我们就可以直接复用 B 网站的功能了。

接下来我们试着嵌套一下百度一下的页面 将 iframe 的 src 修改一下：

再打开 A 页面看一下：

OOXX 发生了什么,怎么不让嵌套呢？

仔细看看报错，有两个问题：

浏览器禁止了携带第三方 cookie 嵌套在 A 页面中的百度不能使用保存在浏览器中的百度的 cookie。浏览器现在没有设置 SameSite 的 cookie 默认 SameSite 值为 Lax，只会跨站传递 Same-Site=None 且 Secure（即协议为 https 协议） 的 cookie。 cookie 的 sameSite 属性有以下选项：

更多 chrome 规范细节可以打开 chrome 的文档 1、文档 2了解

目标网站 www.baidu.com 设置了X-Frame-Options为sameorigin X-Frame-Options 属性是网站设置在响应头中的字段，该字段有以下选项：

原来是百度对网站做了来源限制，拒绝所有非同域网站将其嵌套啦。如何在 nginx 中配置该字段，可参考MDN。限制 iframe 引用对于网站来说可以从源头上有效的避免很多安全隐患，比如点击劫持就直接被避免了。

并不是所有的网站都会做引用限制，比如花瓣(www.huaban.com)、美团(https://www.meitua…

讲 cookie 传递策略和引用限制就好像说远了，但是这些功能都在不断都影响着 iframe 的发展。

解决跨域 iframe 嵌套支持 postMessage 方法，完美避开跨域的问题,点这里查看 postMesage 的具体用法

复用功能 避免重复开发功能

加载广告 广告页面与顶层页面一般不涉及页面间通信，仅使用嵌套功能非常适合

天然的沙箱 实现了 css 隔离和 js 隔离，在微前端实践中占有一席之地

https 的网页可以嵌套 http 的网页？ 不可以,会导致以下错误

Mixed Content: The page at 'www.a.com' was loaded over HTTPS, but requested an insecure frame 'www.b.com'. This request has been blocked; the content must be served over HTTPS.

chrome 提供了可选项可以手动设置支持 https 跳转 http chrome://flags/#cookies-without-same-site-must-be-secure 由于安全性，不推荐这样使用。解决办法：让跳转页面支持 https

chrome 提供了可选项可以手动设置支持 https 网站 下载 http 的内容 chrome://flags/#treat-unsafe-downloads-as-active-content 由于安全性，不推荐这样使用。解决办法：让下载资源服务支持 https

chrome 提供了可选项可以手动设置自动携带第三方 cookie chrome://flags/#same-site-by-default-cookies 由于安全性，不推荐这样使用。

什么是点击劫持 早些年黑客的攻击手段就是借助了点击劫持，将一个银行页面内嵌在一个钓鱼网站下面，当用户进入这个钓鱼网站点击一个普通按钮的时候，实际点击到的可能是银行页面的确认转账按钮。

随着人们对个人信息安全保护的意识提升，各家浏览器厂商更加注重保护用户的隐私安全。比如谷歌，每年需要支付由于侵犯用户隐私带来的巨额罚款，所以 chrome 对 cookie 的访问限制越来越严格。浏览器对 cookie 的控制更加严格，对于 iframe 来说无疑带来了很大的影响。想象一下，不久的将来，浏览器完全禁止了第三方 cookie，iframe 跨域嵌套网站无法携带cookie，那么很多跨公司的嵌套合作恐怕无法达成了。

如果还有遗漏的点，欢迎大加在评论区留言哟！这篇讲iframe延伸到了cookie和浏览器安全，后面小姐姐会单独写一篇web安全、CSP的内容，关注小姐姐，一起学一学。