postmessage 是唯一被广泛支持的安全跨域窗口通信机制。它无需同源或服务器中转,但必须双向实现:发送方用 window.postmessage(data, targetorigin),接收方监听 message 事件并严格校验 event.origin、event.source 和 event.data,否则存在安全风险。

postMessage 是 JavaScript 中唯一被广泛支持的、安全实现跨域窗口通信的原生机制。它不依赖服务器中转,也不要求同源,只要目标窗口存在且允许接收(即监听了 message 事件),就能发送消息。
基本用法:发送与监听缺一不可
通信是双向的,必须同时完成「发送」和「监听」两步:
- 使用
window.postMessage(data, targetOrigin)向目标窗口发消息;data可以是任意可序列化的值(字符串、对象、数字等),targetOrigin必须写明确的协议+域名+端口(如"https://example.com"),不能用"*"(除非你完全信任所有来源) - 在接收方用
window.addEventListener('message', handler)监听,并在回调中校验event.origin和event.source,防止恶意窗口冒充
关键安全细节:不校验 origin 就等于裸奔
很多开发者只关注“能收到”,却忽略验证来源。攻击者可能通过 iframe 注入恶意页面,伪造 message 事件触发逻辑漏洞。正确做法是:
用于 inference.sh 的 JavaScript/TypeScript SDK,可运行 AI 应用、构建代理、集成 150+ 模型。包名:@inferencesh/sdk(npm install),完整 TypeScript 支持。
- 始终检查
event.origin === 'https://trusted-domain.com',不要只比对 hostname - 必要时验证
event.source是否为预期的 window 对象(比如保存过 opener 或 iframe.contentWindow) - 对
event.data做类型和结构校验,避免原型污染或未定义字段引发异常
常见场景示例:父页与 iframe 通信
假设主站 https://a.com 内嵌了来自 https://b.com/widget.html 的 iframe:
- 父页向 iframe 发送配置:
iframe.contentWindow.postMessage({type: 'init', theme: 'dark'}, 'https://b.com') - iframe 中监听并响应:
window.addEventListener('message', e => { if (e.origin !== 'https://a.com') return; console.log(e.data); }) - iframe 可通过
e.source.postMessage(...)回传结果给父页,e.source自动指向发送方窗口
注意生命周期与上下文限制
postMessage 不是持久通道,每次调用都是独立事件。还需注意:
- 目标窗口必须已加载完成(比如在 iframe 的
load事件后发送) - 若目标页面刷新或关闭,
contentWindow会失效,需重新建立引用或捕获错误 - Web Worker 也支持 postMessage,但 worker 间通信需通过主线程中转,不直接跨域
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










