PostMessage 如何帮助我们进行安全的跨源通信？

2023-11-24 10:14:55

PostMessage 的工作原理

PostMessage 是一种允许不同来源的脚本在浏览器中相互通信的机制。它通过使用 MessageChannel 或 MessagePort 接口来实现。

当您调用 postMessage() 方法时，它会在当前文档的 MessageChannel 或 MessagePort 上分发一条消息。此消息然后被传递给目标文档的 MessageChannel 或 MessagePort，并在该文档中触发 message 事件。

这允许您在不同的来源之间传递数据，而无需担心安全问题。这是因为 postMessage() 方法只允许您向同一个源（包括子域）的文档发送消息。如果您尝试向另一个源发送消息，该消息将被丢弃。

使用 PostMessage 的示例

以下是使用 PostMessage 在两个不同的源之间发送消息的示例：

// 发送方（source.html）
const source = document.getElementById('source');
const target = document.getElementById('target');

source.addEventListener('click', () => {
  target.contentWindow.postMessage('Hello from the source!', '*');
});

// 接收方（target.html）
const target = window;

target.addEventListener('message', (event) => {
  console.log('Message received from the source:', event.data);
});