第14章安全的跨源通信

第14章安全的跨源通信隨著Web應用的越來越豐富，與來自不同站點及其頁面進行通信也顯得非常重要。由于瀏覽器都遵循同源策略，不同站點的網頁如果需要信息交換就變得棘手和復雜。也正是基于這種需求，HTML5提供了兩個重要的通信模塊：跨文檔消息傳輸（CrossDocumentMessaging）跨源異步請求。本章我們就詳細介紹這兩個方面。14.1跨文檔消息傳輸跨文檔消息傳輸，用于實現在不同的框架之間、窗口之間和標簽之間的跨源通信。HTML5提供了完善的接口規(guī)范，在跨源通信的同時也能夠保證其足夠的安全。14.1.1跨文檔消息傳輸的實現 HTML5新增了網頁之間的腳本通信功能，實現了最基本的相互發(fā)送和接收信息，可以實現跨源網頁之間的通信。發(fā)送消息頁面

refWindow.postMessage(message,targetOrigin);接收消息頁面

window.addEventListener("message",messageListener,false); functionmessageListener(e){ console.log(e.origin);//消息來源origin console.log(e.data);//發(fā)送的數據data console.log(e.source);//源窗體對象實例resorce }14.1.2Web源安全 Web的源安全是Web應用的基礎安全，瀏覽器基本都遵守同源策略。HTML5打破了這種同源策略限制，在使用跨文檔消息通信時，必要的安全意識一定要謹記。1.同源策略 同源策略是瀏覽器中的主要安全措施。這里的“源”指的是主機名、協議和端口號的組合；要求動態(tài)內容如JavaScript，只能閱讀與之同源的那些HTTP應答和cookies，而不能閱讀來自不同源的內容。2.跨文檔通信安全白名單element.textContent=e.data;代替element.innerHTML=e.data;JSON.parse(e.data)代替eval(e.data);14.1.3使用postMessage接口1.檢測瀏覽器支持情況2.發(fā)送消息3.監(jiān)聽消息事件監(jiān)聽消息事件是在發(fā)送消息的目標頁面進行的。通過在window對象中添加message事件，即可監(jiān)聽發(fā)送過來的消息。14.1.3使用postMessage接口1.檢測瀏覽器支持情況

if(typeofwindow.postMessage==="undefined"){ alert("您的瀏覽器不支持postMesage！"); }2.發(fā)送消息

targetWindow.postMessage(“Hello,world”,“”);3.監(jiān)聽消息事件

window.addEventListener("message",messageHandler,true);14.1.4消息事件接口MessageEventHTML5提供了消息事件接口MessageEvent，用于通信過程中的消息處理。1.接口清單

14.1.4消息事件接口MessageEvent2.接口屬性 消息事件接口MessageEvent的屬性均為只讀屬性。data：獲取消息中的數據。origin：獲取消息的來源。應用于服務器發(fā)送的事件，和跨文檔消息傳輸。消息的來源，包含了主機名和端口號。lastEventId：獲取最后一個事件的ID編號。應用于服務器發(fā)送事件，表示最后一個事件的事件源ID編號。source：獲取源窗口的代理。應用于跨文檔消息傳輸。ports：獲取消息的端口數組。常用于跨文檔消息傳輸，和消息通道。14.1.4消息事件接口MessageEvent3.接口方法

initMessageEvent()

以一定的方式，初始化為同樣名稱的DOM事件接口方法。4.MessageEvent接口說明HTML5定義的MessageEvent接口也是WebSockets和Workers的一部分。HTML5中的通信功能中，用于接收消息的API與MessageEvent接口是一致的。在本章的跨文檔消息傳輸的應用中，一般會用到MessageEvent接口的data屬性、origin屬性、source屬性和ports屬性。其他屬性和方法會在后面的章節(jié)中涉及，由于是他們同屬于同一個接口，這里就一并列出。14.1.5實驗：跨文檔消息傳輸示例

本節(jié)我們將創(chuàng)建一個跨文檔的消息傳輸示例，利用postMessage()方法在不同文檔之前傳輸消息。本節(jié)的案例是把兩個跨文檔的頁面中的數據一起計算，并反饋計算結果。案例簡介本節(jié)案例包含兩個相互傳送消息的主體頁面和框架頁面。其中主體頁面main.html包含一個表單輸入和一個“計算”按鈕；框架頁面frame.html，包含一個輸入表單，和一段文字說明。14.2跨源請求XMLHttpRequestLevel2是XmlHttpRequest的增強版，添加了一些與時俱進的新功能，如跨站點的請求、進度事件、處理發(fā)送和接收字節(jié)流等。本節(jié)將詳細講解XMLHttpRequest

Level2的新增功能。14.2.1改進的XmlHttpRequest對象 XMLHttpRequestLevel2僅僅是描述XmlHttpRequest對象的一個規(guī)范說明。在這個規(guī)范當中，描述了從屬于該規(guī)范的XmlHttpRequest對象應該具有的功能。1.跨源請求

XMLHttpRequestLevel2允許通過跨源資源共享（Cross-OriginResourceSharing，簡稱CORS）進行跨站點的XMLHttpRequest請求。2.進度事件

XMLHttpRequestLevel2為XMLHttpRequest對象新增了對進度的一系列響應事件。利用這些進度事件，不但可以獲取詳細的請求進度信息，還可以跟蹤資源上載的進度信息，使得XMLHttpRequest對象請求資源更加細致化。3.其他功能

XMLHttpRequestLevel2的其他新增的XMLHttpRequest對象功能還包括處理發(fā)送和接收字節(jié)流等功能。本書對此不作詳細介紹。14.2.2XMLHttpRequestLevel2規(guī)范說明為方便我們能夠對XMLHttpRequestLevel2規(guī)范下的XMLHttpRequest對象有更深入的了解，本節(jié)將接收該規(guī)范涉及的具體內容。由于會兼容前期的版本，所以很多的原有功能也保留了下來。1.XMLHttpRequest

Level2接口清單(略)2.新的響應事件abort：當請求中斷時的事件處理句柄。如調用了abort()方法。error：當請求失敗時的事件處理句柄。load：當成功的請求完成時的事件處理句柄。loadstart：當請求開始時的事件處理句柄。progress：當正在加載數據，或發(fā)送數據時的事件處理句柄。14.2.3使用新的XMLHttpRequest對象1.檢測瀏覽器支持情況 常用的方法是檢測XMLHttpRequest對象是否存在withCredentials屬性。

varxmlHttp=newXMLHttpRequest(); if(typeofxmlHttp.withCredentials==="undefined"){ alert("你的瀏覽器不支持跨源請求"); }else{ alert("你的瀏覽器支持跨源請求"); }14.2.3使用新的XMLHttpRequest對象2.構建跨源請求

xmlHttp.open("GET","",true); xmlHttp.send(null);

關于跨源請求的實現，沒有技術上的難點，只有實現上的不同。3.添加監(jiān)聽事件

xmlHttp.onabort=function(e){console.log("請求中斷");} xmlHttp.onerror=function(e){console.log("請求失敗");} xmlHttp.onload=function(e){console.log("請求完成：“+xmlHttp.responseText);} xmlHttp.onloadstart=function(e){console.log("請求開始");} xmlHttp.onprogress=function(e){ console.log("請求中..."); if(e.lengthComputable){ console.log(e.loaded+"/"+e.total); } }14.2.3使用新的XMLHttpRequest對象4.服務器部署

（1）在IIS6中暴露Access-Control-Allow-Origin，可通過以下步驟： 單擊需要啟用CORS的站點的屬性，在“HTTP頭”標簽下的自定義Http頭部分，添加如下信息即可：自定義HTTP頭名：Access-Control-Allow-Origin自定義HTTP頭值：*5.HTTP頭

HTTP用于傳送WWW方式的數據。HTTP協議采用了請求/響應模型?？蛻舳讼蚍掌靼l(fā)送一個請求，請求的頭部信息包含請求的方法、URI、協議版本、以及包含請求修飾符、客戶信息和內容的類似于MIME的消息結構。14.2.4實驗室：跨源請求示例

本節(jié)將利用XMLHttpRequest對象的新增功能，來實現跨源的請求。案例簡介本節(jié)案例中的頁面，包含一個按鈕和用于記錄響應信息和進度狀態(tài)的區(qū)域。通過點擊按鈕事件觸發(fā)一個跨源的請求，請求的結果將顯示在響應信息區(qū)域；請求過程中的狀態(tài)，則顯示的進度狀態(tài)的區(qū)域。添加hosts文件內容14.3小結本章主要講解了HTML5跨源通信的概念。重點講解了