本文主要探討用于構(gòu)建實(shí)時(shí)跨源通信的兩個(gè)模塊：跨文檔消息通信（Cross Document Messaging）和XMLHttpRequestLevel2。通過這兩個(gè)模塊，我們可以構(gòu)建不同域間進(jìn)行安全通信的Web應(yīng)用。
一、跨文檔消息通信
出于安全方面的看的考慮，運(yùn)行在同一瀏覽器中的框架、標(biāo)簽頁、窗口間的通信一直多受到嚴(yán)格的限制。但是現(xiàn)實(shí)中還存在一些合理的讓不同站點(diǎn)的內(nèi)容能在瀏覽器內(nèi)進(jìn)行交互的需求，其中Mashup就是一個(gè)典型的例子，它是各種不同應(yīng)用的結(jié)合體。為了滿足上述需求，引入了一種新的功能：跨文檔消息通信。其可以確保iframe、標(biāo)簽頁、窗口間安全地進(jìn)行跨源通信。
發(fā)送消息使用postMessage API，其示例代碼如下：
postMessage API提供了一種交互方式，使得不同源的iframe之間可以進(jìn)行消息通信。
HTML5 通過引入源的感念對域安全進(jìn)行了闡明和改進(jìn)。源是網(wǎng)絡(luò)上用來建立信任關(guān)系的地址的子集。源由規(guī)則（scheme）、主機(jī)（host）、端口（port）組成，例如由于scheme（https、http）不同，則源不同。
跨源通信通過 源來確定發(fā)送者，這就使得接收方可以忽略或者拒絕來自不可信源的消息。同時(shí)需要通過添加監(jiān)聽事件來接受消息，以避免被不可信應(yīng)用程序的信息所干擾。但是在使用外來消息時(shí)，即便是可靠的數(shù)據(jù)源，也同樣要謹(jǐn)慎，以防止內(nèi)容注入。
在使用postMessage API時(shí)，需要遵循以下步驟：
1、檢查瀏覽器是否支持
2、發(fā)送消息
第一個(gè)參數(shù)包含要發(fā)送的數(shù)據(jù)，第二個(gè)參數(shù)時(shí)消息傳遞的目的地。
如果要發(fā)送消息給iframe，則使用如下代碼：
1 | document.getElementById("iframe")[0].contentWindow.postMessage("Hello","xx.example.com"); |
3、監(jiān)聽消息事件
二、XMLHttpRequestLevel2
XMLHttpRequestLevel2是XMLHttpRequest的改進(jìn)版本，主要涉及：跨源XMLHttpRequess和進(jìn)度事件（Progress events）。
XMLHttpRequest僅限于同源通信，XMLHttpRequestLevel2通過跨資源共享實(shí)現(xiàn)（Cross Origin Resource Sharing）跨源XMLHttpRequests。
在XMLHttpRequest中通過readystatechange事件來響應(yīng)進(jìn)度，但是其在某些瀏覽器中不被兼容。XMLHttpRequestLevel2用了一個(gè)有意義的名字Progress進(jìn)度來命名進(jìn)度事件。其進(jìn)度事件的名稱主要有l(wèi)oadstart、progress、abort、error、load、loadend。通過對程序?qū)傩栽O(shè)置回調(diào)函數(shù)，可以實(shí)現(xiàn)對這些事件的監(jiān)聽。
在使用XMLHttpRequestLevel2時(shí)，需要遵循以下步驟：
1、檢查瀏覽器是否支持
2、構(gòu)建跨源請求
1 2 | var crossOriginRequest = new XMLHttpRequest(); |
在請求過程中，務(wù)必確保能夠監(jiān)聽到錯(cuò)誤，以找出出錯(cuò)原因，解決問題。
3、使用進(jìn)度事件
三、postMessage API示例應(yīng)用
以跨源聊天應(yīng)用為例，來演示門戶頁面和聊天部件之間的交互。
1、創(chuàng)建postMessagePortal.html頁面
2、創(chuàng)建postMessageWidget.html
注意：第一、上述的兩個(gè)頁面需要部署到web服務(wù)器；第二、兩個(gè)頁面必須來自不同的域。如果要在本機(jī)部署，則需要更改hosts文件，增加：
1 2 | 127.0.0.1 portal.example.com127.0.0.1 chat.example.net |
修改完成后，需要關(guān)閉瀏覽器，再次重新打開。
四、XMLHttpRequestLevel2示例應(yīng)用
1、創(chuàng)建crossOriginUpload.html頁面：
這是因?yàn)樵L問一頁面的域與所請求的域非同源造成的。且瀏覽器是根據(jù)響應(yīng)頭的規(guī)則來確定這個(gè)域是否同源可以接收。
因此我們需要http://geodata.example.net:8080/upload在返回內(nèi)容時(shí)，設(shè)置Header Access-Control-Allow-Origin，即：
Response.AddHeader("Access-Control-Allow-Origin","*") ;
瀏覽器在接收到服務(wù)器返回信息時(shí)，會檢查響應(yīng)頭的Access-Control-Allow-Origin，它的值標(biāo)識請求內(nèi)容所允許的域。如果將服務(wù)器設(shè)置Access-Control-Allow-Origin為*，表明該返回信息允許所有源訪問。如果設(shè)置為具體的域，如http://xx.com，就表明除了同源外，只允許域來自xx.com的訪問。