postMessage – 跨域消息传递

admin web前端 暂无评论 407 浏览

window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性，但他们可以用这种消息传递技术来实现安全的通信。

这项技术称为“跨文档消息传递”，又称为“窗口间消息传递”或者“跨域消息传递”。

postMessage() 方法，该方法允许有限的通信 —— 通过异步消息传递的方式 —— 在来自不同源的脚本之间。

postMessage 可用于解决以下方面的问题：

  • 页面和其打开的新窗口的数据传递
  • 页面与嵌套的 iframe 消息传递
  • 多窗口之间消息传递

想要使用 postMessage 实现跨域通信和页面间数据通信，只要记住 window 提供的 postMessage 方法和 message 事件就ok了。

一、语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。

message

要发送的数据。它将会被结构化克隆算法序列化，所以无需自己序列化（部分低版本浏览器只支持字符串，所以发送的数据最好用JSON.stringify() 序列化）。

targetOrigin

通过 targetOrigin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串“*”（表示无限制）或者一个 URI（如果要指定和当前窗口同源的话可设置为"/"）。在发送消息的时候，如果目标窗口的协议、主机地址或端口号这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会发送。

二、接收消息

如果指定的源匹配的话，那么当调用 postMessage() 方法的时候，在目标窗口的Window对象上就会触发一个 message 事件。

window.addEventListener("message", (event)=>{
   var origin = event.origin;
   // 通常，onmessage()事件处理程序应当首先检测其中的origin属性，忽略来自未知源的消息
   if (origin !== "http://example.org:8080")
     return;
   // ...
}, false);

event 的属性有：

  • data: 从其他 window 传递过来的数据副本。
  • origin: 调用 postMessage 时，消息发送窗口的 origin。例如：“http://example.com:8080”。
  • source: 对发送消息的窗口对象的引用。可以使用此来在具有不同 origin 的两个窗口之间建立双向数据通信。

三、使用场景

当想要在Web页面中嵌入一个来自其他站点的模块或者“gadget”的时候，利用 postMessage() 和 message 事件实现的跨域消息传递是很有用的。

首先 gadget 的开发者可以将 gadget 内容定义在一个 HTML 页面中，它负责监听 message 事件，并将它们分发给对应的 js 函数去处理。然后，嵌入 gadget 的Web页面就可以通过 postMessage() 方法传递消息来和 gadget 进行交互了。

四、完整示例

1. 不同 origin 的两个窗口之间建立双向数据通信

/**
* localhost:10002/index页面
**/
// 接收消息
window.addEventListener('message', (e) => {
     console.log(e.data)
})
// 发送消息
const targetWindow = window.open('http://localhost:10001/user');
setTimeout(()=>{
     targetWindow.postMessage('来自10002的消息', 'http://localhost:10001')
}, 3000)

/**
* localhost:10001/user页面
**/
window.addEventListener('message', (e) => {
     console.log(e.data)
     if (event.origin !== "http://localhost:10002") 
     return;
     e.source.postMessage('来自10001的消息', e.origin)
})

2. 页面与嵌套的 iframe 消息传递

http://www.domain1.com/a.html

<iframe id="iframe" src="http://www.domain2.com/b.html"></iframe>

<script>
var iframe = document.getElementById('iframe');

iframe.onload = function() {
   // 向domain2发送跨域数据
   iframe.contentWindow.postMessage('来自domain1的消息', 'http://www.domain2.com');
};

// 接受domain2返回数据
window.addEventListener('message',(e) => {
    console.log(e.data);
}, false);
</script>

http://www.domain2.com/b.html

<script>
// 接收domain1的数据
window.addEventListener('message',(e) => {
    console.log(e.data);

    if(e.origin !== 'http://www.domain1.com')
    return;

    // 发送消息给domain1
    window.parent.postMessage('来自domain2的消息', e.origin);
}, false);
</script>

五、安卓平台差异化处理

/* Android 平台 Post Message 消息监听 Hook */
window.Android_handleMessage = message => {
    // Android 使用 Base64 编码格式，需要先解码
    let data = decodeURIComponent(escape(window.atob(message)));
};

六、安全问题

  1. 如果你不希望从其他网站接收 message，请不要为 message 事件添加任何事件监听器。
  2. 如果你确实希望从其他网站接收message，请始终使用 origin 和 source 属性验证发件人的身份。
  3. 当你使用 postMessage 将数据发送到其他窗口时，始终指定精确的目标 origin，而不是 *。

七、兼容性

所有主流浏览器（包括IE8）都支持。

 

相关博文

postMessage – 跨域消息传递
赏
标签: