同源策略与CORS

缺乏、安全感 2021-09-10 16:36 448阅读 0赞

## 同源策略 ##

*  它是浏览器最核心也是最基本的安全功能，**浏览器的同源策略，限制了来自不同的 “document” 或脚本对当前的 “document” 的读取或设置某些属性**
 *  如果没有同源策略，可能 a.com 的一段 Javascript 脚本在 b.com 未曾加载此脚本时，也可以随意涂改 b.com 的页面，为了不发生页面行为混乱，浏览器提出 ”Origin” 这一概念，来自不同 Origin 的对象互不干扰。
 *  影响 Origin（源） 的因素有：host（域名或IP）、子域名、端口、协议：

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center">URL</th> 
   <th style="text-align:center">OutCome</th> 
   <th style="text-align:center">Reason</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center"><a href="https://link.jianshu.com?t=http%3A%2F%2Fstore.company.com%2Fdir2%2Fother.html" rel="nofollow">http://store.company.com/dir2/other.html</a></td> 
   <td style="text-align:center">Success</td> 
   <td style="text-align:center"></td> 
  </tr> 
  <tr> 
   <td style="text-align:center"><a href="https://link.jianshu.com?t=http%3A%2F%2Fstore.company.com%2Fdir%2Finner%2Fanthoer.html" rel="nofollow">http://store.company.com/dir/inner/anthoer.html</a></td> 
   <td style="text-align:center">Success</td> 
   <td style="text-align:center"></td> 
  </tr> 
  <tr> 
   <td style="text-align:center"><a href="https://link.jianshu.com?t=https%3A%2F%2Fstore.company.com%2Fsecure.html" rel="nofollow">https://store.company.com/secure.html</a></td> 
   <td style="text-align:center">Failure</td> 
   <td style="text-align:center">Different protocol</td> 
  </tr> 
  <tr> 
   <td style="text-align:center"><a href="https://link.jianshu.com?t=http%3A%2F%2Fstore.company.com%3A81%2Fdir%2Fetc.html" rel="nofollow">http://store.company.com:81/dir/etc.html</a></td> 
   <td style="text-align:center">Failure</td> 
   <td style="text-align:center">Different port</td> 
  </tr> 
  <tr> 
   <td style="text-align:center"><a href="https://link.jianshu.com?t=http%3A%2F%2Fnews.company.com%2Fdir%2Fother.html" rel="nofollow">http://news.company.com/dir/other.html</a></td> 
   <td style="text-align:center">Failure</td> 
   <td style="text-align:center">Different host</td> 
  </tr> 
 </tbody> 
</table>

*  在浏览器中 <script><img><iframe><link> 等标签都可以跨域加载资源，而不受到同源策略的限制。这些带 “src” 属性的标签每次加载时，实际上是由浏览器发起了一次GET请求。不同于 XMLHttpRequest 的是，**通过 src 属性加载的资源，浏览器限制了 JavaScript 的权限，使其不能读、写返回内容**。
 *  XMLHttpRequest 可以访问同源资源，一开始不能跨域访问，但随着互联网发展，W3C制定了 XMLHttpRequest 跨域访问的标准（CORS），它需要通过目标与返回的HTTP头来授权是否可以跨域访问，因为**HTTP头对于 JavaScript 来说一般无法控制**
 *  但是浏览器的同源策略并非坚不可摧，如 IE8 的 Css 跨域漏洞：

www.a.com/test.html:
        <body>
        {}body{font-family:
        aaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbb
        </body>
    www.b.com/test2.html:
        <style>
        @import url("http://www.a.com/test.html")
        </style>
        <script>
            setTimeout(function(){
                var t = document.body.currentStyle.fontFamily;
                alert(t);
            },2000);
        </script>

*  上述代码中 [www.b.com/test2.html][www.b.com_test2.html] 中通过 @import 加载了 [www.a.com/test.html][www.a.com_test.html] 为 Css 渲染进入当前页面 DOM，同时通过 document.body.currentStyle.fontFamily 访问此内容，问题在 IE 的 CSS Parse 过程中，IE 将 fontFamily 后面的内容当做 value，而通过 <script> 等标签仅能加载资源，不能读写资源内容，而这个漏洞能够跨域读取页面内容，绕过了同源策略

## CORS ##

*  CORS 是 W3C 制定的“跨域资源共享”的标准，**它允许浏览器向跨源服务器发出 XMLHttpRequest 请求**，克服了 AJAX 只能同源的使用限制
 *  CORS 需要浏览器和服务器同时支持，目前所有浏览器都支持该功能，IE 浏览器不能低于 IE10，整个通信过程是浏览器自动完成的，不需要用户参与，CORS 与 AJAX 代码上没有差别，**浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息**
 *  因此实现 CORS 的通信关键是服务器，只要服务器实现了 CORS 接口，就可以跨源通信

### 两种请求 ###

*  浏览器将 CORS 请求分为两类：简单请求（Simple Request）和非简单请求（not-so-simple reuqest）
 *  只要满足以下两种条件就属于简单请求，否则属于非简单请求

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

### 简单请求 ###

*  对于简单请求，浏览器直接发出 CORS 请求，就是在头信息中添加一个 Origin 字段
 *  下面是浏览器在一个请求中添加 Origin 字段的例子

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 指定的域名在许可范围内，服务器的响应会多出几个头信息

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
 *  **Access-Control-Expose-Headers**：该字段可选，CORS 请求时，XMLHttpRequest 对象的 getResponseHeader() 方法只能拿到 6 个基本字段：ache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果想拿到其它字段就必须在 Access-Control-Expose-Headers 里面指定，上面例子指定了 getResponseHeader('FooBar') 可以返回 FooBar 字段的值

### withCredentials 属性 ###

*  CORS 请求默认不发送 Cookie 和 HTTP 认证信息，如果要把 Cookie 发送到服务器，一方面要服务器同意

Access-Control-Allow-Credentials = true

*  另一方面开发者必须在 AJAX 请求中打开 withCredentials 属性

var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

*  有些浏览器会默认一起发送 Cookie，这时可以显式关闭 withCredentials

xhr.withCredentials = false;

*  **如果要发送 Cookie，Access-Control-Allow-Origin 就不能为星号，必须指定明确的、与请求网页一致的域名，并且 Cookie 依然遵循同源策略**

### 非简单请求 ###

*  **非简单请求是那种对服务器有特殊需求的请求，比如 PUT 或 DELETE 方法，或者 Content-Type 字段的类型是 application/json**
 *  非简单请求的 CORS 请求会在正式通信之前增加一次 HTTP 请求查询，称为“预检”请求
 *  **浏览器会先询问服务器，当前网页是否在服务器的许可名单中**，以及可以使用那些 HTTP 动词和头字段信息，只有得到肯定大幅，浏览器才会发送 XMLHttpRequest 请求，否则报错
 *  下面是一段浏览器的 JS 脚本

var url = 'http://api.alice.com/cors';
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', url, true);
    xhr.setRequestHeader('X-Custom-Header', 'value');
    xhr.send();

*  上面代码 HTTP 请求方法是 PUT，并且发送一个自定义的头信息 X-Custom-Header
 *  浏览器发现，这是一个非简单请求，就自动发出一个“预检”请求，要求服务器确认，下面是一个“预检”请求的例子

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，表示来自哪个源
 *  除了 Origin 字段，还包括两个特殊字段
    
     *  **Access-Control-Request-Method**：必须，用来列出 CORS 请求用的 HTTP 方法，上例是 PUT
     *  **Access-Control-Request-Headers**：该字段是一个逗号分离的字符串，指定额外发送的头字段信息，上例是 X-Custom-Header

### 预检请求的回应 ###

*  服务器收到“预检”请求后检查 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 字段后确认允许跨源请求，就可以作出回应

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

*  上面例子中 **Access-Control-Allow-Origin** 字段表示 [http://api.bob.com][http_api.bob.com] 可以请求数据，该字段也可以为星号，表示同意任意跨源请求

Access-Control-Allow-Origin: *

*  如果浏览器否定了“预检”请求会返回一个正常的 HTTP 回应，但不包含 CORS 相关头信息，因此会触发一个错误，被 XMLHttpRequest 对象的 onerror 回调函数捕获
 *  服务器回应的其它 CORS 相关字段如下：

Access-Control-Allow-Methods: GET, POST, PUT  #表示支持的跨域请求方法
    Access-Control-Allow-Headers: X-Custom-Header  #表示服务器支持的所有头信息字段
    Access-Control-Allow-Credentials: true  #该字段与简单请求时相同
    Access-Control-Max-Age: 1728000  #指定本次预检请求的有效期，单位为秒，即在缓存该条回应期间，不用在发出另一条预检请求

[www.b.com_test2.html]: https://link.jianshu.com?t=http%3A%2F%2Fwww.b.com%2Ftest2.html
[www.a.com_test.html]: https://link.jianshu.com?t=http%3A%2F%2Fwww.a.com%2Ftest.html
[http_api.bob.com]: https://link.jianshu.com?t=http%3A%2F%2Fapi.bob.com