瀏覽器窗口間跨域通訊的解決方案

時間 2019-11-08

原文原文鏈接

使用場景

在後臺管理系統中，好比常見的OA系統，常常會使用iframe 多頁籤的佈局方式，以下圖：
html

每每頁籤A操做後須要更新頁籤B的數據，如頁籤A建立新記錄後要刷新頁籤B的列表。A、B若是處於同一域，更新的方式有不少，很容易解決。可是A、B不在同域時，跨域通訊就變成一個難題了。算法

H5 postMessage

window.postMessage() 方法能夠安全地實現跨源通訊。一般，對於兩個不一樣頁面的腳本，只有當執行它們的頁面位於具備相同的協議（一般爲https），端口號（443爲https的默認值），以及主機 (兩個頁面的模數 Document.domain設置爲相同的值) 時，這兩個腳本才能相互通訊。window.postMessage() 方法提供了一種受控機制來規避此限制，只要正確的使用，這種方法就很安全。跨域

基本語法：安全

otherWindow.postMessage(message, targetOrigin);

otherWindow：
dom

其餘窗口的一個引用，好比iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames。下列方式均可以獲取到 otherWindow ：
一、 Window.open 佈局

二、Window.opener post

三、HTMLIFrameElement.contentWindow 3d

四、Window.parent Window.frames +索引值code

message：
cdn

將要發送到其餘 window的數據。它將會被結構化克隆算法序列化。這意味着你能夠不受什麼限制的將數據對象安全的傳送給目標窗口而無需本身序列化。

targetOrigin：

經過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值能夠是字符串"*"（表示無限制）或者一個URI。在發送消息的時候，若是目標窗口的協議、主機地址或端口這三者的任意一項不匹配targetOrigin提供的值，那麼消息就不會被髮送；只有三者徹底匹配，消息纔會被髮送。這個機制用來控制消息能夠發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤其重要，必須保證它的值與這條包含密碼的信息的預期接受者的origin屬性徹底一致，來防止密碼被惡意的第三方截獲。若是你明確的知道消息應該發送到哪一個窗口，那麼請始終提供一個有確切值的targetOrigin，而不是*。不提供確切的目標將致使數據泄露到任何對數據感興趣的惡意站點。