同源政策

浏览器安全的基石是”同源政策

在计算机科学中,同源政策是web应用安全模型中非常重要的概念,一个web浏览器允许第一个web页面的程序可以获取在第二个页面的数据,当且仅当两个web页面是同源的。源被定义为URI scheme,域名和端口号。这个政策阻止了一个页面的恶意程序通过页面的Document Object模型去另外一个web页面获取敏感数据的权限。

这个机制对广大的基于HTTP cookies的现代web应用意义重大,cookies维护了认证的用户sessions,而服务器是基于HTTP cookie信息来传递敏感信息或者完成状态改变的行为。不相关的站点之间的严格分离必须在客户端方来维护,来阻止数据的机密性或者完整性下降。

通俗的讲,A网页设置的 Cookie,B网页不能打开,除非这两个网页”同源”。

所谓”同源”指的是”三个相同”:

  • 协议相同
  • 域名相同
  • 端口相同

比如http://www.example.com/dir/page.htmlhttp://example.com/dir/other.html就不同源,因为域名不同,而和http://www.example.com/dir2/other.html同源,因为协议相同,域名相同,端口也相同。

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

目前,如果非同源,共有三种行为受到限制:

  • Cookie、LocalStorage 和 IndexDB 无法读取。
  • DOM 无法获得。
  • AJAX 请求不能发送。

其中Cookie,iframe,LocalStorage等当不同源的时候的解决办法不涉及后端,因此暂时不做介绍。

同源政策规定,AJAX请求只能发给同源的网址,否则就报错。除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。

  • JSONP
  • WebSocket
  • CORS

其中WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。

WebSocket的请求头中有一个Origin字段,表示该请求的请求源(origin),即发自哪个域名。正是因为有了Origin这个字段,所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段,判断是否许可本次通信。如果该域名在白名单内,服务器就会做出如下回应。

1
2
3
4
5
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

CORS

CORS是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是W3C标准,是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求,CORS允许任何类型的请求。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

其中浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

简单请求

  1. 请求方法是以下三种方法之一:
    • HEAD
    • GET
    • POST
  2. HTTP的头信息不超出以下几种字段:
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求,浏览器直接发出CORS请求。具体来说,浏览器发现这次跨源AJAX请求是简单请求,就在头信息之中自动增加一个Origin字段。

1
2
3
4
5
6
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求。

如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段

1
2
3
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar Content-Type: text/html; charset=utf-8
  • Access-Control-Allow-Origin: 它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
  • Access-Control-Allow-Credentials: 它的值是一个布尔值,表示是否允许发送Cookie。如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。
  • Access-Control-Expose-Headers: CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

其中,如果有Cookie,则Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

非简单请求

除了简单请求之外的都是非简单请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。

  • 预检请求

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

1
2
3
4
5
6
7
8
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

“预检”请求用的请求方法是OPTIONS,表示这个请求是用来询问的。头信息里面,关键字段是Origin,表示请求来自哪个源。

  • Access-Control-Request-Method: 列出浏览器的CORS请求会用到哪些HTTP方法
  • Access-Control-Request-Headers: 指定浏览器CORS请求会额外发送的头信息字段

  • 预检请求回应

服务器收到”预检”请求以后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。

1
2
3
4
5
6
7
8
9
10
11
12
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

如果浏览器否定了”预检”请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest对象的onerror回调函数捕获。

flask-cors

搞懂了原理,下来看这个库就非常容易了。

这个库提供了一个Flask扩展,其默认在所有路由上开启了CORS支持,支持所有源和方法。它参数化了所有单独的CORS头。这个包同时包含了一个装饰器。

扩展

这是推荐的开启CORS的方式,默认的配置将在大部分情况下工作正常。

class flask_cors.CORS(app=None, **kwargs)

为这个应用初始化跨域资源共享。参数和cross_origin()是一致的,多了一个资源参数。资源参数定义了一系列的去匹配的资源路径的正则表达式,其他的可选参数将在这些路径(路由)上起作用。可选参数和cross_origin()是一致的。

CORS的设置是以下列顺序决定的:

  1. 资源层级的设置(当传递进去一个字典)
  2. 关键字参数设置
  3. 应用级别的配置参数(比如. CORS_*)
  4. 默认参数

因为有可能多个正则表达式会匹配到一个资源路径上,所以正则表达式首先会通过长度来排序,最长到最短,试图匹配一个最特定的正则表达式。这样做的好处是,首先匹配特定的资源,然后使用通配符匹配其他的资源。

  • resources(dict, iterable or string)

一系列正则表达式和应用于给定的资源路径的可选的CORS选项

如果是字典的话,key是正则表达式,值是和这个方法一样的关键字参数。

如果是列表的话,就是一系列的正则表达式。会应用app层级的配置。

如果是字符串的话,就是一个正则表达式。会应用app层级的参数。

默认会匹配所有的并且应用app层级的配置。

  • origins(list, string or regex)

源,或者是一个列表的允许源。可能是正则表达式,大小写敏感的字符串,或者是一个星号。

  • methods(list or string)

默认是 [GET, HEAD, POST, OPTIONS, PUT, PATCH, DELETE]

  • expose_headers (list or string)
  • allow_headers (list, string or regex)
  • supports_credentials (bool)

允许用户发起认证的请求,即允许cookie。如果是true,将会在回应中加入Access-Control-Allow-Credentials头。不可以与*域一起使用。

  • max_age (timedelta, integer, string or None)
  • send_wildcard (bool)

如果为True,并且源参数是*,那么一个通配符Access-Control-Allow-Origin头将会被发送,而不是请求的源头。

  • vary_header (bool)

装饰器

flask_cors.cross_origin(*args, **kwargs)

例子

  • CORS
1
2
3
4
5
6
7
8
9
from flask import Flask, session
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route("/")
def helloWorld():
return "Hello, %s" % session['username']
  • cross_origin()
1
2
3
4
5
6
@app.route("/", methods=['GET'])
@cross_origin()
def helloWorld():
return '''<h1>Hello CORS!</h1> Read about my spec at the
<a href="http://www.w3.org/TR/cors/">W3</a> Or, checkout my documentation
on <a href="https://github.com/corydolphin/flask-cors">Github</a>'''

自定义

当然可以自己来实现这个CORS,主要就是加上一些头信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@app.after_request
def set_cors_headers(response):
# 不论预检响应还是正常响应都会有的头
response.headers['Access-Control-Allow-Origin'] = request.headers.get('Origin', '*')
response.headers['Access-Control-Allow-Credentials'] = 'true'
if request.method == 'OPTIONS':
# 只会在预检响应中出现的
# http://www.w3.org/TR/cors/#access-control-allow-methods-response-header
response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, PATCH, OPTIONS'
response.headers['Access-Control-Max-Age'] = '3600' # 1 hour cache
if request.headers.get('Access-Control-Request-Headers') is not None:
response.headers['Access-Control-Allow-Headers'] = request.headers['Access-Control-Request-Headers']
return response

参考:

  1. 浏览器同源政策及其规避方法
  2. 跨域资源共享 CORS 详解
  3. Wiki - Same-origin policy
  4. Cross-Origin Resource Sharing
  5. flask-cors API doc