使用Typescript重构axios(二十四)——防御XSRF攻击
0. 系列文章
1.使用Typescript重构axios(一)——写在最前面
2.使用Typescript重构axios(二)——项目起手,跑通流程
3.使用Typescript重构axios(三)——实现基础功能:处理get请求url参数
4.使用Typescript重构axios(四)——实现基础功能:处理post请求参数
5.使用Typescript重构axios(五)——实现基础功能:处理请求的header
6.使用Typescript重构axios(六)——实现基础功能:获取响应数据
7.使用Typescript重构axios(七)——实现基础功能:处理响应header
8.使用Typescript重构axios(八)——实现基础功能:处理响应data
9.使用Typescript重构axios(九)——异常处理:基础版
10.使用Typescript重构axios(十)——异常处理:增强版
11.使用Typescript重构axios(十一)——接口扩展
12.使用Typescript重构axios(十二)——增加参数
13.使用Typescript重构axios(十三)——让响应数据支持泛型
14.使用Typescript重构axios(十四)——实现拦截器
15.使用Typescript重构axios(十五)——默认配置
16.使用Typescript重构axios(十六)——请求和响应数据配置化
17.使用Typescript重构axios(十七)——增加axios.create
18.使用Typescript重构axios(十八)——请求取消功能:总体思路
19.使用Typescript重构axios(十九)——请求取消功能:实现第二种使用方式
20.使用Typescript重构axios(二十)——请求取消功能:实现第一种使用方式
21.使用Typescript重构axios(二十一)——请求取消功能:添加axios.isCancel接口
22.使用Typescript重构axios(二十二)——请求取消功能:收尾
23.使用Typescript重构axios(二十三)——添加withCredentials属性
24.使用Typescript重构axios(二十四)——防御XSRF攻击
25.使用Typescript重构axios(二十五)——文件上传下载进度监控
26.使用Typescript重构axios(二十六)——添加HTTP授权auth属性
27.使用Typescript重构axios(二十七)——添加请求状态码合法性校验
28.使用Typescript重构axios(二十八)——自定义序列化请求参数
29.使用Typescript重构axios(二十九)——添加baseURL
30.使用Typescript重构axios(三十)——添加axios.getUri方法
31.使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法
32.使用Typescript重构axios(三十二)——写在最后面(总结)
1. 前言
XSRF,即跨站请求伪造,它是前端常见的一种攻击方式,关于它的攻击原理以及一些常用的防范措施可以猛戳这里查看,在这里我们主要介绍一种常用的防范措施,那就是在客户端与服务端首次登录确认身份成功后,服务端会颁发给客户端一个身份认证令牌,即token
,客户端将其存储在cookie
中,然后要求客户端以后每次请求都要携带此token
,客户端往往会把这个toekn
添加到请求的 headers
中,服务端接收到请求后,先从从请求 headers
中读取这个 token
,然后验证该token
是否合法,如果合法则进行下一步操作,如果不合法,则直接拒绝服务。服务器端要求每次请求都包含一个 token
,这个 token
不在前端生成,而是在我们每次访问站点的时候生成,并通过 set-cookie
的方式种到客户端,然后客户端发送请求的时候,从 cookie
中对应的字段读取出 token
,然后添加到请求 headers
中。这样服务端就可以从请求 headers
中读取这个 token
并验证,由于这个 token
是很难伪造的,所以就能区分这个请求是否是用户正常发起的。
官方axios
针对该防范措施已经为我们做好了一些基础工作,官方axios
在默认请求配置对象中为我们提供了 xsrfCookieName
和 xsrfHeaderName
这两个属性,其中 xsrfCookieName
表示存储 token
的 cookie
名称,xsrfHeaderName
表示请求 headers
中 token
对应的 header
名称。然后每次发送请求的时候,会自动从 cookie
中读取对应的 token
值,然后将其添加到请求 headers
中。
接下来,我们也要为我们实现的axios
添加该功能。
2. 思路分析
要实现跟官方axios
一样的功能,首先我们先来分解一下功能,梳理一下实现的思路:
- 首先我们需要给请求配置对象
config
上添加xsrfCookieName
和xsrfHeaderName
这两个属性的接口,并且将其写入默认请求配置对象中; - 因为跨站请求伪造是由于进行了跨域请求才有了被攻击的可能,而如果是同域请求那就不存在这个问题,所以我们需要先判断该请求是否跨域;
- 由于上文所说的防范措施中需要携带
cookie
,所以我们还要判断上篇文章中添加的withCredentials
是否为true
,因为该属性表示请求是否允许携带cookie
,如果不允许携带,那就没法防御了; - 如果上面两个判断都成功,则从
cookie
中根据xsrfCookieName
来获取到token
值; - 获取到以后,将
token
值添加到请求headers
中,headers
中的属性名叫xsrfHeaderName
的属性值;
OK,以上就是实现的整体思路,下面,我们就按照思路一步一步实现该功能。
3. 向请求配置对象添加属性
请求配置对象config
中添加 xsrfCookieName
和 xsrfHeaderName
这两个属性之前,我们需要先在src/types/index.ts
中的配置对象的接口类型定义AxiosRequestConfig
上添加该属性的定义,如下:
export interface AxiosRequestConfig {
// 新增
xsrfCookieName?: string;
xsrfHeaderName?: string
}
添加好属性接口后,我们还要给默认请求配置对象中添加这两个属性,并且属性的默认值跟官方axios
保持一直,如下:
const defaults: AxiosRequestConfig = {
// 新增
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
};
4. 判断请求是否跨域
判断请求是否跨域,即判断当前页面的url
与请求的url
是否同源,所谓同源,即两者的域名,协议,端口均相同,如有一个不同即为跨域,官方axios
对于判断是否跨域使用了一个很巧妙的办法,它通过创建一个a
标签的 DOM
,然后设置该a标签的
href属性为我们请求的的
url,然后这样就可以获取到该
DOM的
protocol、
host、
port。再把当前页面的
url也都通过这种方式获取,然后对比它们的
protocol 、
host以及
port` 是否都相同,进而判断出请求是否跨域。那么接下来,我们也使用这种方法来判断请求是否跨域。
我们在src/helpers
目录下创建isURLSameOrigin.ts
文件,在该文件内创建isURLSameOrigin
方法,用来判断请求是否跨域,如下:
interface URLOrigin {
protocol: string;
host: string;
port: string;
}
export default function isURLSameOrigin(requestURL: string): boolean {
let urlParsingNode = document.createElement("a");
// 1.先获取当前页面地址的协议、域名、端口
const currentOrigin = resolveURL(window.location.href);
// 2.再获取请求url的协议、域名、端口
const parsedOrigin = resolveURL(requestURL);
// 3.最后比较三者是否相同
return (
parsedOrigin.protocol === currentOrigin.protocol &&
parsedOrigin.host === currentOrigin.host &&
parsedOrigin.port === currentOrigin.port
);
// 创建一个可以通过url获取协议、域名、端口的函数
function resolveURL(url: string): URLOrigin {
urlParsingNode.setAttribute("href", url);
return {
protocol: urlParsingNode.protocol
? urlParsingNode.protocol.replace(/:$/, "")
: "",
host: urlParsingNode.host,
port: urlParsingNode.port
};
}
}
代码很简单,具体的细节也已经写进注释了。
判断完请求是否跨域,还要判断该请求的withCredentials
属性是否为 true
,这个就比较好判断了,直接获取请求配置对象config
里的withCredentials
属性再判断就好了,就不细说了,接下来,如果这两个判断都成功,那么就需要从cookie
中根据xsrfCookieName
属性的属性值作为token
的键来获取到token
的值;
5. 从cookie中获取token值
如果上面两个判断都成功,那么我们就需要根据请求配置对象中xsrfCookieName
属性的属性值作为键名从cookie
中来获取token
的值,由于浏览器对cookie
的操作不是很友好,所以我们先封装一个从cookie
中根据键名来获取值的辅助函数,我们在src/helpers
目录下创建cookies.ts
文件,在该文件中实现该辅助函数,如下:
const cookie = {
read(name: string): string | null {
const match = document.cookie.match(
new RegExp("(^|;\\s*)(" + name + ")=([^;]*)")
);
return match ? decodeURIComponent(match[3]) : null;
}
};
export default cookie;
这个辅助函数实现过程很简单,就是在cookie
中通过正则把传入的键名对应的值获取到。
有了这个辅助函数后,我们只需调用cookie.read(xsrfCookieName)
就可以获取到token
值了,获取到token
值以后把它添加到请求headers
中,headers
中的属性名叫xsrfHeaderName
的属性值。
6. 完整逻辑
分解步骤已经全部实现好了,接下来就需要将所有的分解步骤按照逻辑组合在一起,首先,我们需要明确这一系列都是在发请求之前完成的,而且我们在这里为headers
增加了东西,所以我们需要把这段逻辑写在处理headers
之前,我们在src/core/xhr.ts
中添加如下逻辑:
const {
// 新增
xsrfCookieName,
xsrfHeaderName
} = config;
let xsrfValue =
(withCredentials || isURLSameOrigin(url!)) && xsrfCookieName
? cookies.read(xsrfCookieName)
: undefined;
if (xsrfValue) {
headers[xsrfHeaderName!] = xsrfValue;
}
OK,到此,我们就已经按照思路分析中将所有功能实现完毕了,接下来,我们就编写demo
来测试效果如何。
7. demo编写
在 examples
目录下创建 defendXSRF
目录,在 defendXSRF
目录下创建 index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>defendXSRF demo</title>
</head>
<body>
<script src="/__build__/defendXSRF.js"></script>
</body>
</html>
接着再创建 app.ts
作为入口文件:
import axios from "../../src/axios";
axios
.get("/api/defendXSRF", {
xsrfCookieName: "XSRF-NLRX",
xsrfHeaderName: "X-XSRF-NLRX",
withCredentials: true
})
.then(res => {
console.log(res);
});
接着在 server/server.js
添加新的接口路由:
// 防御XSRF
router.get("/api/defendXSRF", function(req, res) {
res.cookie("XSRF-NLRX", "NLRX");
res.json(req.cookies);
});
在本demo
中,我们为请求配置了xsrfCookieName
、xsrfHeaderName
以及withCredentials
,并且在服务端给客户端种了 key
为 XSRF-NLRX
,值为 NLRX
的 cookie
,作为 xsrf
的 token
值。然后我们在前端发送请求的时候,就能从 cookie 中读出 key
为 XSRF-NLRX
的值,然后把它添加到 key
为 X-XSRF-NLRX
的请求 headers
中。
最后在根目录下的index.html
中加上启动该demo
的入口:
<li><a href="examples/defendXSRF">defendXSRF</a></li>
OK,我们在命令行中执行:
# 同时开启客户端和服务端
npm run server | npm start
接着我们打开 chrome
浏览器,访问 http://localhost:8000/ 即可访问我们的 demo
了,我们点击 defendXSRF
,通过F12
的 network
部分我们可以看到:请求已经正常发出,并且在请求的头部有我们添加的token
。
OK,以上就是为axios
添加防御XSRF
攻击的功能。
(完)
使用Typescript重构axios(二十四)——防御XSRF攻击的更多相关文章
- 使用Typescript重构axios(二十)——请求取消功能:实现第一种使用方式
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十二)——请求取消功能:收尾
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十五)——文件上传下载进度监控
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十六)——添加HTTP授权auth属性
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十八)——自定义序列化请求参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二十九)——添加baseURL
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(三十二)——写在最后面(总结)
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 使用Typescript重构axios(二)——项目起手,跑通流程
0.系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三)- ...
- 使用Typescript重构axios(二十一)——请求取消功能:添加axios.isCancel接口
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
随机推荐
- Android 捕捉app系统中未处理的异常
一:为什么要处理? 其实我们都知道,在开发过程中,自己的app系统或许有许多隐藏的异常,自己没有捕捉到,那么关于异常的捕捉,这是相当重要的,如果系统发生崩溃,那么至少也可以让系统挂在系统之内,不会发现 ...
- 《完美解决系列》Android5.0以上 Implicit intents with startService are not safe
在Android6.0上,使用了以下代码: Intent intent = new Intent(); intent.setAction("xxx.server"); bindSe ...
- 解决MVC中Model上的特性在EF框架刷新时清空的问题
MVC中关于前端数据的效验一般都是通过在Model中相关的类上打上特性来实现. 但是在我们数据库发生改变,EF框架需要刷新时会把我们在Model上的特性全部清除,这样的话,我们前端的验证就会失效. 因 ...
- python-setup模块
本地打包,setup安装 一.distutils 使用:distutils 进行打包,步骤如下,以单一文件为例. 1.创建文件 在同一目录下.写一个foo.py文件: #-*- coding:utf- ...
- Python 3.8.0 正式版发布,新特性初体验
北京时间 10 月 15 日,Python 官方发布了 3.8.0 正式版,该版本较 3.7 版本再次带来了多个非常实用的新特性. 赋值表达式 PEP 572: Assignment Expressi ...
- golang初探与命令源码分析
前段时间有群友在群里问一个go语言的问题: 就是有一个main.go的main函数里调用了另一个demo.go里的hello()函数.其中main.go和hello.go同属于main包.但是在mai ...
- Msfvenom命令总结大全
1. –p (- -payload-options) 添加载荷payload. 载荷这个东西比较多,这个软件就是根据对应的载荷payload生成对应平台下的后门,所以只有选对payload,再填 ...
- [网络流 24 题] luoguP2756 飞行员配对方案问题
[返回网络流 24 题索引] 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的 222 名飞行员,其中 111 名是英国飞行员,另 ...
- TCP Traffic Analyzer
TCP Traffic Analyzer 工具yahoo 发布的一款开源网络分析工具,可以分析网络应用在服务器端与客户端之间的运行状态Yconalyzer保持与tcpdump兼容,两者生成的抓取文件能 ...
- 浅谈爬虫 《一》 ===python
浅谈爬虫 <一> ===python ‘’正文之前先啰嗦一下,准确来说,在下还只是一个刚入门IT世界的菜鸟,工作近两年了,之前做前端的时候就想写博客来着,现在都转做python了,如果还 ...