基于HTML5跨域通信技術的客戶端數據同步機制研究

劉耀欽

（鄖陽師范高等專科學校計算機科學系，十堰442700）

基于HTML5跨域通信技術的客戶端數據同步機制研究

劉耀欽

（鄖陽師范高等專科學校計算機科學系，十堰442700）

同源策略是瀏覽器中數據安全訪問的核心策略，是構建安全Web應用環境的重要保障措施，也正是因為同源策略的限制，使得Web應用系統的跨域通信難以解決。針對打破同源限制后建立一套基于用跨域通信技術的客戶端數據同步體系，研究HTML5的postMessage API，對實現過程中可能會出現的安全威脅做分析并提出相應的解決方案。隨著瀏覽器兼容性的日趨完善及HTML5應用的逐漸成熟，跨域通信帶來的體驗也會更加完美。

HTML5；跨域；同源策略；數據同步；XSS

鄖陽師范高等專科學校2014年重點科研項目（No.2014A01)

0　引言

HTML5作為Web應用開發的核心元素，是構建Web內容的一種語言描述方式[1]，有著許多其他組件難以抗衡的新特性，相比HTML4，HTML5不僅簡化了傳統標簽語法[2]，而且提供了更加豐富的標簽和API[3]，使得Web應用開發技術和性能日趨成熟和穩定。HTML5之前，基于數據訪問的安全考慮，瀏覽器采用了一種同源策略（Same Origin Policy）機制[4]，用于限制URL的訪問必須保證具有相同的協議、域名和端口，雖然保證了Web數據的私密性，但也確實給跨域通信帶來了很大的難度。HTML5通過使用postMessage API有效的解決了跨框架、跨窗口間的通信問題，相比傳統解決方案，具有方便快速、簡單易用等優勢。

1　同源策略

瀏覽器作為Web應用系統的客戶端宿主，主要用于向服務器傳送用戶請求并處理和輸出服務器返回的各種資源，基于數據訪問的安全性考慮，瀏覽器均采用了一種基于同源策略的安全訪問機制，同源策略又稱單源策略或同站策略，是客戶端數據訪問的安全規范和Web應用安全架構的基礎，同源即指協議、端口及主機的三元組中各個元素都必相同。該策略限定一個腳本只能讀取與之同源的窗口或文檔的屬性[5]，同時定義了客戶端腳本的安全邊界，用于限定訪問程序腳本同源的數據資源[4]，根據這個策略，pido.com域名下JS無法跨域操作mypido.com下的DOM，表1展示了不同URL下數據通信的情況對比。

表1　不同URL下數據通信情況對比

同源策略雖然限制了數據訪問的域權限，但HTML中還有很多不遵循同源策略的標簽，如＜script>、＜img>、＜iframe>等，這些標簽除了加載本域資源外還可以連接其他已經存在的網絡資源。假設使用＜iframe>在當前頁面加載了某銀行的登錄窗口，若沒有同源策略的限制，用戶在該＜iframe>通過實名登錄后的私密信息就有可能被頂級頁面所竊取。圖1描述同源策略的工作原理。

圖1　同源策略工作原理

2　HTML5跨域技術及跨域通信實現

（1）HTML5跨域技術

同源策略的嚴格性，在確保用戶數據訪問私密性和安全性的同時，也制約了跨域數據交換和資源共享，很多情況下，Web應用的前端開發不可避免地需要跨域操作，開發者通常會用動態腳本、Document.domain、Window.name等方式來實現簡單的消息傳遞和數據交換。HTML5的postMessage（）方法允許來自不同源的腳本進行通信，解決了跨域、多窗口通信的難題。postMessage（）原型如下：

otherWindow.postMessage（message,targetOrigin）;

message：表示要傳遞的數據，可以是JS任意基本類型或可復制的對象，對一些只能處理字符串的瀏覽器來說，需要使用JSON.stringify（）將對象序列化[6]，JSON是一種輕量級的數據交換格式，易于閱讀和編寫[7]。

targetOrigin：表示目標域URL，可以設置為"*"表示可以將message傳遞給任意窗口，如果需要傳遞給當前窗口同源可以設置為"/"。

（2）跨域通信的實現

在同源策略的控制下，Web頁的跨域調用可以通過設置document.domain+iframe、location.hash+iframe、window.name及創建動態Script等方式來實現。跨域加載后頁面之間的數據交換和資源共享可以通過HTML5的postMessage（）實現。

假設一個頁面有兩個不同的iframe，分別加載來自不同域的Web頁，此類型框架的跨域通信，可以通過在服務器中建立127.0.0.1（A站點）和127.0.0.1:8080（B站點）兩個模擬站點，然后分別在A和B站點下建立iframeAll.htm l、iframeSend.htm l和iframeReceive.htm l三個文件來實現。

iframeAll.html頁面包含如下代碼，用于加載兩個iframe。

＜div class="part">

＜iframe src="iframeA ll.htm l">＜/iframe>

＜iframe src="http://127.0.0.1:8080/iframeSend.htm l">＜/ iframe>

＜/div>

ifram eSend.html使用如下代碼向iframeReceive. html發送消息。

＜form>

＜input type="text"/>

＜input type="submit"value="發送"/>

＜/form>

var sendForm=document.querySelector（"form"）;//獲取當前頁面的表單元素

sendForm.onsubm it=function（）{//當表單提交時觸發

var mData=document.querySelector（"input[type= 'text']"）.value;//獲取當前頁的消息框中的值

window.parent.frames[1].postMessage（mData,'http:// 127.0.0.1:8080'）;//將消息發送給指定域下的框架對象，window.parent.frames[1]表示父窗口中的第2個iframe

return false;

}

iframeReceive.html使用如下代碼接收iframeSend.htm l發送來的消息。

＜div id="mData">＜/div>

varmBox=document.querySelector（"#mData"）;//獲取id為mData的對象

varmHandle=function（e）{//用來輸出接收到的消息

mBox.innerHTML='接受到的信息是：'+e.data;

};

if（window.addEventListener）{對非IE內核的瀏覽器添加監聽message事件，如果有消息事件觸發則執行mHandle

window.addEventListener（"message",mHandle,false）;

}else if（window.attachEvent）{對類似IE內核的瀏覽器添加監聽message事件，如果有消息事件觸發則執行mHandle

window.attachEvent（'onmessage',mHandle）;

}

3　安全性分析

通過postMessage（）實現跨域通信和資源共享，是建立在破壞同源策略重要的安全機制基礎上的，擴大了Web應用的安全邊界范圍，加大了被攻擊的可能性。HTML5開放跨域通信的前提是基于服務器是值得信任的，如若服務器的安全不能得到保障，則可能造成嚴重的數據泄漏[8]等安全性問題。所以，在開發具有跨域通信功能的Web應用程序時，開發人員必須仔細檢查以確保信息來源于他們信任的網站，而不是惡意的數據。

（1）發送方式

在postMessage（message,targetOrigin）方法來說，targetOrigin用于指定接收消息的目標域，可以是通配符[9]"*"用于表示任意的接收方，這將會導致未知的消息被陌生的窗口接收，安全性的做法是明確指定接收域，如本例中的postMessage（mData,'http://127.0.0.1: 8080'）方法指定只能被http://127.0.0.1:8080下的文件接收，保證了消息發送方的通信安全。

（2）接收方未經驗證

對于接收到的消息，Web應用程序要附加對其來源驗證的功能，可以有效防止消息來自未經授權的發送者。可以在接收端輸出消息時添加：

if（e.origin=="http://127.0.0.1"）{//判斷消息來源是否是http://127.0.0.1

//do something

}

（3）跨站腳本攻擊

跨站腳本攻擊（XSS）[10]是指攻擊者在頁面里插入惡意代碼，當接收窗口輸出消息時，這段代碼會被瀏覽器執行，從而達到惡意攻擊的目的。XSS攻擊主要有兩類攻擊來源，一是利用程序自身漏洞構造跨站語句，二是攻擊者將自己構造的攻擊代碼發放給非本域的Web頁進而達到攻擊的目的。

例如發送方發來:

postMessage（"＜img src='src'onerror='alert（error）;' >","http://127.0.0.1:8080"）;//src是個虛假的地址

接收方經過消息來源驗證后，使用如下代碼處理接收到的消息：

printDiv.innerHTML="接收到的消息是："+e.data;

則當接收頁執行時，可導致接收窗口出XSS。解決此種類型的方法就是將innerHTML替換成textContent，將接收到的消息內容輸出而不是作為代碼執行。

4　結語

瀏覽器的同源策略保證了Web應用系統數據的安全訪問，它要求Web頁之間的訪問必須保證傳輸協議、主機域、端口三者均相同，嚴格的約束條件使得Web應用系統失去了靈活性。HTML5的postMessage API允許兩個窗口文檔或不同iframe之間的數據跨域發送消息，為不同Web頁和iframe之間的跨域通信搭建了一架橋梁，有效解決了客戶端跨域通信數據同步的問題。破壞了同源策略，勢必會給瀏覽器帶來相應的安全威脅，就postMessage實現的跨域通信問題而言，主要有發送消息的方式、接收方消息來源未經驗證及跨域腳本攻擊等3種安全問題，結合具體的應用場景設定安全的發放方式，嚴格過濾消息來源堵截攻擊漏洞，則會建立一套安全高效的跨域通信機制，為客戶端數據同步及資源共享提供安全的運行環境。文中實例均在Win8+Firefox37.0.1下調試通過。

[1]劉耀欽.基于HTML5的Web離線應用研究與探討[J].河南工程學院學報（自然科學版），2015，27（1）：77~80

[2]劉耀欽.利用HTML5拖放技術實現多文件異步上傳[J].四川理工學院學報（自然科學版），2015，28（1）：17~29+30

[3]李瀟宇，張玉清，劉奇旭，鄭晨.一種基于HTML5的安全跨文檔消息傳遞方案[J].中國科學院研究生院學報，2013，30（1）：124~ 130

[4]何良，方勇，方昉，蒲偉.瀏覽器跨域通信安全技術研究[J].信息安全與通信保密，2013（4）：59~61

[5]陳臘梅，李為，程振林，張曉力.AJAX跨域訪問的研究與應用[J].計算機工程與設計，2008，29（22）：5680~5684

[6]張濤，黃強，毛磊雅，高興.一個基于JSON的對象序列化算法[J].計算機工程與應用，2007，43（15）：98~100+133

[7]李志秀，張軍，陳光，楊麗紅.JQuery AJAX異步處理JSON數據在項目管理系統中的應用[J].云南大學學報（自然科學版），2011，33（S2）：247~250

[8]丁輝，高松，毛南.從數據泄漏事件看商業銀行信息安全保密[J].計算機安全，2012（3）：53~56

[9]強繼明，謝飛，高雋，胡學鋼，吳信東.帶任意長度通配符的模式匹配[J].自動化學報，2014，40（11）：2499~2511

[10]龔小剛，王紅凱，夏威，吳科慶.跨站腳本攻擊（XSS）的形成與利用研究[J].信息安全與技術，2015（3）：52~55

HTML5;Cross Domain;Origin Policy;Data Synchronization;XSS

Research on Client Data Synchronization Based on HTML5 Cross Dom ain Comm unication Technology

LIU Yao-qin

（Departmentof Computer Science，Yunyang Teachers'College，Shiyan 442700）

Homologous strategy is the core strategy of data security access in the browser,is an important guarantee for building a secure Web application environment,it is also because of the same origin policy,the cross domain communication Web application system is difficult to solve.To establish a set of data to the client for cross domain communication technology based on the synchronization system to break the limitof HTML5 sequence,post Message API,to do the analysis on the security threats thatmay appear in the process of implementation and puts forward the corresponding solutions.Withmore and more stable and the application of HTML5 browser compatibility gradually mature,cross domain communication brings good experience will bemore perfect.

1007-1423（2015）16-0065-04

10.3969/j.issn.1007-1423.2015.16.015

劉耀欽（1980-），男，講師，碩士,研究方向為信息安全及Web應用

2015-05-07

2015-05-20