基于HTML5跨域通信技術(shù)的客戶端數(shù)據(jù)同步機(jī)制研究

劉耀欽

（鄖陽師范高等專科學(xué)校計(jì)算機(jī)科學(xué)系，十堰442700）

基于HTML5跨域通信技術(shù)的客戶端數(shù)據(jù)同步機(jī)制研究

劉耀欽

（鄖陽師范高等專科學(xué)校計(jì)算機(jī)科學(xué)系，十堰442700）

同源策略是瀏覽器中數(shù)據(jù)安全訪問的核心策略，是構(gòu)建安全Web應(yīng)用環(huán)境的重要保障措施，也正是因?yàn)橥床呗缘南拗疲沟肳eb應(yīng)用系統(tǒng)的跨域通信難以解決。針對打破同源限制后建立一套基于用跨域通信技術(shù)的客戶端數(shù)據(jù)同步體系，研究HTML5的postMessage API，對實(shí)現(xiàn)過程中可能會(huì)出現(xiàn)的安全威脅做分析并提出相應(yīng)的解決方案。隨著瀏覽器兼容性的日趨完善及HTML5應(yīng)用的逐漸成熟，跨域通信帶來的體驗(yàn)也會(huì)更加完美。

HTML5；跨域；同源策略；數(shù)據(jù)同步；XSS

鄖陽師范高等專科學(xué)校2014年重點(diǎn)科研項(xiàng)目（No.2014A01)

0　引言

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

1　同源策略

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

表1　不同URL下數(shù)據(jù)通信情況對比

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

圖1　同源策略工作原理

2　HTML5跨域技術(shù)及跨域通信實(shí)現(xiàn)

（1）HTML5跨域技術(shù)

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

otherWindow.postMessage（message,targetOrigin）;

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

targetOrigin：表示目標(biāo)域URL，可以設(shè)置為"*"表示可以將message傳遞給任意窗口，如果需要傳遞給當(dāng)前窗口同源可以設(shè)置為"/"。

（2）跨域通信的實(shí)現(xiàn)

在同源策略的控制下，Web頁的跨域調(diào)用可以通過設(shè)置document.domain+iframe、location.hash+iframe、window.name及創(chuàng)建動(dòng)態(tài)Script等方式來實(shí)現(xiàn)。跨域加載后頁面之間的數(shù)據(jù)交換和資源共享可以通過HTML5的postMessage（）實(shí)現(xiàn)。

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

iframeAll.html頁面包含如下代碼，用于加載兩個(gè)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發(fā)送消息。

＜form>

＜input type="text"/>

＜input type="submit"value="發(fā)送"/>

＜/form>

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

sendForm.onsubm it=function（）{//當(dāng)表單提交時(shí)觸發(fā)

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

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

return false;

}

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

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

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

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

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

};

if（window.addEventListener）{對非IE內(nèi)核的瀏覽器添加監(jiān)聽message事件，如果有消息事件觸發(fā)則執(zhí)行mHandle

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

}else if（window.attachEvent）{對類似IE內(nèi)核的瀏覽器添加監(jiān)聽message事件，如果有消息事件觸發(fā)則執(zhí)行mHandle

window.attachEvent（'onmessage',mHandle）;

}

3　安全性分析

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

（1）發(fā)送方式

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

（2）接收方未經(jīng)驗(yàn)證

對于接收到的消息，Web應(yīng)用程序要附加對其來源驗(yàn)證的功能，可以有效防止消息來自未經(jīng)授權(quán)的發(fā)送者。可以在接收端輸出消息時(shí)添加：

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

//do something

}

（3）跨站腳本攻擊

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

例如發(fā)送方發(fā)來:

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

接收方經(jīng)過消息來源驗(yàn)證后，使用如下代碼處理接收到的消息：

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

則當(dāng)接收頁執(zhí)行時(shí)，可導(dǎo)致接收窗口出XSS。解決此種類型的方法就是將innerHTML替換成textContent，將接收到的消息內(nèi)容輸出而不是作為代碼執(zhí)行。

4　結(jié)語

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

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

[2]劉耀欽.利用HTML5拖放技術(shù)實(shí)現(xiàn)多文件異步上傳[J].四川理工學(xué)院學(xué)報(bào)（自然科學(xué)版），2015，28（1）：17~29+30

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

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

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

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

[7]李志秀，張軍，陳光，楊麗紅.JQuery AJAX異步處理JSON數(shù)據(jù)在項(xiàng)目管理系統(tǒng)中的應(yīng)用[J].云南大學(xué)學(xué)報(bào)（自然科學(xué)版），2011，33（S2）：247~250

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

[9]強(qiáng)繼明，謝飛，高雋，胡學(xué)鋼，吳信東.帶任意長度通配符的模式匹配[J].自動(dòng)化學(xué)報(bào)，2014，40（11）：2499~2511

[10]龔小剛，王紅凱，夏威，吳科慶.跨站腳本攻擊（XSS）的形成與利用研究[J].信息安全與技術(shù)，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-），男，講師，碩士,研究方向?yàn)樾畔踩癢eb應(yīng)用

2015-05-07

2015-05-20