怎么實現iframe跨域效果

本篇內容主要講解“怎么實現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');

}

到此，相信大家對“怎么實現iframe跨域效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！