基于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