Please enable Javascript to view the contents

同源策略与跨域访问

 ·  ☕ 2 分钟

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请求。
  • WebSocket
    WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,因为Origin字段可以设置请求源。
  • CORS
    CORS 需要浏览器和服务器同时支持,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. 参考


微信公众号
作者
微信公众号