page A

客户又反馈内嵌的第三方页面不能正常访问啦！快来学一学iframe相关的知识，一次搞定iframe吧。 ## iframe 是什么？ iframe 是一个 html 标签 ```html ``` 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 表单提交| 更多选项，点击[这里查看](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) ## iframe 可以做什么？ iframe 标签的作用是：在文档中嵌套文档，或者说在网页中嵌套网页。举个例子： ### 在 A 页面中嵌套 B 页面 A 页面 ```html page A

这是a页面

``` B 页面 ```html page B

这是b页面

``` B 页面内嵌在 A 页面当中打开 A 页面看一下 ![b.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf5185eeb15c45419990ad4c3a7065f0~tplv-k3u1fbpfcp-watermark.image) 嵌套成功了，是不是很 nice？这样我们就可以直接复用 B 网站的功能了。 ### 在 A 页面中嵌套百度试试接下来我们试着嵌套一下[百度一下](https://www.baidu.com)的页面将 iframe 的 src 修改一下： ```html ``` 再打开 A 页面看一下： ![sameSite.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da7c0160c2144d2088d77a53bc9cae92~tplv-k3u1fbpfcp-watermark.image) OOXX 发生了什么,怎么不让嵌套呢？仔细看看报错，有两个问题： 1. 浏览器禁止了携带第三方 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](https://www.chromestatus.com/feature/5633521622188032)、[文档 2](https://www.chromestatus.com/feature/5088147346030592)了解 2. 目标网站 https://www.baidu.com 设置了X-Frame-Options为sameorigin X-Frame-Options 属性是网站设置在响应头中的字段，该字段有以下选项： | X-Frame-Options | option | | ------------------------------- | ------------------------ | | deny | 拒绝被嵌套 | | sameOrigin | 允许被相同域名的网站嵌套 | | allow-from https://example.com/ | 允许被指定域名的网站嵌套 | 原来是百度对网站做了来源限制，拒绝所有非同域网站将其嵌套啦。如何在 nginx 中配置该字段，可参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)。限制 iframe 引用对于网站来说可以从源头上有效的避免很多安全隐患，比如点击劫持就直接被避免了。并不是所有的网站都会做引用限制，比如花瓣(https://www.huaban.com)、美团(https://www.meituan.com)、淘宝(https://www.taobao.com)。大家可以试一试。讲 cookie 传递策略和引用限制就好像说远了，但是这些功能都在不断都影响着 iframe 的发展。 ## iframe 的好处 1. 解决跨域 iframe 嵌套支持 postMessage 方法，完美避开跨域的问题,点[这里](https://juejin.cn/post/6982759183179317279)查看 postMesage 的具体用法 2. 复用功能避免重复开发功能 3. 加载广告广告页面与顶层页面一般不涉及页面间通信，仅使用嵌套功能非常适合 4. 天然的沙箱实现了 css 隔离和 js 隔离，在微前端实践中占有一席之地 ## iframe 的缺点 1. 页面样式风格不统一顶层页面和内嵌页面的样式风格迥异，页面看起来不美观，没有项目的一体感，用户体验下降。 2. 阻塞顶层页面的 onload 事件内嵌页面加载完毕之后，主页面才加载完毕。 3. 共享连接池顶层页面和内层页面共享连接池，在 chrome 下同时只能发送 6 个 http 请求，iframe 的嵌入会影响主页面的资源加载。 ## tips 1. https 的网页可以嵌套 http 的网页？不可以,会导致以下错误 > Mixed Content: The page at 'https://www.a.com' was loaded over HTTPS, but requested an insecure frame 'http://www.b.com'. This request has been blocked; the content must be served over HTTPS. 2. chrome 提供了可选项可以手动设置支持 https 跳转 http chrome://flags/#cookies-without-same-site-must-be-secure 由于安全性，不推荐这样使用。解决办法：让跳转页面支持 https 3. chrome 提供了可选项可以手动设置支持 https 网站下载 http 的内容 chrome://flags/#treat-unsafe-downloads-as-active-content 由于安全性，不推荐这样使用。解决办法：让下载资源服务支持 https 4. chrome 提供了可选项可以手动设置自动携带第三方 cookie chrome://flags/#same-site-by-default-cookies 由于安全性，不推荐这样使用。 5. 什么是点击劫持早些年黑客的攻击手段就是借助了点击劫持，将一个银行页面内嵌在一个钓鱼网站下面，当用户进入这个钓鱼网站点击一个普通按钮的时候，实际点击到的可能是银行页面的确认转账按钮。 ## 总结随着人们对个人信息安全保护的意识提升，各家浏览器厂商更加注重保护用户的隐私安全。比如谷歌，每年需要支付由于侵犯用户隐私带来的巨额罚款，所以 chrome 对 cookie 的访问限制越来越严格。浏览器对 cookie 的控制更加严格，对于 iframe 来说无疑带来了很大的影响。想象一下，不久的将来，浏览器完全禁止了第三方 cookie，iframe 跨域嵌套网站无法携带cookie，那么很多跨公司的嵌套合作恐怕无法达成了。如果还有遗漏的点，欢迎大加在评论区留言哟！这篇讲iframe延伸到了cookie和浏览器安全，后面小姐姐会单独写一篇web安全、CSP的内容，关注小姐姐，一起学一学。