使用postMessage怎么实现iframe跨域 - 行业资讯 - 肥雀云

　　介绍

今天就跟大家聊聊有关使用postMessage怎么实现iframe跨域,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> postMessage是什么

此处引用MDN关于postMessage的详细说明。简而言之就是:postMessage是挂载在窗下的一个方法,用于不同域名下的两个页面的信息交互,父子页面通过postMessage()发送消息,再通过监听消息事件接收信息。

<强> postMessage使用

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

<强>一、父页面向子页面发送消息

//,父页面index . html//获取iframe元素　　　　时间=iFrame . getelementbyid (& # 39; iframe # 39;)//iframe加载完毕后再发送消息,否则子页面接收不到消息　　　　时间=iFrame.onload 函数(){//iframe加载完立即发送一条消息　　　　iFrame.contentWindow.postMessage({味精:& # 39;MessageFromIndexPage& # 39;}, & # 39; \ * & # 39;); 　　　　}

iFrame.contentWindow.postMessage (& # 39; MessageFromIndexPage& # 39; & # 39; b.com& # 39;)

方法的第一个参数是发送的消息,无格式要求;第二个参数是域名限制,当不限制域名时填写*,第三个可选参数转移一般不填,这个参数有严重的浏览器兼容问题。

<强>二、子页面接收父页面发送的消息

//,子页面iframePage.html//监听消息事件　　　　window.addEventListener (“message",,函数(事件){ 　　　　console.log(, & # 39;这里是接收到来自父页面的消息,消息内容在event.data属性中& # 39;,,event ) 　　　　},,假)

<强>三、子页面给父页面传递消息

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

方法的第一个参数是发送的消息,目前可无格式要求,在壁虎6.0 (Firefox 6.0/雷鸟6.0/SeaMonkey 2.3)之前,参数消息必须是一个字符串;第二个参数是域名限制,当不限制域名时填写,,*,而

<强>四,父页面接收子页面的消息

//监听消息事件　　　　window.addEventListener (“message", function receiveMessageFromIframePage (事件),{ 　　　　console.log(& # 39;这里是子页面发送来的消息,消息内容在event.data属性中& # 39;,,事件) 　　　　},,假);

<强> postMessage的安全问题

使用postMessage交互,默认就是允许跨域行为,一旦允许跨域,就会有一些安全问题,针对postMessage主要有两种攻击方式。一是伪造数据发送方(父页面),易造成数据接收方(子页面)受到XSS攻击或其他安全问题;二是伪造数据接收方,类似jsonp劫持。

一、伪造数据发送方

攻击方式:伪造一个父页面,引导使用者触发功能,发送消息给子页面,如果子页面将父页面发送的消息直接插入当前文档流,就是引发XSS攻击,或者子页面使用父页面传递的消息进行其他操作,例如写入数据,造成安全问题。

防范方式:子页面iframe对接收到的消息信息做域名限制

//,子页面iframePage.html//监听消息事件　　　　window.addEventListener (“message",,函数(事件){ 　　　　时间=origin event.origin | |, event.originalEvent.origin 　　　　如果(origin ==, & # 39; https://A.com& # 39;) { 　　　　console.log(, & # 39;这里是接收到来自父页面的消息,消息内容在event.data属性中& # 39;,,event ) 　　　　} 　　　　},,假)

二、伪造数据接收方

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

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

//,父页面index . html//获取iframe元素　　　　时间=iFrame . getelementbyid (& # 39; iframe # 39;)//iframe加载完毕后再发送消息,否则子页面接收不到消息　　　　时间=iFrame.onload 函数(){//iframe加载完立即发送一条消息　　　　iFrame.contentWindow.postMessage (& # 39; MessageFromIndexPage& # 39;, & # 39; https://B.com& # 39;); 　　　　}

看完上述内容,你们对使用postMessage怎么实现iframe跨域有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。