Html5中怎么利用postMessage實現(xiàn)跨域消息傳遞

Html5中怎么利用postMessage實現(xiàn)跨域消息傳遞，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

一、同源策略

    要理解跨域，我們首先要知道什么是同源策略。百度百科上這樣定義同源策略：同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。

    何謂同源：如果兩個URL的域名、協(xié)議、端口相同，則表示他們同源。

    瀏覽器的同源策略，限制了來自不同源的"document"或腳本，對當(dāng)前"document"讀取或設(shè)置某些屬性。 （白帽子講web安全[1]）。根據(jù)這個策略，a.com域名下的JavaScript無法跨域操作b.com域名下的對象。比如，baidu.com域名下的頁面中包含的JavaScript代碼，不能訪問google.com域名下的頁面內(nèi)容。

    JavaScript必須嚴(yán)格遵循瀏覽器的同源策略，包括Ajax（事實上，Ajax也是由JavaScript組成）。通過XMLHttpRequest對象實現(xiàn)的Ajax請求，不能向不同的域提交，比如，在abc.test.com下的頁面，不能向def.test.com提交Ajax請求。運(yùn)用了同源策略之后，用戶就能確保自己正在查看的頁面確實來自于正在瀏覽的域。

    同源策略在現(xiàn)實應(yīng)用中是十分重要的。假設(shè)攻擊者利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)用戶使用真實的用戶名、密碼登錄時，該頁面就可以通過JavaScript讀取到用戶表單中的內(nèi)容，這樣用戶名和密碼信息就被泄漏了。

    在瀏覽器中，<script>、<link>、<img>、<iframe>等標(biāo)簽都可以加載跨域資源，不受同源策略限制，但是通過src加載的資源，瀏覽器限制了javascript的權(quán)限，不能進(jìn)行各種的讀寫。從而，即使請求發(fā)了，敏感數(shù)據(jù)回來了，也是取不到的。

二、postMessage實現(xiàn)跨域

   語法：window.postMessage(msg,targetOrigin)

    window: 指目標(biāo)窗口，可能是window.frames屬性的成員或者由window.open方法創(chuàng)建的窗口

    message：要發(fā)送的消息，html5規(guī)范中提到該參數(shù)可以是JavaScript的任意基本類型或可復(fù)制的對象，然而并不是所有瀏覽器都做到了這點(diǎn)兒，部分瀏覽器只能處理字符串參數(shù)，所以我們在傳遞參數(shù)的時候需要使用JSON.stringify()方法對對象參數(shù)序列化，在低版本IE中引用json2.js可以實現(xiàn)類似效果

    targetOrigin：“目標(biāo)域“，包括：協(xié)議、主機(jī)名、端口號。若指定為”*“，則表示可以傳遞給任意窗口，指定為”/“，則表示和當(dāng)前窗口的同源窗口。

    獲取postMessage傳來的消息：為頁面添加onmessage事件

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. window.addEventListener('message',function(e) {   

2.        

3. }  

    onmessage事件接受一個參數(shù)e,它是一個event對象。

    e的幾個重要屬性：

      1、data：postMessage傳遞過來的msg

      2、發(fā)送消息的窗口對象

      3、origin：發(fā)送消息窗口的源（協(xié)議+主機(jī)+端口號）

     來寫一個簡單的demo:

     http://source.com/source.html用來發(fā)送數(shù)據(jù)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <iframe id="iframe" src="http://target.com/target.html"></iframe>  

2. <input id="msg" type="text" placeholder="請輸入要發(fā)送的消息">  

3. <button id="send">發(fā)送</button>  

4.   

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. window.onload =function() {   

2.     document.getElementById('send').onclick = function() {   

3.     var msg = document.getElementById('msg').value;   

4.     var iframeWindow = document.getElementById('iframe').contentWindow;   

5.     iframeWindow.postMessage(msg,"http://target.com/target.html");   

6.     }   

7. }   

     http://target.com/target.html用來接收數(shù)據(jù)： 

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <div>  

2.    <h3>target.html,以下是接收到的消息：</h3>  

3.     <section id="msg">  

4.            

5.     </section>  

6. </div>  

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. window.onload = function() {   

2.   

3.     if(window.addEventListener){   

4.         window.addEventListener("message", handleMessage, false);   

5.     }   

6.     else{   

7.         window.attachEvent("onmessage", handleMessage);   

8.     }     

9.   

10.     function handleMessage(event) {   

11.         event = event || window.event;   

12.   

13.         if(event.origin === 'http://source.com') {   

14.             document.getElementById('msg').innerHTML = event.data;   

15.         }   

16.     }   

17. }   

18.   

看完上述內(nèi)容，你們掌握Html5中怎么利用postMessage實現(xiàn)跨域消息傳遞的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！