欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于iframe跨域使用postMessage的实现

程序员文章站 2022-03-19 10:13:45
这篇文章主要介绍了关于iframe跨域使用postMessage的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 19-10-29...

当我们要在域名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');

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。