How do you use window.postMessage across domains?

window.postMessage 是一个非常强大的Web API，用于在不同的源（域、协议或端口）之间安全地实现跨域通信。使用 postMessage 可以避免传统的跨域通信风险，并确保消息的发送和接收双方都能确认对方的来源是可信的。

使用步骤

1. 发送消息: 首先，需要在发送消息的页面（父页面或源页面）上调用 window.postMessage() 方法。这个方法接受两个主要参数：要发送的消息和目标窗口的源。

   示例代码:

   javascript
   // 假设 childWindow 是一个打开的子窗口的引用
   var message = 'Hello, this is parent!';
   var targetOrigin = 'https://example.com'; // 指定接受消息的域
   
   childWindow.postMessage(message, targetOrigin);

2. 接收消息: 在目标页面（子页面或接受消息的页面），需要设置一个监听事件来处理接收到的消息。这主要通过监听 message 事件来实现。

   示例代码:

   javascript
   window.addEventListener('message', function(event) {
       // 检查消息来源是否符合预期
       if (event.origin !== "https://trusteddomain.com") {
           console.log('Received message from unauthorized domain:', event.origin);
           return; // 忽略不是来自预期源的消息
       }
   
       // 处理接收到的数据
       console.log('Received data:', event.data);
   }, false);

安全考虑

使用 window.postMessage 时，有几个安全问题需要特别注意：

• 始终检查 event.origin: 当接收到消息时，始终验证 event.origin 属性，确保它与预期的发送者域匹配。不要对来源不明确的消息进行处理。
• 仔细定义 targetOrigin: 发送消息时，确保 targetOrigin 严格定义，避免使用 "*"（这会允许任何域接收消息），除非在极特殊的情况下确实需要。

通过这种方式，window.postMessage 可以安全地用于跨域通信，同时确保数据的完整性和安全性。在实际应用中，这个方法常用于父页面与嵌入的iframe之间或者服务工作线程的通信中。