同源策略与跨域访问

1. 同源策略

同源策略是浏览器的安全基石。同源的定义，包括三个方面：

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

限制范围：

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

简单说，协议、域名、端口三者任意不同的两个 URL 之间不允许通信，范围包括获取对方 Cookie，DOM，发送 AJAX 请求。

2. 跨域通信

• 共享 Cookie。一级域名相同，二级域名不同，可以共享 Cookie 实现跨域。
• 片段识别符。http://x.com/x.html#data，URL# 后面的 data 指的就是片段标识符，iframe 可以获取到 data，从而实现跨域。
• window.name。无论是否同源，只要在同一个窗口里，前一个网页设置了 window.name ，后一个网页可以读取它。
• window.postMessage。跨文档通信 API ，允许跨窗口通信，不论这两个窗口是否同源。

3. AJAX

• JSONP网页添加一个script元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定的回调函数里。但是，只能发GET请求。
• WebSocketWebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，因为Origin字段可以设置请求源。
• CORSCORS 需要浏览器和服务器同时支持，CORS 通信与同源的 AJAX 通信没有差别。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息服务器端需要设置，（1）Access-Control-Allow-Origin 允许的源，（2）Access-Control-Allow-Credentials 是否发送 Cookie 和 HTTP 认证信息，（3）Access-Control-Expose-Headers 允许脚本访问的返回头。

4. django-cors-headers

安装

1

pip install django-cors-headers

settings.py配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

INSTALLED_APPS = (
    'corsheaders',
)
MIDDLEWARE = [  
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

更详细的配置，可以去项目主页，Go

5. 参考

• https://github.com/ottoyiu/django-cors-headers
• http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
• http://www.ruanyifeng.com/blog/2016/04/cors.htmlhttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS