1.1 理解源安全
HTML5榮光引入源（origin）的概念對域安全進(jìn)行了闡明和改進(jìn)。源是在網(wǎng)絡(luò)上用來建立信任關(guān)系的地址的子集。源由規(guī)則（scheme）、主機(jī)（host）、端口（post）組成。
源的概念中不考慮路徑。
HTML5定義了源的序列化。源在API和協(xié)議中以字符串的形式出現(xiàn)。
postMessage的安全規(guī)則確保了消息不會(huì)被傳遞到非預(yù)期的源頁面中。當(dāng)發(fā)送消息時(shí)，由發(fā)送方制定接收方的源。如果發(fā)送方用來調(diào)用postMessage的窗口不具有特定的源（例如用戶跳轉(zhuǎn)到了其他站點(diǎn)），瀏覽器就不會(huì)傳送消息。
類似地，接受消息的時(shí)候，發(fā)送方的源也被作為消息的一部分。為避免偽造，消息源由瀏覽器提供。接收方可以決定處理哪些消息，以及忽略哪些消息。我們可以保留一份白名單，告訴瀏覽器僅僅處理可信源的消息。
最好永遠(yuǎn)不要對來自第三方的字符串求值。再者，要避免使用eval方法處理應(yīng)用內(nèi)部字符串?？梢酝ㄟ^window.JSON或者json,.org解析器使用JSON。
1.2 跨文檔消息通信的瀏覽器支持情況
常用的做法是檢測XMLHttpRequest對象中是否存在withCredentials屬性：

JavaScript Code復(fù)制內(nèi)容到剪貼板

• var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefined) { //不支持跨源的XMLHttpRequest } else { //支持跨源的XMLHttpRequest }  

• 1.3 使用postMessage API




• 提示 HTML5定義的MessageEvent接口也是HTML5 WebSockets和HTML5 WebWorkers的一部分。HTML5的通信功能用用于接受消息的API與MessageEvent接口是一致的。其他通信類API，如EventSource API和Web Workers，也都是使用MessageEvent接口來傳遞消息。




• 1.4 使用postMessage API創(chuàng)建應(yīng)用




• 發(fā)送消息




• 　　通過調(diào)用目標(biāo)頁面window對象中的postMessage()函數(shù)可發(fā)送消息，代碼如下：




JavaScript Code復(fù)制內(nèi)容到剪貼板

• window.postMessage("Hello, world", "porta");  

• 　　第一個(gè)參數(shù)包括要發(fā)送的數(shù)據(jù)，第二個(gè)參數(shù)是消息傳送的目的地。要發(fā)送消息給iframe，可以再相應(yīng)iframe的contentWindow中調(diào)用postMessage，代碼如下：




JavaScript Code復(fù)制內(nèi)容到剪貼板

• document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "cha");  

• 監(jiān)聽消息事件




• 　　接收消息時(shí)僅需在頁面中增加一個(gè)事件處理函數(shù)。當(dāng)某個(gè)消息到達(dá)時(shí)，通過檢查消息的來源來決定是否對這條消息進(jìn)行處理。




JavaScript Code復(fù)制內(nèi)容到剪貼板

• window.postMessage("Hello, world", "porta");  

• 　　消息事件是一個(gè)擁有data（數(shù)據(jù)）和origin（源）屬性的DOM事件。data屬性是發(fā)送方傳遞的實(shí)際消息，而origin屬性是發(fā)送來源。




• 　　源由規(guī)則（scheme）、主機(jī)（host）、端口（port）組成。




• 　　例如：由于規(guī)則不同（如https與http），所以頁面與頁面的源是不同的。




• 　　源的概念中不考慮路徑。如：與只是路徑不同，他們是相同的源。




• 　　源在API和協(xié)議中以字符串的形式出現(xiàn)。




JavaScript Code復(fù)制內(nèi)容到剪貼板

• var originWhiteList = ["porta", "game", ""]; function checkWhiteList(origin) { for (var i=0; i<originWhiteList.length; i++) { if (origin === originWhiteList[i]) { return true; } } return false; } function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e.data); } else { //忽略來自未知源的消息 } }  

• 　　postMessage API可以適用于同源和非同源通信，鑒于它的一致性，在同源文檔間通信時(shí)也推薦適用postMessage。




• 2 XMLHttpRequest Level2




• 作為XMLHttpRequest的改進(jìn)版，XMLHttpRequest Level2在功能上有了很大的改進(jìn)。主要集中在兩個(gè)方面：




• （1）跨源XMLHttpRequests;




• （2）進(jìn)度事件（Progress events）