axios源码学习

axios源码学习重点如下图

一、 http拦截器的设计与实现

1. 请求拦截器：在请求发送前做的一些工作，例如 添加token

2. 响应拦截器：在接收服务器响应后的一些操作，例如 401处理

任务处理

1. 任务注册

2. 任务编排

3. 任务调度

二、http适配器的设计与实现

axios同时支持浏览器和node.js环境，浏览器通过xhrHttpRequest或fetchAPI来发送HTTP请求，node.js通过内置http或https模块请求。

axios支持自定义适配器，但默认的适配器完全够我们使用

默认适配器通过检查平台中特定对象来区分不同平台，然后导入不同的适配器。

// lib/defaults.js
var defaults = {
  adapter: getDefaultAdapter(),
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  //...
}

function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') { 
    // For browsers use XHR adapter
    adapter = require('./adapters/xhr');
  } else if (typeof process !== 'undefined' && 
    Object.prototype.toString.call(process) === '[object process]') {
    // For node use HTTP adapter
    adapter = require('./adapters/http');
  }
  return adapter;
}

三、csrf防御防御机制

1. 检查referer字段

http头部中有referer字段，在处理敏感数据请求时，referer字段需要和请求地址同一域名下。

但referer字段存在被篡改的风险

   2. 同步表单的CSRF校验

csrf攻击之所以能成功，是因为服务器无法区分是正常请求还是攻击请求。针对这个问题，我们要求所有用户请求携带一个csrf攻击者无法获取到的token。

同步表单的csrf校验就是返回页面时讲token渲染到页面上，在form表单提交的时候通 过隐藏域或者做为查询参数把csrf token提交到服务器。比如，在同步渲染页面时，在表单请求中添加一个_csrf的查询参数，这样用户在提交表单时会将csrf token提交上去。

<form method="POST" action="/upload?_csrf={{由服务端生成}}" enctype="multipart/form-data">
  用户名: <input name="name" />
  选择头像: <input name="file" type="file" />
  <button type="submit">提交</button>
</form>

   3. 双重cookie防御

将token设置在cookie中，在提交时通过请求头或者请求体带上cookie，提交到服务端，在进行校验。

axios中使用的是双重cookie防御机制

Axios 提供了 xsrfCookieName和xsrfHeaderName两个属性来分别设置 CSRF 的 Cookie 名称和 HTTP 请求头的名称，它们的默认值如下所示：

// lib/defaults.js
var defaults = {
  adapter: getDefaultAdapter(),

  // 省略部分代码
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
};