CORS & CSP笔记

1.CORS & CSP

浏览器跨域相关的安全策略主要存在于两个方面：

1. 浏览器是否发送ajax
2. 浏览器是否加载返回数据

假设从a.com 向b.com发送ajax请求。此时浏览器当前页面为a.com，浏览器发送ajax，去获取b.com的资源。具体请求过程如下：

1. a.com通过添加 Content-Security-Policy头设置CSP策略来限制请求是否发出。浏览器发送获取资源请求之前，先读取当前页面的Content-Security-Policy参数，检查请求目的地址b.com是否符合CSP策略，如果符合则发出该ajax请求，如果不符合，则丢弃该请求并报CSP 错误。

    * Content-Security-Policy: default-src 'self' 仅仅允许访问当前域名，无法发送
    * Content-Security-Policy: *.b.com 允许发送
   

2. b.com通过设置跨域资源共享CORS策略来限制浏览器是否加载b.com返回的数据。 浏览器成功发送ajax给b.com后，b.com收到请求并返回带有Access-Control-Allow-Origin头的数据包，浏览器先检查a.com是否在Access-Control-Allow-Origin允许范围之内，如果不在，则报CORS错误并不在当前页面加载这次返回的数据。实际上，不管b.com是否配置CORS头，浏览器此时都收到了完整的数据包，浏览器只是通过CORS策略来决定是否呈现返回的数据。

    * Access-Control-Allow-Origin * 允许加载任意来源请求，请求成功
    * Access-Control-Allow-Origin http://c.com 只允许来自c.com的请求，请求失败
   

Origin header注意点：

Origin header是浏览器添加的。如果一个request中，有origin header，并不一定是一次跨域请求，但是所有跨域请求都 会包含origin header.

Refer: https://stackoverflow.com/questions/15988323/cors-and-origin-header

IE10以下不支持CORS

2.JSONP

html原生的带有src属性的标签，比如CSS IMG SCRIPT标签不存在跨域问题，jsonp正是利用script标签来实现跨域。 script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

JSONP只支持GET请求。

3. 同域代理

同域代理就是使用ajax先发送数据到中间代理，代理通过后端逻辑来向目标站发送请求。