国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > HTML5 > 正文

關于iframe跨域使用postMessage的實現

2024-09-05 07:23:05
字體:
來源:轉載
供稿:網友

當我們要在域名A.com下使用一個域名B.com提供的頁面服務,直覺想到的實現方式就是使用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加載完畢后再發送消息,否則子頁面接收不到messageiFrame.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.originif(origin == 'https://A.com'){console.log( '這里是接收到來自父頁面的消息,消息內容在event.data屬性中', event )}}, false)

二、偽造數據接收方

攻擊方式:偽造一個子頁面,在父頁面中引入子頁面,在偽造的頁面中接收父頁面發送的消息,此時可以獲取用戶的敏感消息。

防范方式:父頁面對發送消息的頁面做域名限制

// 父頁面index.html//獲取iframe元素iFrame = document.getElementById('iframe')//iframe加載完畢后再發送消息,否則子頁面接收不到messageiFrame.onload = function(){//iframe加載完立即發送一條消息iFrame.contentWindow.postMessage('MessageFromIndexPage','https://B.com');}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 方正县| 米脂县| 阿巴嘎旗| 西畴县| 托克托县| 棋牌| 阜新市| 武冈市| 三亚市| 乌苏市| 镇宁| 阳江市| 雷波县| 贵定县| 民权县| 岱山县| 邯郸市| 自治县| 盖州市| 武夷山市| 石景山区| 普安县| 静海县| 德令哈市| 柘荣县| 上饶市| 松阳县| 勃利县| 天镇县| 都匀市| 桐乡市| 汽车| 天气| 嘉兴市| 镇巴县| 靖宇县| 开封县| 黑龙江省| 墨脱县| 墨江| 通渭县|