有关iframe跨域应用postMessage的完成

日期:2021-02-22 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

当大家要在网站域名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');

}

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