postMessage 跨窗口通信

window.postMessage 用于 iframe / 弹窗与父页通信。若 不校验 event.origin 或对字符串 eval / 插入 HTML，可导致 任意站点向页面注入指令 或 窃取回传数据。

---

不安全接收端

window.addEventListener('message', (event) => {
  const data = event.data;
  document.getElementById('out').innerHTML = data; // XSS
});

---

不安全发送敏感数据

// 向所有接收者广播（targetOrigin='*'）
otherWindow.postMessage({ token: accessToken }, '*');

任何嵌入的中间帧都可能监听。

---

推荐写法

const TRUSTED_ORIGINS = new Set(['https://app.example.com']);

window.addEventListener('message', (event) => {
  if (!TRUSTED_ORIGINS.has(event.origin)) return;

  const data = event.data;
  if (!data || typeof data !== 'object' || data.channel !== 'my-app') return;

  document.getElementById('out').textContent = String(data.payload ?? '');
});

发送端指定精确目标源：

iframe.contentWindow.postMessage(
  { channel: 'my-app', payload: 'hello' },
  'https://trusted-child.example'
);

---

小结

始终：校验 event.origin、结构化协议（类型与字段）、不向 * 发敏感数据、展示时用文本而非 HTML。