前端 postMessage

前端 postMessage 是一种跨窗口通信的方式，可以实现不同窗口之间的数据传递和交互。通过 postMessage 方法，我们可以向其他窗口发送消息，并在接收窗口中监听消息事件，从而实现窗口之间的通信。

在发送消息时，我们需要指定目标窗口的 origin（源），以确保消息只会被发送到指定的窗口。在接收消息时，我们需要判断消息来源是否合法，以防止恶意攻击。

相关问题

前端postMessage发的消息怎么收到

### 如何在前端接收通过 `postMessage` 发送的数据

为了确保能够安全有效地接收来自其他窗口的消息，在目标页面中应当监听特定的事件并验证消息来源。具体来说，可以通过添加一个针对 `message` 事件的监听器来捕获由 `postMessage()` 方法发出的信息。

#### 设置 `message` 事件监听器
当接收到 `postMessage` 消息时，会触发 `message` 事件，此时可以访问该事件对象中的 `data` 属性获取实际传送过来的数据[^4]：

window.addEventListener('message', function(event){
    // 验证消息来源是否可信非常重要
    if (event.origin !== '预期的发信方URL') {
        return; // 如果不是信任的源，则忽略此条消息
    }
    
    try {
        const receivedData = event.data;
        console.log("Received data:", receivedData);
        
        // 对receivedData进行进一步处理...
        
    } catch(error) {
        console.error("Error processing message", error);
    }
});

上述代码片段展示了如何定义一个回调函数用于处理传入的消息，并且包含了基本的安全检查措施以防止潜在的安全风险。这里强调了对 `event.origin` 的校验，这是为了避免非授权站点冒充合法发送者而设计的重要防护手段之一[^1]。

此外，值得注意的是，除了简单的字符串外，现代浏览器还支持更复杂的数据结构作为 `postMessage` 的参数被传输，比如 JSON 对象等。因此可以根据实际情况调整解析逻辑以便更好地适应应用需求。

前端如何使用postMessage

postMessage是HTML5提供的一种在不同源之间进行安全通信的机制。当两个页面处于不同的域时，通常受到同源策略的限制，而不能直接访问彼此的数据。postMessage允许页面之间通过发送和接收消息来进行跨域通信。

在前端使用postMessage的基本步骤如下：

1. 发送消息：一个页面（称为发送方）可以使用`window.postMessage`方法向另一个页面（称为接收方）发送消息。这个方法接受两个参数，第一个是要发送的消息（可以是任何类型的数据），第二个是接收方页面的源地址（即协议+域名+端口号）。

例如，如果页面A想要向域名为`https://www.example.com`的页面B发送消息，可以使用以下代码：

   var message = "hello, world!";
   window.postMessage(message, "https://www.example.com");

2. 接收消息：接收方页面需要设置一个`message`事件监听器来接收来自其他源的消息。当其他页面调用`postMessage`向该页面发送消息时，它会触发该监听器。

例如，页面B接收来自其他页面的消息可以这样写：

   window.addEventListener("message", function(event) {
     console.log("Received message: " + event.data);
   });

3. 验证消息：为了安全起见，接收方应该验证消息来源。可以通过检查事件对象`event.origin`来确认消息是否来自预期的域。

修改上面的代码来验证消息来源：

   window.addEventListener("message", function(event) {
     if (event.origin === "https://www.example.com") {
       console.log("Received message from trusted source: " + event.data);
     } else {
       console.log("Received message from an untrusted source: " + event.data);
     }
   });

使用postMessage时需要考虑安全问题，确保你只接收和响应来自预期来源的消息，并对可能接收到的任何数据进行适当的验证和清洗，以防止跨站脚本攻击（XSS）等安全风险。