【安全】899- 前端安全之同源策略、CSRF 和 CORS

川长思鸟来 2022-10-22 10:57 15阅读 0赞

![bb14ac3c3bea2750ab9d4bc9d365f30f.png][]

本文主要涉及三个关键词：

*  同源策略（Same-origin policy，简称 SOP）
 *  跨站请求伪造（Cross-site request forgery，简称 CSRF）
 *  跨域资源共享（Cross-Origin Resource Sharing，简称 CORS）

## 同源策略 SOP ##

### 同源 ###

先解释何为同源：协议、域名、端口都一样，就是同源。

<table> 
 <thead> 
  <tr> 
   <th>url</th> 
   <th>同源</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>https://niconico.com</td> 
   <td>基准</td> 
  </tr> 
  <tr> 
   <td>https://niconico.com/spirit</td> 
   <td>o</td> 
  </tr> 
  <tr> 
   <td>https://sub.niconico.com/spirit</td> 
   <td>x</td> 
  </tr> 
  <tr> 
   <td>http://niconico.com/spirit</td> 
   <td>x</td> 
  </tr> 
  <tr> 
   <td>https://niconico.com:8080/spirit</td> 
   <td>x</td> 
  </tr> 
 </tbody> 
</table>

### 限制 ###

你之所以会遇到 **跨域问题**，正是因为 SOP 的各种限制。但是具体来说限制了什么呢？

如果你说 SOP 就是“限制非同源资源的获取”，这不对，最简单的例子是引用图片、css、js 文件等资源的时候就允许跨域。

如果你说 SOP 就是“禁止跨域请求”，这也不对，本质上 SOP 并不是禁止跨域请求，而是在请求后拦截了请求的回应。

其实表面上 SOP 分两种情况：

*  可以正常引用 iframe、图片等各种资源，**但是**限制对其内容进行操作
 *  直接限制 ajax 请求，准确来说是**限制操作 ajax 响应结果**，**这会引起后面说到的 CSRF**

但是，本质上这两条是一样的：总之，对于非同源的资源，浏览器可以“直接使用”，但是程序员和用户不可以对这些数据进行操作，杜绝某些居心不良的行为。这就是现代安全浏览器对用户的保护之一。

下面是 3 个在实际应用中会遇到的例子：

*  使用 ajax 请求其他跨域 API，最常见的情况，前端新手噩梦
 *  iframe 与父页面交流（如 DOM 或变量的获取），出现率比较低，而且解决方法也好懂
 *  对跨域图片（例如来源于 `<img>` ）进行操作，在 canvas 操作图片的时候会遇到这个问题

如果没有了 SOP：

*  iframe 里的机密信息被肆意读取
 *  更加肆意地进行 CSRF
 *  接口被第三方滥用

### 绕过跨域 ###

SOP 虽然让用户更安全，同时也会对程序员带来一定程度的麻烦，因为有时候业务上就是有跨域的需求。绕过跨域的方案由于篇幅所限，并且网上也很多相关文章，所以不在这里展开解决跨域的方案，只给出几个关键词：

对于 ajax

*  使用 JSONP
 *  后端进行 CORS 配置
 *  后端反向代理
 *  使用 WebSocket

对于 iframe

*  使用 location.hash 或 window.name 进行信息交流
 *  使用 postMessage

## 跨站请求伪造 CSRF ##

### 简述 ###

CSRF（Cross-site request forgery）跨站请求伪造，是一种常见的攻击方式。是指 A 网站正常登陆后，cookie 正常保存登录信息，其他网站 B 通过某种方式调用 A 网站接口进行操作，A 的接口会在请求时会自动带上 cookie。

上面说了，SOP 可以通过 html 标签加载资源，而且 SOP 不阻止接口请求而是拦截请求结果，CSRF 恰恰占了这两个便宜。

对于 GET 请求，直接放到 `<img>` 就能神不知鬼不觉地请求跨域接口。

对于 POST 请求，很多例子都使用 form 提交：

<form action="<nowiki>http://bank.com/transfer.do</nowiki>" method="POST">
      <input type="hidden" name="acct" value="MARIA" />
      <input type="hidden" name="amount" value="100000" />
      <input type="submit" value="View my pictures" />
    </form>

**所以 SOP 不能作为防范 CSRF 的方法**。

回顾 SOP 的限制，这两个例子都是直接用 html 标签发起请求，而浏览器允许这么做，归根到底就是因为**你无法用 js 直接操作获得的结果。**

### SOP 与 ajax ###

对于 ajax 请求，在获得数据之后你能肆意进行 js 操作。这时候虽然同源策略会阻止响应，但依然会发出请求。因为**执行响应拦截的是浏览器**而不是后端程序。事实上你的**请求已经发到服务器**并返回了结果，但是迫于安全策略，浏览器不允许你**继续进行 js 操作**，所以报出你熟悉的 `blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`。

**所以再强调一次，同源策略不能作为防范 CSRF 的方法**。

不过**可以防范 CSRF 的例外**还是有的，浏览器并不是让所有请求都发送成功，上述情况仅限于**简单请求**，相关知识会在下面 CORS 一节详细解释。

### CSRF 对策 ###

SOP 被 CSRF 占了便宜，那真的是一无是处吗？

不是！是否记得 SOP 限制了 cookie 的命名区域，虽然请求会自动带上 cookies，但是攻击者无论如何还是无法**直接获取 cookie 的内容本身**。

所以应对 CSRF 有这样的思路：就是前后端分离常用的鉴权方法，使用 token 鉴权，并且不把 token 存放在 cookie，请求时在请求头上手动加上。

另一个方法是：cookie 里的东西，在发起请求时**通过 query、body 或者 header 带上**。请求到达服务器，那就不核对 cookie 传送的信息，只看自定义字段就好，如果正确，那一定是能看到 cookie 的本域发送的请求，CSRF 则做不到这一点。（这个方法用于前后端分离，后端渲染则可以直接写入到 dom 中）

示例代码如下：

var csrftoken = Cookies.get('csrfToken')
    
    function csrfSafeMethod(method) {
      // these HTTP methods do not require CSRF protection
      return /^(GET|HEAD|OPTIONS|TRACE)$/.test(method)
    }
    $.ajaxSetup({
      beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader('x-csrf-token', csrftoken)
        }
      },
    })

## 跨域资源共享 CORS ##

跨域是浏览器限制，跨域资源共享（Cross-origin resource sharing）也是服务器与浏览器协调的结果。

如果服务器设置了 CORS 相关配置，在返回浏览器的请求头会加上 `Access-Control-Allow-Origin`，浏览器看到这个字段的值与当前的源匹配，就会解锁跨域限制。

HTTP/1.1 200 OK
    Date: Sun, 24 Apr 2016 12:43:39 GMT
    Server: Apache
    Access-Control-Allow-Origin: http://www.acceptmeplease.com
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Content-Type: application/xml
    Content-Length: 423

对于 CORS，请求分两种。

### 简单请求 ###

*  请求方法使用 GET、POST 或 HEAD
 *  Content-Type 设为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain

符合上面两个条件的都为 CORS 简单请求。简单请求都会直接发到服务器，会造成 CSRF。

### 预检请求 ###

不符合简单请求要求的请求都需要先发送预检请求（Preflight Request）。浏览器会在真正请求前发送 OPTION 方法的请求向服务器询问当前源是否符合 CORS 目标，验证通过后才会发送正式请求。

例如**使用 application/json 传参的 POST 请求**就是非简单请求，会在预检中被拦截。

再例如使用 PUT 方法请求，也会发送预检请求。

上面提到的**可以防范 CSRF 的例外**，就是指预检请求。即使跨域成功请求预检，但真正请求并不能发出去，这就保证了 CSRF 无法成功。

### CORS 与 cookie ###

与同域不同，用于跨域的 CORS 请求默认不发送 Cookie 和 HTTP 认证信息，前后端都要在配置中设定请求时带上 cookie。

这就是为什么在进行 CORS 请求时 axios 需要设置 `withCredentials: true`。

下面是 node.js 的后台 koa 框架的 CORS 设置：

/**
     * CORS middleware
     *
     * @param {Object} [options]
     *  - {String|Function(ctx)} origin `Access-Control-Allow-Origin`, default is request Origin header
     *  - {String|Array} allowMethods `Access-Control-Allow-Methods`, default is 'GET,HEAD,PUT,POST,DELETE,PATCH'
     *  - {String|Array} exposeHeaders `Access-Control-Expose-Headers`
     *  - {String|Array} allowHeaders `Access-Control-Allow-Headers`
     *  - {String|Number} maxAge `Access-Control-Max-Age` in seconds
     *  - {Boolean} credentials `Access-Control-Allow-Credentials`
     *  - {Boolean} keepHeadersOnError Add set headers to `err.header` if an error is thrown
     * @return {Function} cors middleware
     * @api public
     */

顺带一提，`Access-Control-Allow-Credentials` 设为 `true` 时，`Access-Control-Allow-Origin` 强制不能设为 `*`，为了安全，也是挺麻烦。

![ba52849cfdc9c370e493ec058a5f0cee.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![ece46be7af950ea15ea46bc5d1acc9d2.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[bb14ac3c3bea2750ab9d4bc9d365f30f.png]: /images/20221022/95c7742172f74c50b0ce7d5bc0790f7b.png
[ba52849cfdc9c370e493ec058a5f0cee.gif]: /images/20221022/58b6717ea68a4eb19e09a8bd76ab74e7.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[ece46be7af950ea15ea46bc5d1acc9d2.gif]: /images/20221022/7ca7f942ad7f4f2298fb8b1e82e5f690.png