10种跨域资源共享的方式与实现原理(1/2)
10种跨域资源共享的方式与实现原理
跨域的方法很多,不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求,我们应该优先选择jsonp或者window.name,双向通信我们采取cross frame,在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。
同源策略
在客户端编程语言中,如网页特效和actionscript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.zzzyk.com),那么我们就可以认为它们是相同的域。比如http://www.zzzyk.com/index.html和http://www.zzzyk.com/sub/index.html是同域,而http://www.zzzyk.com, https教程://www.zzzyk.com, http://www.zzzyk.com:8080, http://sub.zzzyk.com中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。本地的html文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前ie8还有这样的隐患。
受到同源策略的影响,跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步,目前在跨域请求的技巧上,有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种,一种是单向的数据请求,还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式,以下跨域实例的源代码可以从这里获得。
单向跨域
jsonp
jsonp (json with padding)是一个简单高效的跨域方式,html中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域a的页面pagea加载域b的数据,那么在域b的页面pageb中我以javascript的形式声明pagea需要的数据,然后在pagea中用script标签把pageb加载进来,那么pageb中的脚本就会得以执行。jsonp在此基础上加入了回调函数,pageb加载完之后会执行pagea中定义的函数,所需要的数据会以参数的形式传递给该函数。jsonp易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,jsonp是非常合适的选择。
flash urlloader
flash有自己的一套安全策略,服务器可以通过crossdomain.xml文件来声明能被哪些域的swf文件访问,swf也可以通过api来确定自身能被哪些域的swf加载。当跨域访问资源时,例如从域www.a.com请求域www.b.com上的数据,我们可以借助flash来发送http请求。首先,修改域www.b.com上的crossdomain.xml(一般存放在根目录,如果没有需要手动创建) ,把www.a.com加入到白名单。其次,通过flash urlloader发送http请求,最后,通过flash api把响应结果传递给javascript。flash urlloader是一种很普遍的跨域解决方案,不过需要支持ios的话,这个方案就无能为力了。
补充:网页制作,设计基础