1.跨文件訊息通訊
跨文件訊息通訊可以確保iframe、標籤頁、視窗間安全地進行跨來源通訊。它把postMessage API定義為傳送訊息的標準方式。利用postMessage傳送訊息非常簡單，程式碼如下所示：
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
接收訊息時僅需在頁面種增加一個事件處理函數。當某個訊息到達時，透過檢查訊息的來源來決定是否對此訊息進行處理。
訊息事件是一個擁有data(資料)和origin(來源)屬性的DOM事件。 data屬性是發送方傳遞的實際訊息，而origin屬性是發送來源。
postMessage API不僅可以勝任同源文件間的通信，而且在瀏覽器不允許非同源通信的情況下，postMessage API也很有用。鑑於它的一致性和易用性，在同源文檔間通訊時也建議使用postMessage。在JavaScript環境的通訊中始終應使用postMessage API，例如使用HTML5 Web Worker通訊時。
1.1 理解源安全
HTML5榮光引入源（origin）的概念對域安全進行了闡明和改進。來源是在網路上用來建立信任關係的位址的子集。來源由規則（scheme）、主機（host）、連接埠（post）組成。
源的概念中不考慮路徑。
HTML5定義了源的序列化。來源在API和協定中以字串的形式出現。
postMessage的安全規則確保了訊息不會被傳遞到非預期的來源頁面。當發送訊息時，由發送方制定接收方的來源。如果發送者用來呼叫postMessage的視窗不具有特定的來源（例如使用者跳到了其他網站），瀏覽器就不會傳送訊息。
類似地，接受訊息的時候，發送方的來源也被當作訊息的一部分。為避免偽造，訊息來源由瀏覽器提供。接收方可以決定處理哪些訊息，以及忽略哪些訊息。我們可以保留一份白名單，告訴瀏覽器僅僅處理可信來源的訊息。
最好永遠不要對來自第三方的字串求值。再者，要避免使用eval方法處理應用內部字串。可以透過window.JSON或json,.org解析器使用JSON。
1.2 跨文件訊息通訊的瀏覽器支援情況
常用的做法是偵測XMLHttpRequest物件中是否存在withCredentials屬性：
JavaScript Code複製內容到剪貼簿
-
var xhr = new > (typeof xhr.withCredentials === undefined) {
1.3 使用postMessage API
提示 HTML5定義的MessageEvent介面也是HTML5 WebSockets和HTML5 WebWorkers的一部分。 HTML5的通訊功能用來接受訊息的API與MessageEvent介面是一致的。其他通訊類API，如EventSource API和Web Workers，也都是使用MessageEvent介面來傳遞訊息。
1.4 使用postMessage API建立應用程式
傳送訊息 透過呼叫目標頁window物件中的postMessage()函數可傳送訊息，程式碼如下：
JavaScript Code
複製內容到剪貼簿
window.postMessage(
"Hello, world"-
, >
第一個參數包括要傳送的數據，第二個參數是訊息傳送的目的地。要傳送訊息給iframe，可以再對應iframe的contentWindow中呼叫postMessage，程式碼如下：
JavaScript Code
複製內容到剪貼簿
document.getElementsByTagName("iframe"
)[0].contentWindow.postMessage(
- )[0].contentWindow.postMessage("Hello, >, "cha");
監聽訊息事件
接收訊息時僅需在頁面中增加一個事件處理函數。當某個訊息到達時，透過檢查訊息的來源來決定是否對此訊息進行處理。
JavaScript Code複製內容到剪貼簿
-
window.postMessage("Hello, world", >
訊息事件是一個擁有data（資料）和origin（來源）屬性的DOM事件。 data屬性是發送方傳遞的實際訊息，而origin屬性是發送來源。
來源由規則（scheme）、主機（host）、連接埠（port）組成。
例如：由於規則不同（如https與http），所以頁面與頁面的來源是不同的。
源的概念中不考慮路徑。如：與只是路徑不同，他們是相同的源頭。
來源在API和協定中以字串的形式出現。
JavaScript Code
複製內容到剪貼簿
var-
originWhiteList = ["porta", , ""]; function checkWhiteList(origin) { checkWhiteList(origin) { var i=0; iif if if return true; } } return; } function messageHandler(e) { if if (>if (chn)2.數據); } else { //忽略未知來源的訊息 } }
postMessage API可以適用於同源和非同源通信，鑑於它的一致性，在同源文檔間通信時也推薦適用postMessage。
2 XMLHttpRequest Level2
作為XMLHttpRequest的改進版，XMLHttpRequest Level2在功能上有了很大的改進。主要集中在兩個方面：
（1）跨源XMLHttpRequests;（2）進度事件（Progress events）
2.1 跨源XMLHttpRequst
Origin Resource Sharing，跨來源資源共享）實作了跨來源XMLHttpRequests。
跨來源HTTP請求包含一個Origin頭部，拓為伺服器提供HTTP請求的來源資訊。頭部由瀏覽器保護，不能被應用程式程式碼修改。從本質上講，它與跨文件訊息通訊中訊息事件的origin屬性作用相同。 CORS規範要求，對一些敏感行為－如申請證書的請求或除了GET和POST以外的OPTIONS預檢（preflight）請求，必須由瀏覽器發送給伺服器，以確定這種行為能否被支持和允許，這意味著成功通訊的背後或許需要由具備CORS出了能力的伺服器來支援。
2.2 進度事件
新版XMLHttpRequest中最重要的API改進之一是增加了對進度的回應。
XMLHttpRequest Level2用了一個有意義的名字Progress進度來命名進度事件。
3 進階功能
3.1 結構化的資料
早期版本的postMessage僅支援字串。後來的版本支援JavaScript物件、canvas imageData和檔案等其他資料類型。由於不同瀏覽器對規範支援的差異，對不同的物件類型的支援情況也不同。
3.2 Framebusting
Framebusting技術可以用來保證某些內容不會載入到jframe。應用程式首先偵測其所在的視窗是否為最外層的視窗（window.top），若不是則跳脫包含它的框架，程式碼如下所示：
JavaScript Code
複製內容到剪貼簿
- if(window!=window.top)
- {
- window.top.location=location;
- }
3.3二進位資料
支援新的二進位API（如Typed Array）的瀏覽器可以用XMLHttpRequest來傳送二進位資料。 Level 2規格支援呼叫send()方法傳送Blob和ArrayBuffer物件
XML/HTML Code複製內容到剪貼簿
- var a = new Uint8Array([83,78Array([83,755,55, 0,9]); var xhr = new XMLHttpRequest(); x ", true); console.log(a); xhr.send(a.buffer);
XMLHttpRequest Level 2也會公開二進位回應資料。將responseType屬性值設定為text、document、arraybuffer或blob來控制 有response屬性傳回的物件類型。如果想要查看HTTP回應體包含的原始位元組，需要將responseTyper屬性值設為arraybuffer或blob。
