有关iframe跨域应用postMessage的完成

当大家要在网站域名A.com下应用1个网站域名B.com出示的网页页面服务，判断力想起的完成方法便是应用iframe。可是iframe立即的互动存在**跨域难题**，现阶段来看处理方法有两种。1是应用nginx代理商转发，在网站域名A的nginx上配备特定的转发标准，立即指向网站域名B，立即干掉了跨域；另外一种方法是应用postMessage方式。此处对于第2种方法，看下应用方法和将会的难题。

postMessage是甚么

此处引入MDN有关postMessage的详尽表明。简而言之便是：postMessage是挂载在window下的1个方式，用于不一样网站域名下的两个网页页面的信息内容互动，父子网页页面根据postMessage（）推送信息，再根据监视message恶性事件接受信息内容。

postMessage应用

假定有1个父网页页面indexPage.html, 子网页页面iframePage.html

1、父网页页面向子网页页面推送信息

// 父网页页面index.html

//获得iframe元素

iFrame = document.getElementById('iframe')

//iframe载入结束后再推送信息，不然子网页页面接受不到message

iFrame.onload = function(){

//iframe载入完马上推送1条信息

iFrame.contentWindow.postMessage({msg: 'MessageFromIndexPage'},'\*');

}

iFrame.contentWindow.postMessage('MessageFromIndexPage','b.com')

方式的第1个主要参数是推送的信息，无文件格式规定；第2个主要参数是网站域名限定，当不限定网站域名时填写* ，第3个可选主要参数transfer1般不填，这个主要参数有比较严重的访问器适配难题。

2、子网页页面接受父网页页面推送的信息

// 子网页页面iframePage.html

//监视message恶性事件

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

console.log( '这里是接受来临自父网页页面的信息，信息內容在event.data特性中', event )

}, false)

3、子网页页面给父网页页面传送信息

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

方式的第1个主要参数是推送的信息，现阶段可无文件格式规定， 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)以前， 主要参数 message 务必是1个标识符串；第2个主要参数是网站域名限定，当不限定网站域名时填写’*‘

4、父网页页面接受子网页页面的信息

//监视message恶性事件

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

console.log('这里是子网页页面推送来的信息，信息內容在event.data特性中', event)

}, false);

postMessage的安全性难题

应用postMessage互动，默认设置便是容许跨域个人行为，1旦容许跨域，就会有1些安全性难题，对于postMessage关键有两种进攻方法。1是仿冒数据信息推送方（父网页页面），易导致数据信息接受方（子网页页面）遭受XSS进攻或别的安全性难题；2是仿冒数据信息接受方，相近jsonp被劫持。

1、仿冒数据信息推送方

进攻方法：仿冒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、仿冒数据信息接受方

进攻方法：仿冒1个子网页页面，在父网页页面中引进子网页页面，在仿冒的网页页面中接受父网页页面推送的信息，此时能够获得客户的比较敏感信息。

预防方法：父网页页面对推送信息的网页页面做网站域名限定

// 父网页页面index.html

//获得iframe元素

iFrame = document.getElementById('iframe')

//iframe载入结束后再推送信息，不然子网页页面接受不到message

iFrame.onload = function(){

//iframe载入完马上推送1条信息

iFrame.contentWindow.postMessage('MessageFromIndexPage','https://B.com');

}

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。