Html5 postMessage實作跨網域訊息傳遞_html5教學技巧

一、同種策略

    要理解跨域，我們首先要知道什麼是同源策略。百度百科上這樣定義同源策略：同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是建構在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實作。

    何謂同源：如果兩個URL的網域名稱、協定、連接埠相同，則表示他們同源。

    瀏覽器的同源策略，限制了來自不同來源的"document"或腳本，對目前"document"讀取或設定某些屬性。 （白帽子講web安全[1]）。根據這個策略，a.com網域下的JavaScript無法跨網域操作b.com網域下的物件。例如，baidu.com網域下的頁面中包含的JavaScript程式碼，不能存取google.com網域下的頁面內容。

    JavaScript必須嚴格遵循瀏覽器的同源策略，包括Ajax（事實上，Ajax也是由JavaScript組成）。透過XMLHttpRequest物件實現的Ajax請求，不能向不同的網域提交，例如，在abc.test.com下的頁面，不能向def.test.com提交Ajax請求。運用了同源策略之後，使用者就能確保自己正在查看的頁面確實來自於正在瀏覽的網域。

    同源策略在現實應用上是十分重要的。假設攻擊者利用Iframe把真正的銀行登入頁面嵌入他的頁面上，當使用者使用真實的使用者名稱、密碼登入時，該頁面就可以透過JavaScript讀取到使用者表單中的內容，這樣使用者名稱和密碼訊息就被洩漏了。

    在瀏覽器中，<script>、<link>、<img alt="Html5 postMessage實作跨網域訊息傳遞_html5教學技巧" >、<iframe>等標籤都可以載入跨域資源，不受同源策略限制，但是透過src載入的資源，瀏覽器限制了javascript的權限，不能進行各種的讀寫。從而，即使請求發了，敏感資料回來了，也是取不到的。 </script>

二、postMessage實作跨域

   語法：window.postMessage(msg,targetOrigin)

    window: 指目標窗口，可能是window.frames屬性的成員或是由window.open方法建立的視窗

    message：要傳送的訊息，html5規格中提到該參數可以是JavaScript的任意基本類型或可複製的對象，然而並不是所有瀏覽器都做到了這點兒，部分瀏覽器只能處理字符字串參數，所以我們在傳遞參數的時候需要使用JSON.stringify()方法對物件參數序列化，在低版本IE中引用json2.js可以實現類似效果

    targetOrigin：「目標域“，包括：協定、主機名稱、連接埠號碼。若指定為”*“，則表示可以傳遞給任意窗口，指定為”/“，則表示和當前窗口的同源窗口。

    取得postMessage傳來的訊息：為頁面新增onmessage事件

XML/HTML Code複製內容到剪貼簿

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

    onmessage事件接受一個參數e,它是一個event物件。

    e的幾個重要屬性：

      1、data：postMessage傳遞過來的msg

      2、傳送訊息的視窗物件

      3、origin：傳送訊息視窗的來源（協定 主機 連接埠號碼）

     寫一個簡單的demo:

     http://source.com/source.html用來傳送資料：

XML/HTML Code複製內容到剪貼簿

1. iframe id=id 🎜> src="http://target.com/target.html"> iframe>  
2. input id="msg" type="text" placehold. >"請輸入要傳送的訊息">  
3. button id=id=id=id=id>寄
4. button
>

 

>

 >

 

  
1. JavaScript Code
複製內容到剪貼簿
2. window.onload =function() {   
3.     document.getElementById('send').onclick =      
4. var msg = document.getElementById('msg'     var iframeWindow = document.getElementById(
5. 'iframe'

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

6. );   
7.     }   

}   

    

http://target.com/target.html

用來接收資料： 

XML/HTML Code

複製內容到剪貼簿
1. div>
2.       h2>target.html,以下是收到的訊息：h2
>
3.        section id id
 
4. id
 
5. id id>  
6.                 section>

 

div>

   JavaScript Code複製內容到剪貼簿

1. window.onload = 関数() {
3. if(window.addEventListener){
4. window.addEventListener("メッセージ", handleMessage, false);   
5. }
6. else{
7. window.attachEvent("onmessage", handleMessage);   
8. }
10. function handleMessage(event) {
11. イベント = イベント || ウィンドウ.イベント;   
13. if(event.origin === 'http://source.com') {
14. document.getElementById('msg').innerHTML = event.data;   
15. }
16. }
17. }

运行结果如下：

ポイントが送信されると、target.html は送信されたメッセージを受信する予定です。

以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。

翻訳：

http://www.cnblogs.com/MarcoHan/p/5245519.html