Html5 postMessage實現跨域消息傳遞

1、同源策略

    要理解跨域，咱們首先要知道什麼是同源策略。百度百科上這樣定義同源策略：同源策略（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>、<iframe>等標籤均可以加載跨域資源，不受同源策略限制，可是經過src加載的資源，瀏覽器限制了javascript的權限，不能進行各類的讀寫。從而，即便請求發了，敏感數據回來了，也是取不到的。

2、postMessage實現跨域

   語法：window.postMessage(msg,targetOrigin)

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

    message：要發送的消息，html5規範中提到該參數能夠是JavaScript的任意基本類型或可複製的對象，然而並非全部瀏覽器都作到了這點兒，部分瀏覽器只能處理字符串參數，因此咱們在傳遞參數的時候須要使用JSON.stringify()方法對對象參數序列化，在低版本IE中引用json2.js能夠實現相似效果

    targetOrigin：「目標域「，包括：協議、主機名、端口號。若指定爲」*「，則表示能夠傳遞給任意窗口，指定爲」/「，則表示和當前窗口的同源窗口。

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

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

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

    e的幾個重要屬性：

      一、data：postMessage傳遞過來的msg

      二、發送消息的窗口對象

      三、origin：發送消息窗口的源（協議+主機+端口號）

     來寫一個簡單的demo:

     http://source.com/source.html用來發送數據：

1 <iframe id="iframe" src="http://target.com/target.html"></iframe>
2 <input id="msg" type="text" placeholder="請輸入要發送的消息">
3 <button id="send">發送</button>

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用來接收數據：  

1 <div>
2     <h2>target.html,如下是接收到的消息：</h2>
3     <section id="msg">
4         
5     </section>
6 </div>

 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 }

    運行結果以下：

 

   點擊發送按鈕的時候，target.html將會受到發送的消息。