postMessage 安全实践指南<\/h1>

1. postMessage 基础概念<\/h2>

1.1 什么是 postMessage<\/h3>
postMessage 是一种跨源通信方法，它不受"同源策略"限制，允许不同源的网页之间进行安全通信。其他常见的跨域通信方法还包括 CORS 和 JSONP。<\/p>

1.2 同源策略<\/h3>
同源策略是重要的安全策略，"同源"指的是协议、域名、端口都相同。非同源的两个资源间默认不能通信。<\/p>

1.3 postMessage 工作原理<\/h3>

postMessage 跨源通信不受"同源策略"限制的前提：<\/p>

发送方需要有接收方 window 的引用<\/li>
发送方调用接收方 window 的 postMessage 方法发送消息<\/li>

接收方的消息监听器收到消息进行后续处理<\/li> <\/ul>

2. postMessage 常见安全问题及修复方案<\/h2>

2.1 未指定接收方 origin<\/h3>

问题描述<\/strong>：<\/p>

发送方直接向 top 发送消息，而不是其直接父级<\/li>
使用通配符 "*" 作为 targetOrigin，允许任何源接收消息<\/li>
消息内容包含敏感信息(URL、调用栈、cookie 等)<\/li> <\/ul>
修复方案<\/strong>：<\/p>

在复杂的嵌套 iframe 结构中明确指定目标源<\/li>
只向直接父窗口发送消息而不是直接向 top 发送消息<\/li>
最小化通过 postMessage 传输的敏感信息<\/li>
始终指定精确的目标 origin，而不是使用通配符 "*"<\/li> <\/ol>
示例代码<\/strong>：<\/p>
\/\/ 安全的消息发送 <\/span><\/span><\/span><\/span>window.postMessage<\/span>("hello"<\/span>, "https:\/\/specific-domain.com"<\/span>); <\/span><\/span> <\/span><\/span>\/\/ 消息接收 <\/span><\/span><\/span><\/span>window.addEventListener<\/span>("message"<\/span>, function<\/span>(event<\/span>) { <\/span><\/span> console<\/span>.log<\/span>("Message received: "<\/span>, event<\/span>.data<\/span>); <\/span><\/span>}); <\/span><\/span><\/code><\/pre>2.2 未验证消息来源<\/h3> 问题描述<\/strong>：<\/p> 接收方未验证消息的 origin，直接处理接收到的数据<\/li> 可能导致任意域发送的消息被执行，造成 XSS 等安全问题<\/li> <\/ul> 攻击示例<\/strong>：<\/p> \/\/ 攻击者从任意域 iframe 发送恶意消息 <\/span><\/span><\/span><\/span>frames<\/span>[0<\/span>].postMessage<\/span>('append::<style onload="eval(alert(\'XSS via postMessage\'))">'<\/span>, "*"<\/span>); <\/span><\/span> <\/span><\/span>\/\/ 不安全的接收处理 <\/span><\/span><\/span><\/span>window.addEventListener<\/span>('message'<\/span>, function<\/span>(event<\/span>) { <\/span><\/span> parseMessage<\/span>(event<\/span>.data<\/span>); \/\/ 直接处理未验证的消息 <\/span><\/span><\/span><\/span>}); <\/span><\/span><\/code><\/pre>修复方案<\/strong>：<\/p> 始终验证 postMessage 的来源<\/li> 对接收到的数据进行严格的验证和清理<\/li> 避免直接执行或插入接收到的数据<\/li> <\/ol> 安全代码示例<\/strong>：<\/p> window.addEventListener<\/span>('message'<\/span>, function<\/span>(event<\/span>) { <\/span><\/span> \/\/ 验证来源 <\/span><\/span><\/span><\/span> if<\/span> (event<\/span>.origin<\/span> !==<\/span> "https:\/\/trusted-domain.com"<\/span>) return<\/span>; <\/span><\/span> <\/span><\/span> \/\/ 安全处理消息 <\/span><\/span><\/span><\/span> \/\/ ... <\/span><\/span><\/span><\/span>}); <\/span><\/span><\/code><\/pre>2.3 消息传输数据结构<\/h3> postMessage 传输的数据通常包含：<\/p> data<\/code>: postMessage 的第一个参数，发送的信息内容<\/li> origin<\/code>: 发送方的源(协议、域名、端口)<\/li> source<\/code>: 发送方 window 的引用(可选内容)<\/li> <\/ul> 3. origin 验证的常见错误及修复<\/h2> 3.1 正则表达式验证问题<\/h3> 错误示例<\/strong>：<\/p> let<\/span> re<\/span> =<\/span> \/imgcache.test.com|user.openqa.test.com|www.dnspod.cn\/<\/span> <\/span><\/span>if<\/span>(re<\/span>.test<\/span>(e<\/span>.origin<\/span>)){} <\/span><\/span><\/code><\/pre>问题分析<\/strong>：<\/p> 缺少起止符(^ 和 $): 允许部分匹配<\/li> 点号 (.) 没有转义: 在正则表达式中，点号匹配任意字符<\/li> <\/ol> 绕过方式<\/strong>：<\/p> arbitrary.imgcache.test.com.subdomain.example.com<\/code> - 利用缺少起止符<\/li> imgcacheatest.com<\/code> - 利用点号没转义<\/li> imgcacheatestacom.example.com<\/code> - 结合上述两个问题<\/li> <\/ol> 修复方案<\/strong>：<\/p> let<\/span> re<\/span> =<\/span> \/^(imgcache\.test\.com|user\.openqa\.test\.com|www\.dnspod\.cn)$\/<\/span> <\/span><\/span>if<\/span>(re<\/span>.test<\/span>(e<\/span>.origin<\/span>)){} <\/span><\/span><\/code><\/pre>3.2 endsWith 匹配问题<\/h3> 错误示例<\/strong>：<\/p> if<\/span>(e<\/span>.origin<\/span>.endsWith<\/span>('test.com'<\/span>)){} <\/span><\/span><\/code><\/pre>问题分析<\/strong>：<\/p> 未考虑到域名边界<\/li> 任何以 'test.com' 结尾的字符串都会被匹配<\/li> <\/ul> 绕过方式<\/strong>：<\/p> arbitrarytest.com<\/code> - 添加任意前缀的域名<\/li> <\/ul> 修复方案<\/strong>：<\/p> if<\/span>(e<\/span>.origin<\/span>.endsWith<\/span>('.test.com'<\/span>) ||<\/span> e<\/span>.origin<\/span> ===<\/span> 'test.com'<\/span>){} <\/span><\/span><\/code><\/pre>4. 最佳实践总结<\/h2> 精确指定目标 origin<\/strong>：<\/p> 避免使用通配符 "*"<\/li> 明确指定接收消息的具体域名<\/li> <\/ul> <\/li> 严格验证消息来源<\/strong>：<\/p> 使用完整的正则表达式验证，包括起止符和转义<\/li> 维护允许的源白名单<\/li> <\/ul> <\/li> 最小化敏感信息传输<\/strong>：<\/p> 避免通过 postMessage 传输 cookie、token 等敏感信息<\/li> 限制消息内容范围<\/li> <\/ul> <\/li> 安全的消息处理<\/strong>：<\/p> 对接收到的数据进行验证和清理<\/li> 避免直接执行或插入未经验证的数据<\/li> <\/ul> <\/li> 防御性编程<\/strong>：<\/p> 考虑所有可能的边界情况<\/li> 实现多层防御机制<\/li> <\/ul> <\/li> <\/ol> 5. 示例代码模板<\/h2> 安全的消息发送<\/h3> \/\/ 明确指定目标 origin <\/span><\/span><\/span><\/span>const<\/span> targetWindow<\/span> =<\/span> document.getElementById<\/span>('iframe'<\/span>).contentWindow<\/span>; <\/span><\/span>const<\/span> targetOrigin<\/span> =<\/span> 'https:\/\/trusted-domain.com'<\/span>; <\/span><\/span>targetWindow<\/span>.postMessage<\/span>({data<\/span>:<\/span> 'secure message'<\/span>}, targetOrigin<\/span>); <\/span><\/span><\/code><\/pre>安全的消息接收<\/h3> window.addEventListener<\/span>('message'<\/span>, function<\/span>(event<\/span>) { <\/span><\/span> \/\/ 验证来源 <\/span><\/span><\/span><\/span> const<\/span> allowedOrigins<\/span> =<\/span> [ <\/span><\/span> 'https:\/\/trusted-domain.com'<\/span>, <\/span><\/span> 'https:\/\/sub.trusted-domain.com'<\/span> <\/span><\/span> ]; <\/span><\/span> <\/span><\/span> if<\/span> (!<\/span>allowedOrigins<\/span>.includes<\/span>(event<\/span>.origin<\/span>)) { <\/span><\/span> return<\/span>; \/\/ 拒绝非信任源的消息 <\/span><\/span><\/span><\/span> } <\/span><\/span> <\/span><\/span> \/\/ 验证消息内容 <\/span><\/span><\/span><\/span> if<\/span> (typeof<\/span> event<\/span>.data<\/span> !==<\/span> 'object'<\/span> ||<\/span> !<\/span>event<\/span>.data<\/span>.hasOwnProperty<\/span>('data'<\/span>)) { <\/span><\/span> return<\/span>; \/\/ 拒绝不符合格式的消息 <\/span><\/span><\/span><\/span> } <\/span><\/span> <\/span><\/span> \/\/ 安全处理消息 <\/span><\/span><\/span><\/span> processMessage<\/span>(event<\/span>.data<\/span>.data<\/span>); <\/span><\/span>}); <\/span><\/span> <\/span><\/span>function<\/span> processMessage<\/span>(data<\/span>) { <\/span><\/span> \/\/ 实现安全的消息处理逻辑 <\/span><\/span><\/span><\/span> \/\/ ... <\/span><\/span><\/span><\/span>} <\/span><\/span><\/code><\/pre>通过遵循这些安全实践，可以充分利用 postMessage 的跨域通信能力，同时有效防范潜在的安全风险。<\/p>

postMessage 安全实践指南<\/h1>

1. postMessage 基础概念<\/h2>

1.1 什么是 postMessage<\/h3> postMessage 是一种跨源通信方法，它不受"同源策略"限制，允许不同源的网页之间进行安全通信。其他常见的跨域通信方法还包括 CORS 和 JSONP。<\/p>

1.2 同源策略<\/h3> 同源策略是重要的安全策略，"同源"指的是协议、域名、端口都相同。非同源的两个资源间默认不能通信。<\/p>

2. postMessage 常见安全问题及修复方案<\/h2>

3. origin 验证的常见错误及修复<\/h2>

5. 示例代码模板<\/h2>

1.1 什么是 postMessage<\/h3>
postMessage 是一种跨源通信方法，它不受"同源策略"限制，允许不同源的网页之间进行安全通信。其他常见的跨域通信方法还包括 CORS 和 JSONP。<\/p>

1.2 同源策略<\/h3>
同源策略是重要的安全策略，"同源"指的是协议、域名、端口都相同。非同源的两个资源间默认不能通信。<\/p>