嵌入的iframe无法访问？这里有一些你可能不知道的事情！
客户又反馈内嵌的第三方页面不能正常访问啦！
快来学一学iframe相关的知识，一次搞定iframe吧。
iframe 是什么？
iframe 是一个 html 标签
<iframe></iframe>
iframe 标签的一些属性：
| 属性 | 作用 |
|---|---|
| frameborder | 是否显示边框 |
| width | 宽度 |
| height | 高度 |
| name | 名称 |
| src | 在 iframe 中显示的目标网站的 URL |
| scrolling | 是否显示滚动条 |
| sandbox | 安全限制 |
sandbox 选项是顶层上下文用来控制 iframe 安全性的，配置项有：
| 配置项 | 作用 |
|---|---|
| allow-scripts | 允许运行脚本 |
| allow-downlods | 允许下载 |
| allow-same-origin | 允许同域请求:ajax |
| allow-top-navigation | 允许使用顶层上下文的导航: window.top |
| allow-popups | 允许从 iframe 中弹出新窗口:window.open |
| allow-forms | 允许 form 表单提交 |
更多选项，点击这里查看
iframe 可以做什么？
iframe 标签的作用是：在文档中嵌套文档，或者说在网页中嵌套网页。 举个例子：
在 A 页面中嵌套 B 页面
A 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>page A</title>
</head>
<body>
<p>这是a页面</p>
<!-- 在A页面中使用iframe内嵌了B页面 -->
<iframe src="./b.html"></iframe>
</body>
</html>
B 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>page B</title>
</head>
<body>
<p>这是b页面</p>
</body>
</html>
B 页面内嵌在 A 页面当中
打开 A 页面看一下
嵌套成功了，是不是很 nice？这样我们就可以直接复用 B 网站的功能了。
在 A 页面中嵌套百度试试
接下来我们试着嵌套一下百度一下的页面 将 iframe 的 src 修改一下：
<iframe src="https://www.baidu.com"></iframe>
再打开 A 页面看一下：
OOXX 发生了什么,怎么不让嵌套呢？
仔细看看报错，有两个问题：
-
浏览器禁止了携带第三方 cookie 嵌套在 A 页面中的百度不能使用保存在浏览器中的百度的 cookie。浏览器现在没有设置 SameSite 的 cookie 默认 SameSite 值为 Lax，只会跨站传递 Same-Site=None 且 Secure（即协议为 https 协议） 的 cookie。 cookie 的 sameSite 属性有以下选项：
SameSite option Strict 严格禁止第三方 cookie Lax 仅对 get 请求发送 None Cookie 只能通过 HTTPS 协议发送即必须拥有 Secure 字段 更多 chrome 规范细节可以打开 chrome 的文档 1、文档 2了解
-
目标网站 www.baidu.com 设置了X-Frame-Options为sameorigin X-Frame-Options 属性是网站设置在响应头中的字段，该字段有以下选项：
| X-Frame-Options | option |
|---|---|
| deny | 拒绝被嵌套 |
| sameOrigin | 允许被相同域名的网站嵌套 |
| allow-from example.com/ | 允许被指定域名的网站嵌套 |
原来是百度对网站做了来源限制，拒绝所有非同域网站将其嵌套啦。如何在 nginx 中配置该字段，可参考MDN。限制 iframe 引用对于网站来说可以从源头上有效的避免很多安全隐患，比如点击劫持就直接被避免了。
并不是所有的网站都会做引用限制，比如花瓣(www.huaban.com)、美团(https://www.meitua…
讲 cookie 传递策略和引用限制就好像说远了，但是这些功能都在不断都影响着 iframe 的发展。
iframe 的好处
-
解决跨域 iframe 嵌套支持 postMessage 方法，完美避开跨域的问题,点这里查看 postMesage 的具体用法
-
复用功能 避免重复开发功能
-
加载广告 广告页面与顶层页面一般不涉及页面间通信，仅使用嵌套功能非常适合
-
天然的沙箱 实现了 css 隔离和 js 隔离，在微前端实践中占有一席之地
iframe 的缺点
- 页面样式风格不统一
顶层页面和内嵌页面的样式风格迥异，页面看起来不美观，没有项目的一体感，用户体验下降。 - 阻塞顶层页面的 onload 事件
内嵌页面加载完毕之后，主页面才加载完毕。 - 共享连接池
顶层页面和内层页面共享连接池，在 chrome 下同时只能发送 6 个 http 请求，iframe 的嵌入会影响主页面的资源加载。
tips
-
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的内容，关注小姐姐，一起学一学。