在跨域技术中,有一个使用iframe解决跨域问题,其中有一个关键的技术点,叫做web Message,也就是将获取到的数据传递给原站,这边的web message也就是web通信
Web Message
在跨域中,Web Message的角色就是将目标站点的资源传递给原站的,这是一种文档中独立的浏览上下文间的数据分享方式,且不会有DOM被暴露给恶意的跨站脚本的危险
浏览上下文,解释:就是将document对象呈现给用户的环境(所谓的环境就是例如标签页,窗口,iframe等)
实际上所谓的Web通信是有两种方式的:跨文档通信和通道通信,但是这两种通信都是基于messageEvent事件的
message事件对象
属性(只读) | 定义 |
data | message的数据 |
origin | message的源,包含协议,域名和端口 |
lastEventld | 当前消息事件的唯一标识符 |
source | 原始文档窗口的引用,windowProxy对象 |
prots | MessageProt对象的数据 |
跨文档通信
文档智件的相互通信
示例
A页面
<iframe src="webAb.html"></iframe>
<body>
<input class="j-ipt" />
<button class="j-btn">发送</button>
<script>
var a= window.frames[0],
btn = document.querySelector('.j-btn'),
ipt = document.querySelector('.j-ipt');
btn.addEventListener('click',function (params) {
window.frames[0].postMessage(ipt.value,'*')
})
</script>
</body>
B页面
<div class="j-message"></div>
<script>
window.addEventListener('message',function (params) {
document.querySelector('.j-message').innerHTML=params.data;
})
</script>
这个示例就是将A页面中在input的输入,显示在B页面的DIV上,这就是文档之间的相互通信
跨文档通信使用的API就是postMessage方法
otherwindow.postMessage(message,targetOrigin[,transfer])
- otherwindow:窗口的引用
- message:将要被发送到其他window的数据
- targetOrigin:定义哪些窗口可以接收消息
- transfer:与message同时发送,这些对象的所有权移交给target,这个不常用
执行后会抛出message事件,因此在目标页面中,只需要监听message事件就可以获取到发送信息
安全性
跨文档通信是存在安全性问题的,因为发送来的消息可能是恶意的,因此注意点
- 没有必要性的话,不要去监听message
- 使用origin和source属性校验发送方的身份
- 在发送方使用postMessage时,始终要指定精确的target
通道通信
这种方式不常用,大概就是:利用消息通道,直接进行双向浏览上下文之间的通信手段
这种技术,使用的是MessageChannel对象
构造函数MessageChannel()
- 返回一个带有两个MessagePort属性的MessageChannel新对象
- 这种实际上是创建了两个相互关联的端口,一个是发送端,一个是接收端
属性
- MessageChannel.port1
- MessageChannel.port2
MessagePort方法
MessagePort.postMessage:发送消息
MessagePort.start:开始在端口上分派消息
MessagePort.close:关闭端口
MessagePort.onmessage(这个是接收端的):event handle,监听消息事件