postMessage處理iframe 跨域問題

cooxer 發布于2019-08-19 17:42 / 1485人閱讀

摘要：四傳遞信息給父頁面參考跨域子頁面傳給父頁面父頁面代碼崔渙測試父頁面參數中有屬性，就是父窗口發送過來的數據把父窗口發送過來的數據顯示在子窗口中。五簡單分析和安全問題傳送過來的信息如下圖，幾乎包含了所有應該有的信息。

背景：由于同源策略存在，javascript的跨域一直都是一個棘手的問題。父頁面無法直接獲取iframe內部的跨域資源；同時，iframe內部的跨域資源也無法將信息直接傳遞給父頁面。

一：傳統的解決方式。

傳統的iframe資源解決方式：主要通過通過中間頁面代理，此處不再贅述，參考中間頁獲取跨域iframe

二：html5 postMessage的產生

隨著HTML5的發展，html5工作組提供了兩個重要的接口：postMessage(send) 和 onmessage。這兩個接口有點類似于websocket，可以實現兩個跨域站點頁面之間的數據傳遞。

postMessage API

下面是實踐過程中兩個小栗子：分別父頁面傳遞信息給iframe，iframe傳遞信息給父頁面。

三：iframe獲取父頁面信息

話不多說，直接上碼：
參考demo：父頁面傳給子頁面demo

父頁面代碼



    
    崔渙 iframe postmessage 父頁面

子頁面代碼

 
  
  
 崔渙測試子頁面信息 
  
  
  
     this is the 8003 port for cuixiaozhuai

demo 效果如下圖：兩個跨域頁面之間，父頁面給子頁面傳遞數據。

四：iframe傳遞信息給父頁面

參考demo：跨域子頁面傳給父頁面demo

父頁面代碼


 
 
 崔渙測試父頁面
 
 
 
     
     

     this is the 1015 port for cuixiaozhuai。

子頁面代碼



    
    崔小渙iframe postmessage 測試頁面
    




this is the  port for cuixiaozhuai

demo 效果如下圖：兩個跨域頁面之間，子頁面傳遞數據給父頁面傳遞數據。

五：postmessage簡單分析和安全問題

postmessage 傳送過來的信息如下圖，

幾乎包含了所有應該有的信息。甚至data中可以包含object，出于安全考慮可以域的校驗，數據規則的校驗安全校驗，如下代碼

 window.addEventListener("message", function (event) {
        
        //校驗函數是否合法
        var checkMessage = function () {
            // 只獲取需要的域，并非所有都可以跨域
            if (event.origin != "need domain") {
                return false;
            }

            
            var message = event.data;
            // 傳輸數據類型校驗
            if (typeof(message) !== "object") {
                return false;
            }

            // message 的rule中包含xxx則為xxx需要字段。
            return message.rule === "xxx";
        };

        if (checkMessage()) {
            // 通過校驗進行相關操作
            addDetailFunc(event);
        }
    });

【轉載請注明：postMessage處理iframe 跨域問題 | 靠譜崔小拽】

GPU云服務器云服務器 iframe跨域 iframe載入數據問題跨域問題 cdn跨域問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78770.html

關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

ZoomQuiet 2019-08-23 16:25 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

livem 2019-08-02 16:09 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

Vicky 2019-08-30 15:43 評論0 收藏0