共计 2128 个字符，预计需要花费 6 分钟才能阅读完成。
当我们要在域名 A.com 下使用一个域名 B.com 提供的页面服务，直觉想到的实现方式就是使用 iframe。但是 iframe 直接的交互存在 ** 跨域问题 **，目前看来解决方式有两种。一是使用 nginx 代理转发，在域名 A 的 nginx 上配置指定的转发规则，直接指向域名 B，直接干掉了跨域；另一种方式是使用 postMessage 方法。此处针对第二种方式，看下使用方式和可能的问题。
postMessage 是什么
此处引用 MDN 关于 postMessage 的详细说明。简而言之就是：postMessage 是挂载在 window 下的一个方法，用于不同域名下的两个页面的信息交互，父子页面通过 postMessage（）发送消息，再通过监听 message 事件接收信息。
postMessage 使用
假设有一个父页面 indexPage.html, 子页面 iframePage.html
一、父页面向子页面发送消息
// 父页面 index.html
// 获取 iframe 元素
iFrame = document.getElementById('iframe')
//iframe 加载完毕后再发送消息，否则子页面接收不到 message
iFrame.onload = function(){
//iframe 加载完立即发送一条消息
iFrame.contentWindow.postMessage({msg: 'MessageFromIndexPage'},'\*');
}
iFrame.contentWindow.postMessage(‘MessageFromIndexPage’,’b.com’)
方法的第一个参数是发送的消息，无格式要求；第二个参数是域名限制，当不限制域名时填写 *，第三个可选参数 transfer 一般不填，这个参数有严重的浏览器兼容问题。
二、子页面接收父页面发送的消息
// 子页面 iframePage.html
// 监听 message 事件
window.addEventListener("message", function(event){console.log( '这里是接收到来自父页面的消息，消息内容在 event.data 属性中', event)
}, false)
三、子页面给父页面传递消息
window.parent.postMessage({name: '张三'}, '\*');
方法的第一个参数是发送的消息，目前可无格式要求，在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 之前，参数 message 必须是一个字符串；第二个参数是域名限制，当不限制域名时填写’*‘
四、父页面接收子页面的消息
// 监听 message 事件
window.addEventListener("message", function receiveMessageFromIframePage (event) {console.log('这里是子页面发送来的消息，消息内容在 event.data 属性中', event)
}, false);
postMessage 的安全问题
使用 postMessage 交互，默认就是允许跨域行为，一旦允许跨域，就会有一些安全问题，针对 postMessage 主要有两种攻击方式。一是伪造数据发送方（父页面），易造成数据接收方（子页面）受到 XSS 攻击或其他安全问题；二是伪造数据接收方，类似 jsonp 劫持。
一、伪造数据发送方
攻击方式 ：伪造一个父页面，引导使用者触发功能，发送消息给子页面，如果子页面将父页面发送的消息直接插入当前文档流，就是引发 XSS 攻击，或者子页面使用父页面传递的消息进行其他操作，例如写入数据，造成安全问题。
防范方式 ：子页面 iframe 对接收到的 message 信息做域名限制
// 子页面 iframePage.html
// 监听 message 事件
window.addEventListener("message", function(event){
origin = event.origin || event.originalEvent.origin
if(origin == 'https://A.com'){console.log( '这里是接收到来自父页面的消息，消息内容在 event.data 属性中', event)
}
}, false)
二、伪造数据接收方
攻击方式 ：伪造一个子页面，在父页面中引入子页面，在伪造的页面中接收父页面发送的消息，此时可以获取用户的敏感消息。
防范方式 ：父页面对发送消息的页面做域名限制
// 父页面 index.html
// 获取 iframe 元素
iFrame = document.getElementById('iframe')
//iframe 加载完毕后再发送消息，否则子页面接收不到 message
iFrame.onload = function(){
//iframe 加载完立即发送一条消息
iFrame.contentWindow.postMessage('MessageFromIndexPage','https://B.com');
}
参考：
https://juejin.im/post/590c39…
https://p0sec.net/index.php/a…
