iframe使用
iframe
一. iframe元素
- iframe是html元素，用于在网页中内嵌另一个网页。
- iframe默认有一个宽高, 存在边界
- iframe是一个行内快级元素，可以通过display修改
二. iframe元素属性介绍
- src : 指定内联网页的地址
- frameborder: iframe默认有个边界，可以设置frameborder为0清除边界。
- width, height: iframe的宽高
- name: 框架的名称
- scrolling: 是否可滚动, yes/no/auto
<!-- a.demo.com -->
<iframe name="iframeName" id="iframeId" src="b.demo.html" frameborder="0"></iframe>
三. iframe互相操作
- 每个iframe里各自维护自己的全局window对象
- 只有同域才能进行iframe之间的读改写，跨域时，只能进行简单的路由跳转
- 在父级使用window.frames[name]可以获取子iframe的window对象, 获取其document对象, 对子iframe进行dom操作
- 子iframe通过window.parent来获取父级元素的window对象，从而获取document来操作dom
iframe通信
1. postMessage通信
- postMessage 可以跨源通信
- 子window使用postMessage向父winodw发送消息，父window使用onmessage接受消息
window.postMessage(data, orgin, [transfer])
postMessage() 有三个参数
- 第一个参数：发送的数据
- 第二个参数：指定发送的地址，可以设置指定URL或 * 无限制
- 第三个参数：是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送方将不再保留所有权。
onmessage接受的MessageEvent对象有四个属性
- type：表示该message的类型
- data：为 postMessage 的第一个参数
- origin：表示调用postMessage方法窗口的源
- source：记录调用postMessage方法的窗口对象
// a.demo.com
window.addEventListener("message", function(event) {if (event.origin !== 'http://b.demo.com') return;// todotoggleFullScreen()
})window.toggleFullScreen = () => {// do something
}// b.demo.com
let data = {name: 'rmy'}
window.parent.postMessage(data, "http://a.demo.com")
注意：获取子元素的document时要确保子元素所有dom元素已经挂载完毕，因此在原生的写法时，必须写在window的onload事件中
2. 设置domain
- document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域
- 设置domain的方法只能用于解决主域相同而子域不同的情况
- a页面url为a.demo.com, a页面中iframe引用的b页面url为b.demo.com
// a.demo.com
window.toggleFullScreen = () => {// do something
}// b.demo.com
document.domain = 'demo.com' // 或 a.demo.comwindow.parent.toggleFullScreen()
内容安全策略（content-security-policy）
内容安全策略
- 防止点击劫持(Clickjacking)：禁止页面被放在iframe里加载
具体的，对于点击劫持，主要有 3 项应对措施：
- CSP（Content Security Policy，即内容安全策略）
- X-Frame-Options
- framekiller
Content Security Policy 内容安全策略
- CSP 的本质是白名单制度，指定哪些外部资源可以加载
- 两种方法可以启用 CSP, 启用后，不符合 CSP 的外部资源就会被阻止加载。
- 通过 HTTP 头信息的Content-Security-Policy的字段。
Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https;// 脚本：只信任当前域名
// 标签：不信任任何URL，即不加载任何资源
// 样式表：只信任cdn.example.org和third-party.org
// 框架（frame）：必须使用HTTPS协议加载
// 其他资源：没有限制
- 通过网页的标签
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
限制选项
- 资源加载限制
- frame-ancestors：嵌入的外部资源
- script-src：外部脚本
- style-src：样式表
- img-src：图像
- media-src：媒体文件（音频和视频）
- font-src：字体文件
- object-src：插件（比如 Flash）
- child-src：框架
- connect-src：HTTP 连接（通过 XHR、WebSockets、EventSource等）
- worker-src：worker脚本
- manifest-src：manifest 文件
- defaltu-src: 用来设置上面各个选项的默认值。
# 限制所有的外部资源，都只能从当前域名加载
Content-Security-Policy: default-src 'self'
- 资源加载限制值
- self：只能从当前域名加载
- none：不限制
- url：指定域名，多个域名用空格隔开