① 需求背景
背景：需要用iframe标签引入一个别人'封装好'的'第三方资源',避免'重复造轮子'
通俗：在一个网页中'嵌入'另一个网页② 关注点
1) iframe标签的'业界'使用方法 --> '前端'
2) iframe的'csp'和'referrerpolicy'属性的'深入'探究 --> '开发和运维'③ 通过案例感性认识
需求：如下'后台页面布局',纯用'html'的,划分'4'部分
前端'代码'
细节点：宽'不'指定,默认100%,就是'浏览器的宽度'
效果'展示'：搭框的布局
继续： '左侧'菜单栏'默认页' --> 'src 嵌入资源,引入资源'
<iframe>标签生成一个'指定区域',在该区域中'嵌入其他网页'
更进一步：点击'左侧'的'侧边栏',相应的内容在'右边'展示
说明：'画框'的为细节点
明白： 'a标签的target属性'与'iframe标签name属性'的关系
理解上：src相当于把'iframe-left.html'页面'引入'到当前页面,相当于在一个页面里面找'target'
通俗： 页面的引入相当于'代码复制'过来,整体是一个页面,所以可以使用'name=wzj'形式
④ iframe属性
1) 属性的'含义'
2) 属性的'默认行为'
3) 区分'实验'属性和'常规'属性,不同'浏览器'支持程度不一样
iframe '全称'：Inline Frame1、name属性： 见'上面'的案例
2、allowfullscreen: 通过'js'控制是否'全屏'展示,默认是'false'
3、csp: 暂时'了解','未来'重点
4、loading : '加载机制'
备注： 作为一个'运维人员',了解含义即可,暂时'不需要'追究该'属性'细节
6、sandbox : '沙盒安全机制'
说明： 安全'细粒度'的控制
6、src'属性' --> "重点"
背景： 由于'Content-Security-Policy frame-ancestor属性的限制',服务器只允许特定域名访问
思考： 'iframe'也涉及跨域,通过'CORS Access-Control-Allow-Origin'可以解决吗?
深入： 也即设置'X-Frame-Options'或'CSP'头,不用设置'CORS'就可以跨域吗？CSP之frame-ancestor 如何使用CORS访问iframe
HTML5的window对象的postMessage方法可以允许来自不同源脚本采用异步方式进行有限的通信
iframe嵌入第三方资源未设置Set-Cookie中的SameSite=Mone导致跨站点Cookie失效
X-Frame-Options其实就是将'前端js'对iframe的'把控'交给'服务器'来进行处理⑤ referrerpolicy
1) 发不发送'Referer'请求头
2) 如果发送'Referer'请求头,内容形式是'什么'?
思考：可以在哪些地方'设置'或'修改'控制Referer行为
1) header 设置 --> '传递Referer请求头'
<meta name="referrer" content="origin">
2) body里面的标签 --> 控制'传递Referer请求头'行为
<a>、<area>、<img>、<iframe>、<script> 、 <link> 元素上的 referrerpolicy 属性
3) Referrer-Policy '请求头'设置
思考： 1、2、3的'优先级'?
4) nginx的'valid_referers指令和$invalid_referer变量'校验 --> '服务端校验Referer'
补充： Referer是可以'伪造'的,我们讨论'浏览器'访问的'一般场景'⑥ 杂谈
思考1： nginx的CSP 的属性是否可以'分开写',用add_header 形式,每个属性'一行'--> '可读性'
思考2： 如果在Content-Security-Policy 标头和meta元素中都指定了'CSP'指令
结论：则无论指定'多少个'CSP头,浏览器都将使用'限制最大'的CSP指令 --> 回答了'思考1和2'