XDM-跨文檔消息傳送

XDM

cross-document messaging 相似於XSS的簡稱,故稱爲 XDM 而不是 CDM

某些時候 XDM 也能做爲跨域的實現手段之一

與Jsonp 和 傳統的 CORS 跨域方式不一樣

XDM一般用於不一樣域的頁面之間傳遞消息

 

postMessage

postMessage() 方法做爲 XDM 的核心被添加進了 HTML5 規範中

該方法的做用是:向當前頁面的iframe或者彈出的窗口傳遞消息

 

該方法用於接收如下兩個參數:

1. 消息的內容
2. 接收消息的域

 

經過第二個參數能夠防止瀏覽器將信息發送到不安全的地方

使用方法以下:

// 支持XDM的瀏覽器也支持 iframe 的 contentWindow屬性
let iframeWindow = document.getElementById("myframe").contentWindow;
iframeWindow.postMessage("這裏是消息","http://www.example.com");

上方的postMessage的第二個參數則用於指定接收消息的文檔的源域

若是匹配,則將消息傳入內嵌框架中,不然什麼也不作

固然該參數也能夠設置爲"*" 表示全部域均可以接受消息

 

發送消息介紹完了,天然就須要接收傳遞的信息

 

當文檔接收到 XDM消息時就會觸發 window 對象的 message 事件

該事件是以異步形式觸發的因此可能存在時延, 觸發該事件後,該事件的事件對象(event)會包含如下信息:

• data: postMessage傳入的第一個參數字符串數據
• origin: 發送消息文檔的所在的域
• source: 發送消息文檔的window對象的代理,用於在發送上一條消息的窗口中調用postMessage方法(即發送回執消息)

就像發送時指定消息接收的域同樣,收到消息後驗證消息的來源域也一樣重要,以此保證消息來自已知的域

基本的驗證以下:

window.onmessage = function(event){
    // 確保消息來源於已知域
    if(evnet.origin == "http://www.example.com"){
        // 處理接收的數據
        processMessage(evnet.data);

        // 可選,向來源窗口發送回執
        event.source.postMessage("Received","http://example1.com");
    }
}

須要注意的是:

evnet.source 大多數狀況下只是 window 對象的代理對象,也就是說並非真正的 window 對象

因此不能經過該代理對象來訪問本來 window 對象上的屬性和值

 

XDM的一個怪異之處在於:

postMessage的第一個參數最先是做爲永遠都是字符串來實現的,但後來容許傳入任何數據結構,可是爲了保險起見最好仍是隻傳入字符串,若是但願傳入json數據最好使用 JSON.stringify() 來處理

圈起來上面的是要考的,在阿里面前端的時候被問到,當時是蒙逼且絕望的emm....

 

最後就是這種跨域的瀏覽器兼容狀況了,話很少說直接上圖,本身感覺