iframe使用_ifream

iframe

一. iframe元素

1. iframe是html元素，用于在网页中内嵌另一个网页。
2. iframe默认有一个宽高, 存在边界
3. iframe是一个行内快级元素，可以通过display修改

二. iframe元素属性介绍

1. src : 指定内联网页的地址
2. frameborder: iframe默认有个边界，可以设置frameborder为0清除边界。
3. width, height: iframe的宽高
4. name: 框架的名称
5. scrolling: 是否可滚动, yes/no/auto

<!-- a.demo.com -->
<iframe name="iframeName" id="iframeId" src="b.demo.html" frameborder="0"></iframe>
1
2

三. 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])
1

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")
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：获取子元素的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()
1
2
3
4
5
6
7
8
9

内容安全策略（content-security-policy）

内容安全策略

• 防止点击劫持(Clickjacking)：禁止页面被放在iframe里加载

具体的，对于点击劫持，主要有 3 项应对措施：

• CSP（Content Security Policy，即内容安全策略）
• X-Frame-Options
• framekiller

Content Security Policy 内容安全策略

• CSP 的本质是白名单制度，指定哪些外部资源可以加载
• 两种方法可以启用 CSP, 启用后，不符合 CSP 的外部资源就会被阻止加载。

1. 通过 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协议加载
// 其他资源：没有限制
1
2
3
4
5
6
7
8

2. 通过网页的标签

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
1

限制选项

1. 资源加载限制

• 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'
1
2

2. 资源加载限制值

• self：只能从当前域名加载
• none：不限制
• url：指定域名，多个域名用空格隔开