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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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

配置项	作用
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 页面

<!DOCTYPE html>
<html lang="en">
    <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>
    <p>这是a页面</p>
    <!-- 在A页面中使用iframe内嵌了B页面 -->
    <iframe src="./b.html"></iframe>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
    <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>
    <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 的嵌入会影响主页面的资源加载。
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的内容，关注小姐姐，一起学一学。
  分类：
 前端
 标签：
 前端JavaScriptECMAScript 6
 
  
      
    程序媛最可爱
        高级前端开发 @ 有趣的知识
         2,314

SameSite	option
Strict	严格禁止第三方 cookie
Lax	仅对 get 请求发送
None	Cookie 只能通过 HTTPS 协议发送即必须拥有 Secure 字段

X-Frame-Options	option
deny	拒绝被嵌套
sameOrigin	允许被相同域名的网站嵌套
allow-from example.com/	允许被指定域名的网站嵌套