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