浏览器同源与跨域问题总结

总概述

1.浏览器同源策略

互联网的发展催生了跨域访问的需求,各种跨域方法和协议满足了需求但也增加了各种风险。
尤其是XSS和CSRF等攻击的盛行也得益于此。

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

跨域问题是由于浏览器的同源策略所引起的,浏览器同源策略在web应用中非常重要,没有它web的世界会一团糟。

  • 举个例子:

    比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。

比较容易忽略的一点就是协议不同也会引发同源策略,http和https是不同源的。

浏览器的同源策略就是,从一个源上加载的脚本不允许访问不同源的文档,这个有点抽象,具体体现在下面两个方面。

  • 标签的同源策略

我们知道通过标签加载资源是不会受到限制的,比如<script>加载cdn加速的js资源,加载不同域的图片等,<iframe>加载其他域的html。

似乎浏览器对于标签加载资源没有作同源策略。实际上标签的同源策略体现在浏览器限制了JavaScript的权限使其不能读、写加载的html文档。

注意仅仅指的是html文档,具体而言指的是iframe加载的html文档,js无法访问其document。 而js,img等仍然认为是同源,不受访问限制。

  • ajax同源策略

浏览器发出的xmlhttprequest也存在同源的问题,不同源的访问会被限制,接下来将介绍这部分内容

2.Ajax跨域

同源策略是web安全上的考虑,但是实际的工作中经常会碰到需要跨域的情况。主流的跨域方式有

  1. JSONP方式
  2. CORS跨域同源

    3.iframe跨域

  3. html5 postMessage方式
  4. window.name

细说:

跨域

Ajax (XMLHttpRequest)请求受到同源策略的限制。

Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。

因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。

  • 举个例子:

假设某网站引用了其它站点的javascript,这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。

或者某网站因为存在漏洞导致XSS注入了javascript脚本,这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点,这样就可以源源不断收集信息。

如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。

这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交。(实际上下面提到了CORS已经放宽了限制)

随着Ajax技术和网络服务的发展,对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。

JSONP

JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本,并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的,那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。

JSONP就是利用<script>标签的跨域能力实现跨域数据的访问,请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数,服务器端动态生成的脚本会产生数据,并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时,callback函数就被调用。

CORS (Cross origin resource sharing)

CORS协议提升了Ajax的跨域能力,但也增加了风险。一旦网站被注入脚本或XSS攻击,
将非常方便的获取用户信息并悄悄传递出去。 

通过在HTTP Header中加入扩展字段,服务器在相应网页头部加入字段表示允许访问的domain和HTTP method,客户端检查自己的域是否在允许列表中,决定是否处理响应。

实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。

服务器端在HTTP的响应头中加入(页面层次的控制模式):

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

多个域名之间用逗号分隔,表示对所示域名提供跨域访问权限。

客户端可以有两种行为:

  1. 发送OPTIONS请求,请求Access-Control信息。如果自己的域名在允许的访问列表中,则发送真正的请求,否则放弃请求发送。
  2. 直接发送请求,然后检查response的Access-Control信息,如果自己的域名在允许的访问列表中,则读取response body,否则放弃。