postMessage 简介

postMessage是 HTML5 中引入的一种在不同窗口或框架之间安全地传递数据的机制。通过使用postMessage，我们可以实现跨域通信，让不同域名下的页面进行消息传递，而不会受到同源策略的限制。

基本用法

postMessage方法接受两个参数：要发送的消息和目标窗口的 origin（指定目标窗口的源）。目标窗口可以是其他窗口、iframe、甚至是不同域名的页面。

语法

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

• otherWindow：目标窗口，可以是其他窗口、iframe、甚至是不同域名的页面。
• message：要发送的消息，可以是任何数据类型。
• targetOrigin：目标窗口的 origin，可以是字符串"*"表示接受来自任意源的消息，也可以是一个具体的 URL。
• transfer：可选参数，表示要发送的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，发送方不再保有所有权。

示例

// 发送消息
targetWindow.postMessage(message, targetOrigin);

当接收到消息时，可以通过监听message事件来处理。

// 接收消息
window.addEventListener("message", function (event) {
  // event.origin 可以检查消息的来源
  // event.data 包含发送的数据
  // 处理接收到的消息
});

应用场景

1. 父子窗口通信：在包含页面与嵌套的 iframe 之间进行通信，例如，父级页面向 iframe 发送消息或者从 iframe 接收消息。

2. 跨域通信：通过postMessage来实现不同域名之间的安全数据传递，避免了同源策略的限制。

3. 窗口之间的消息传递：在同一个页面中的不同窗口之间进行消息传递，比如弹出窗口向主窗口发送消息。

4. Web Worker 通信：在 Web Worker 线程与主线程之间进行消息传递，实现多线程编程。

安全性考虑

在使用postMessage时，需要注意确保消息的来源和目标是可信任的，避免被恶意脚本利用。

1. 确认event.origin的值，验证消息来源；

2. 使用targetOrigin参数限制发送消息的目标 URL；

3. 对接收到的数据进行有效性验证，防止 XSS 攻击；

4. 避免过度依赖postMessage，考虑其他安全机制。

总结

postMessage提供了一种安全可靠的跨窗口通信机制，可以在不同窗口之间传递消息，实现父子窗口通信、跨域通信、窗口间通信等功能。在使用时需要注意安全性，合理设置消息来源和目标，确保系统安全可靠。希望本文对于理解和应用postMessage有所帮助。

参考

runoob.com/postmessage