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;
// todo
toggleFullScreen()
})
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.com
window.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:指定域名,多个域名用空格隔开