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

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

iframe 是什么？

iframe 是一个 html 标签html

<iframe></iframe>
复制代码

iframe 标签的一些属性：前端

属性	做用
frameborder	是否显示边框
width	宽度
height	高度
name	名称
src	在 iframe 中显示的目标网站的 URL
scrolling	是否显示滚动条
sandbox	安全限制

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

配置项	做用
allow-scripts	容许运行脚本
allow-downlods	容许下载
allow-same-origin	容许同域请求:ajax
allow-top-navigation	容许使用顶层上下文的导航: window.top
allow-popups	容许从 iframe 中弹出新窗口:window.open
allow-forms	容许 form 表单提交

更多选项，点击这里查看web

iframe 能够作什么？

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

在 A 页面中嵌套 B 页面

A 页面chrome

<!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的内容，关注小姐姐，一块儿学一学。