iframe 可以做什么？
iframe标签的作用是在文档中嵌套文档，或者在网页中嵌套网页。 作为一个反例：
页面
<!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>
<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页看看
嵌套成功了，不是很好吗？ 这样我们就可以直接复用B网站的功能了。
尝试在A页面嵌套百度
接下来我们尝试嵌套百度页面并更改iframe的src：
<iframe src="https://www.baidu.com"></iframe>
再次打开A页面可以看到：
OOXX怎么了，如何防止嵌套？
仔细查看错误报告，有两个问题：
浏览器严格禁止百度携带A页面嵌入的第三方cookie，也不能使用浏览器中存储的百度cookie。 浏览器当前不设置 SameSite cookie。 SameSite 默认值是 Laxhtml 嵌入，只有 Same-Site=None 且 Secure（即合约是 https 合约）的 cookie 才会跨站点传递。 cookie的sameSite属性有以下选项：
相同站点选项
严格的
严格禁止第三方 cookie
松懈
仅针对 get 请求发送
没有任何
Cookie 只能通过 HTTPS 合约发送，即必须有 Secure 数组
更多chrome规格详情请打开chrome的文档1和文档2。
目标网站已将X-Frame-Options设置为sameorigin。 X-Frame-Options 属性是网站在响应标头中设置的数组。 该阵列有以下选项：
X-Frame-Options 选项
否定
拒绝嵌套
同源
允许相同域名的网站嵌套
允许-fromexample.com/
允许嵌套指定域名的网站
原来，百度对网站来源进行了限制，拒绝所有非同域网站嵌套。 如何在nginx中配置数组，请参考MDN。 限制iframe引用可以有效从源头上防范很多安全风险，例如直接防止点击绑架。
并不是所有网站都会限制引用，比如花瓣()、美团(...
谈论cookie的传递策略和引用限制似乎很遥远，而这些功能正在不断影响着iframe的发展。
iframe 的好处
解决跨域iframe嵌套支持postMessage方法html 嵌入，完美避免跨域问题，点此查看postMesage的具体用法
复用函数，防止函数重复开发
广告页面和顶层页面通常不涉及页面间通信，仅使用嵌套功能非常适合
天然沙箱实现css隔离、js隔离，在微后端实践中占有一席之地
iframe的缺点 页面风格不统一
顶楼页面和内嵌页面的风格差异很大，页面看起来很丑，没有项目的统一感，提高了用户体验。屏蔽了顶楼页面的onload风暴
嵌入页面加载完成后，加载主页面。共享连接池
顶层页面和外层页面共享连接池。 chrome下，只能同时发送6个http请求。 iframe的嵌入会影响主页的资源加载。 尖端
https网页可以嵌套http网页吗？不可以，会出现如下错误
MixedContent：“www.a.com”页面是通过 HTTPS 加载的，但请求了不安全的框架“www.b.com”。 该请求已被阻止； 内容必须通过 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。
什么是点击绑架
早年，黑客利用点击绑架的方式，在钓鱼网站下嵌入CCB页面。 当用户点击该钓鱼网站的普通按钮时，实际点击的可能是中国农业银行页面。 确认汇款按钮。
总结
随着人们个人信息安全保护意识的增强，浏览器厂商也越来越注重保护用户隐私。 例如，微软每年都需要因侵犯用户隐私而缴纳巨额罚款，因此Chrome对cookie访问的限制也越来越严格。 浏览器对cookie的控制越来越严格，这无疑对iframe产生了很大的影响。 想象一下，在不久的将来，浏览器完全禁止第三方cookie，iframe跨域嵌套网站也无法携带cookie。 想要实现如此多的跨公司嵌套合作，显然是有难度的。
如有遗漏之处，欢迎在评论区留言！ 在本文中，iframe 扩展到 cookie 和浏览器安全性。 旁边的小姐姐会单独写一篇关于Web安全和CSP的文章。 跟着小姐姐一起学习吧。
