使用postMessage怎么實(shí)現(xiàn)iframe跨域

今天就跟大家聊聊有關(guān)使用postMessage怎么實(shí)現(xiàn)iframe跨域，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

postMessage是什么

此處引用MDN關(guān)于postMessage的詳細(xì)說(shuō)明。簡(jiǎn)而言之就是：postMessage是掛載在window下的一個(gè)方法，用于不同域名下的兩個(gè)頁(yè)面的信息交互，父子頁(yè)面通過(guò)postMessage（）發(fā)送消息，再通過(guò)監(jiān)聽message事件接收信息。

postMessage使用

假設(shè)有一個(gè)父頁(yè)面indexPage.html, 子頁(yè)面iframePage.html

一、父頁(yè)面向子頁(yè)面發(fā)送消息

// 父頁(yè)面index.html

//獲取iframe元素

iFrame = document.getElementById('iframe')

//iframe加載完畢后再發(fā)送消息，否則子頁(yè)面接收不到message

iFrame.onload = function(){

//iframe加載完立即發(fā)送一條消息

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

}

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

方法的第一個(gè)參數(shù)是發(fā)送的消息，無(wú)格式要求；第二個(gè)參數(shù)是域名限制，當(dāng)不限制域名時(shí)填寫* ，第三個(gè)可選參數(shù)transfer一般不填，這個(gè)參數(shù)有嚴(yán)重的瀏覽器兼容問(wèn)題。

二、子頁(yè)面接收父頁(yè)面發(fā)送的消息

// 子頁(yè)面iframePage.html

//監(jiān)聽message事件

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

console.log( '這里是接收到來(lái)自父頁(yè)面的消息，消息內(nèi)容在event.data屬性中', event )

}, false)

三、子頁(yè)面給父頁(yè)面?zhèn)鬟f消息

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

方法的第一個(gè)參數(shù)是發(fā)送的消息，目前可無(wú)格式要求， 在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前， 參數(shù) message 必須是一個(gè)字符串；第二個(gè)參數(shù)是域名限制，當(dāng)不限制域名時(shí)填寫’*‘

四、父頁(yè)面接收子頁(yè)面的消息

//監(jiān)聽message事件

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

console.log('這里是子頁(yè)面發(fā)送來(lái)的消息，消息內(nèi)容在event.data屬性中', event)

}, false);

postMessage的安全問(wèn)題

使用postMessage交互，默認(rèn)就是允許跨域行為，一旦允許跨域，就會(huì)有一些安全問(wèn)題，針對(duì)postMessage主要有兩種攻擊方式。一是偽造數(shù)據(jù)發(fā)送方（父頁(yè)面），易造成數(shù)據(jù)接收方（子頁(yè)面）受到XSS攻擊或其他安全問(wèn)題；二是偽造數(shù)據(jù)接收方，類似jsonp劫持。

一、偽造數(shù)據(jù)發(fā)送方

攻擊方式：偽造一個(gè)父頁(yè)面，引導(dǎo)使用者觸發(fā)功能，發(fā)送消息給子頁(yè)面，如果子頁(yè)面將父頁(yè)面發(fā)送的消息直接插入當(dāng)前文檔流，就是引發(fā)XSS攻擊，或者子頁(yè)面使用父頁(yè)面?zhèn)鬟f的消息進(jìn)行其他操作，例如寫入數(shù)據(jù)，造成安全問(wèn)題。

防范方式：子頁(yè)面iframe對(duì)接收到的message信息做域名限制

// 子頁(yè)面iframePage.html

//監(jiān)聽message事件

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

origin = event.origin || event.originalEvent.origin

if(origin == 'https://A.com'){

console.log( '這里是接收到來(lái)自父頁(yè)面的消息，消息內(nèi)容在event.data屬性中', event )

}

}, false)

二、偽造數(shù)據(jù)接收方

攻擊方式：偽造一個(gè)子頁(yè)面，在父頁(yè)面中引入子頁(yè)面，在偽造的頁(yè)面中接收父頁(yè)面發(fā)送的消息，此時(shí)可以獲取用戶的敏感消息。

防范方式：父頁(yè)面對(duì)發(fā)送消息的頁(yè)面做域名限制

// 父頁(yè)面index.html

//獲取iframe元素

iFrame = document.getElementById('iframe')

//iframe加載完畢后再發(fā)送消息，否則子頁(yè)面接收不到message

iFrame.onload = function(){

//iframe加載完立即發(fā)送一條消息

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

}

看完上述內(nèi)容，你們對(duì)使用postMessage怎么實(shí)現(xiàn)iframe跨域有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。