HTML5 之跨域通訊（postMessage）

很多情況下，我們受到瀏覽器的安全策略限制。如何能規避此限制，並且能安全的使用跨域通訊，這就不得不介紹一下 postmessage 了。

一、關於 postmessage

window.postmessage() 方法可以安全地實現跨源通訊。

通常，對於兩個不同頁面的指令碼，只有當執行它們的頁面位於具有相同的協議（通常為https），埠號（443為https的預設值），以及主機 (兩個頁面的模數document.domain設定為相同的值) 時，這兩個指令碼才能相互通訊。

window.postmessage()方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。

二、理解過程

window.postmessage()方法被呼叫時，會在所有頁面指令碼執行完畢之後向目標視窗派發乙個messageevent訊息。 該messageevent訊息有四個屬性：

1.message屬性表示該message的型別；

2.data屬性為window.postmessage的第乙個引數；

3.origin屬性表示呼叫window.postmessage()方法時呼叫頁面的當前狀態；

4.source屬性記錄呼叫window.postmessage()方法的視窗資訊。

關於更多細節，我們可以檢視mdn 文件，這裡就不贅述了。

三、相容性

通過上面的，我們可以看出來，幾乎所有的瀏覽器都支援了postmessage，所以放心大膽的去使用吧。

四、用法簡介

基本用例：

1

otherwindow.postmessage(message, targetorigin, [transfer]);

2.message

將要傳送到其他window的資料。它將會被結構化轉殖演算法序列化。

這意味著我們可以不受什麼限制的將資料物件安全的傳送給目標視窗而無需自己序列化。

3.targetorigin

通過視窗的origin屬性來指定哪些視窗能接收到訊息事件，其值可以是字串 「*」（表示無限制）或者乙個uri。

在傳送訊息的時候，如果目標視窗的協議、主機位址或埠這三者的任意一項不匹配targetorigin提供的值，那麼訊息就不會被傳送；

只有三者完全匹配，訊息才會被傳送。這個機制用來控制訊息可以傳送到哪些視窗。

我們舉個例子，當用postmessage傳送密碼時，這個引數就顯得尤為重要，必須保證它的值與這條包含密碼的資訊的預期接受者的origin屬性完全一致，來防止密碼被惡意的第三方截獲。

如果你明確的知道訊息應該傳送到哪個視窗，那麼請始終提供乙個有確切值的targetorigin，而不是*。

需要注意：不提供確切的目標將導致資料洩露到惡意站點。

4.transfer

是一串和message同時傳遞的transferable物件. 這些物件的所有權將被轉移給訊息的接收方，而傳送一方將不再保有所有權。

五、事件監聽

我們來看下面這段**：

123

4567
891011
12

window.addeventlistener("message", receivemessage, false);

function
receivemessage(event)

2.origin

呼叫postmessage時訊息傳送方視窗的origin. 這個字串由 協議、://、網域名稱、: 埠號拼接而成。

例如(隱含埠 443)、隱含埠 80)、。請注意，這個origin不能保證是該視窗的當前或未來origin，因為postmessage被呼叫後可能被導航到不同的位置。

3.source

對傳送訊息的視窗物件的引用， 我們可以使用此來在具有不同origin的兩個視窗之間建立雙向通訊。

六、簡單應用

1.監聽message事件：

123456

window.addeventlistener("message", receivemessage, false);

function
receivemessage(event)

123

45

window.postmessage(, '*');

Html5 跨域通訊

h5 跨域通訊 在主頁面中通過iframe嵌入外部頁面，通過iframe的window物件postmessage方法向iframe頁面傳遞訊息。1 2 313 14 15 16 17 18 iframe頁面中通過對視窗物件的message事件進行監聽，以獲取訊息。1 2 312 13 iframe ...

html5跨域方法

從html5開始，可以通過在響應頭里增加access control allow origin，實現跨域請求 node的 當然，生產環境裡不能把allow origin設定成 而應該設定成允許跨域訪問的源站的網域名稱。allow headers是允許跨域請求攜帶的http request heade...

HTML5解決跨域問題

html5解決跨域問題 由於瀏覽器的同源策略，網路連線的跨域訪問是不被允許的，xhr物件不能直接與非同源的 處理資料互動。而同源指的是什麼呢？同源的範疇包括 規則 協議 主機號 網域名稱 ip等 埠號。但是隨著開放，共享平台的流行，跨域訪問的需求愈加強烈。目前最常用的跨域方案是動態加入script標...