实现跨域最佳方案CSST.doc

实现跨域最佳方案CSST 　　摘 要： 在异域数据集成的Web应用中，同源策略使AJAX跨域访问受到了限制。阐述了避开同源策略的主要方案JSONP、Websocket、CORS等跨域方式的原理，进而提出了基于CSS的最快最佳方案-CSST，最后介绍了该方法的实现原理和优势。实践表明，该方法更有效地解决了AJAX跨域访问和展现数据的问题。 　　关键词： 跨域； AJAX； CSST； 同源策略 　　中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2017）09-19-02 　　Abstract： In the Web applications with heterogeneous data integration， homology policies make AJAX cross-domain access restricted. The cross-domain access principles of JSONP， Websocket， CORS and so on are discussed， then， CSST the fastest and best solution based on CSS is proposed， and the principle and advantage of CSST are introduced. The practice shows that this method is more effective to solve the problems of AJAX cross-domain access and show the data. 　　Key words： cross-domain； AJAX； CSST； homology policy 　　0 引言 　　“同源策略”是浏览器安全的基石，所谓同源，即协议、域名、端口相同[1-3]。为了保证用户信息的安全，防止恶意的网站窃取数据，“同源策略”是必需的。然而，如果非同源，浏览器缓存数据无法?x取、DOM无法获得、AJAX请求无效。实际开发中，为了实现资源在不同域之间的共享，常采用JSOPN、Websocket、CORS等跨域方案。 　　1 JSONP 　　JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。基本思想是，网页通过添加一个元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。 　　首先，网页动态插入元素，由它向跨源网址发出请求。服务器收到这个请求后，会将数据放在回调函数的参数位置返回[4]。由于元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了回调函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。 　　2 Websocket 　　WebSocket是一种通信协议，使用ws：//（非加密）和wss：//（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信[5-7]。 　　浏览器发出的WebSocket请求的头信息中有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。 　　3 CORS 　　CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。CORS需要浏览器和服务器同时支持[8]。目前，所有浏览器都支持该功能，IE浏览器不低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对开发者而言，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。 　　虽然CORS提供了一种跨域请求方案，但没有为安全访问提供足够的保障机制[9]。 　　4 CSST 　　CSST一种用CSS跨域传输文本的方案。相比传统跨域方案更为安全，不需要执行跨站脚本如图1。 　　其原理是通过读取 CSS3 content 属性获取传送内容。具体调用流程如图2。所示加载完毕的监听考虑是CSS3场景，取巧用动画开始（animationstart）这个事件来捕获。特殊字符的传输考虑到Chrome、Safari对content样式属性字符解析并不一致，为避免未知解析规则