关于iframe跨域使用postMessage

当咱们要在域名A.com下使用一个域名B.com提供的页面服务，直觉想到的实现方式就是使用iframe。可是iframe直接的交互存在**跨域问题**，目前看来解决方式有两种。一是使用nginx代理转发，在域名A的nginx上配置指定的转发规则，直接指向域名B，直接干掉了跨域；另外一种方式是使用postMessage方法。此处针对第二种方式，看下使用方式和可能的问题。

postMessage是什么

此处引用MDN关于postMessage的详细说明。简而言之就是：postMessage是挂载在window下的一个方法，用于不一样域名下的两个页面的信息交互，父子页面经过postMessage（）发送消息，再经过监听message事件接收信息。

postMessage使用

假设有一个父页面indexPage.html, 子页面iframePage.html

1、父页面向子页面发送消息

// 父页面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通常不填，这个参数有严重的浏览器兼容问题。

2、子页面接收父页面发送的消息

// 子页面iframePage.html

//监听message事件

window.addEventListener("message", function(event){

console.log( '这里是接收到来自父页面的消息，消息内容在event.data属性中', event )

}, false)

3、子页面给父页面传递消息

window.parent.postMessage({name: '张三'}, '\*');

方法的第一个参数是发送的消息，目前可无格式要求， 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)以前， 参数 message 必须是一个字符串；第二个参数是域名限制，当不限制域名时填写’*‘

4、父页面接收子页面的消息

//监听message事件

window.addEventListener("message", function receiveMessageFromIframePage (event) {

console.log('这里是子页面发送来的消息，消息内容在event.data属性中', event)

}, false);

postMessage的安全问题

使用postMessage交互，默认就是容许跨域行为，一旦容许跨域，就会有一些安全问题，针对postMessage主要有两种攻击方式。一是伪造数据发送方（父页面），易形成数据接收方（子页面）受到XSS攻击或其余安全问题；二是伪造数据接收方，相似jsonp劫持。

1、伪造数据发送方

攻击方式：伪造一个父页面，引导使用者触发功能，发送消息给子页面，若是子页面将父页面发送的消息直接插入当前文档流，就是引起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)

2、伪造数据接收方

攻击方式：伪造一个子页面，在父页面中引入子页面，在伪造的页面中接收父页面发送的消息，此时能够获取用户的敏感消息。

防范方式：父页面对发送消息的页面作域名限制

// 父页面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...