跨文档 vue 应用间安全通信唯一标准方案是 window.postmessage；需严格校验 event.origin、指定 targetorigin、统一消息结构、手动卸载监听器，并推荐封装为 composition api 自定义 hook。
在多个独立 Vue 应用实例之间实现安全通信，本质是跨文档（cross-document）而非单纯组件间通信。它们通常运行在不同 URL、不同上下文（如 iframe、popup、window.open 弹窗），甚至不同域名下。此时不能依赖 props / emit / Pinia 共享状态等同应用内机制，必须借助浏览器原生的跨源通信能力——window.postMessage 是唯一标准、安全、广泛支持的方案。
明确通信边界与角色划分
先厘清谁是发送方、谁是接收方，以及是否需要双向响应：
- 父应用（主站）嵌入子应用：用
<iframe></iframe>加载子应用，父发消息、子收；子也可主动 post 回父 - 弹窗场景（如 OAuth 登录页）：主应用调用
window.open()打开子应用，双方通过window.opener和window.opener.postMessage交互 - 同域多标签页：可配合
localStorage+storage事件做轻量同步，但不适用于跨域，且非实时
用 postMessage 实现安全双向通信
核心不是“怎么发”，而是“怎么验、怎么路由、怎么清理”。以下为关键实践要点：
-
始终校验 event.origin：接收方必须显式比对
event.origin === 'https://trusted-app.com'，禁止使用'*' -
消息结构统一加 type 字段：例如
{ type: 'AUTH_SUCCESS', data: { token: 'xxx' } }，便于后续扩展 handler 映射 -
发送时指定精确 targetOrigin：不要写
'*'，而应传入子应用的实际域名（如'https://widget.example.com'） -
监听器需手动卸载：在 Vue 组件 onUnmounted 或应用销毁时调用
window.removeEventListener('message', handler)，避免内存泄漏
封装可复用的通信逻辑（Vue 3 Composition API）
推荐抽离为自定义 Hook，例如 useCrossAppCommunication：
- 接收
targetWindow（如 iframe.contentWindow 或 window.opener）和allowedOrigin - 内部维护
Map<string function></string>存储按 type 注册的处理器 - 暴露
send(type, data)方法，自动包装并发送 - 在 setup 中注册全局 message 监听，并自动绑定/解绑生命周期
补充安全增强项
仅靠 origin 校验还不够，生产环境建议叠加：
- HTTPS 强制要求：所有参与通信的页面必须通过 HTTPS 加载，防止中间人篡改消息
-
敏感数据加密传输：对
data字段做 AES 加密（如用 CryptoJS），密钥由后端动态下发，避免前端硬编码 - 添加时间戳与签名字段（可选）：用于防重放攻击，尤其在支付、登录等关键流程中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
