什么是 CSRF
首先，让我们来了解一下什么是 CSRF（跨站请求伪造）。CSRF 是一种常见的网络攻击方式，也称为 One-Click Attack 或者 Session Riding。攻击者通过伪造合法用户的请求，以用户的身份在目标网站上执行操作。
由于 Web 应用程序通常使用 Cookie 或其他类似的身份验证令牌来标识已认证的用户，因此攻击者可以通过欺骗用户浏览器向 Web 应用程序发送伪造的 HTTP 请求来执行恶意操作，例如在用户不知情的情况下更改用户密码、转账、发布帖子等等。
如何防止 CSRF
为了防止这种攻击，我们可以在服务器端实现 CSRF 防御。常见的防御方式包括 Synchronizer Token Pattern、Double Submit Cookie 等。
其中 Synchronizer Token Pattern 的原理是在客户端和服务端都生成一个随机 token，客户端在发送请求时携带这个 token，服务端统一校验。如果两者不一致，请求将被拒绝。
而 Double Submit Cookie 的原理是在客户端生成一个随机 token，在 Cookie 中存储该 token 的值，同时将该值作为参数发送到服务器端。服务器端校验 Cookie 中存储的 token 是否与请求参数中的 token 值一致，如果一致则认为是合法请求，否则拒绝执行相应操作。
csrf-xhr npm 包介绍
但是，这些防御方式都需要我们手动编写代码并将其集成到自己的应用程序中。在实际开发过程中，往往会有使用第三方库的需求来解决这个问题。这时就需要用到 csrf-xhr npm 包。
csrf-xhr 是一个专门用于防范 CSRF 攻击的 npm 包，它内部采用 Synchronizer Token Pattern 的原理实现了 CSRF 防御。
csrf-xhr npm 包使用教程
安装
要使用 csrf-xhr，我们首先需要在项目中安装这个 npm 包：
npm install csrf-xhr
导入
安装好了之后，我们需要在项目中引入这个包：
const csrfXhr = require('csrf-xhr')或者，如果你使用 es modules，可以这样导入：
import csrfXhr from 'csrf-xhr'
使用方法
在项目中使用 csrf-xhr 确实很简单。我们只需要在发送每一个请求之前调用 csrfXhr.setCsrfToken() 方法来获取 token，并将其作为请求头（例如 X-CSRF-Token）携带到请求中即可。具体代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
------------------------- -
------- -------
-------- -
--------------- ----------------------
--
----- ----------------
---- -----
--
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------如上所示，我们通过调用请csrfXhr.getCsrfToken() 方法来获取 token 值，并将其放入请求头中。这样，当服务器接收到请求时，就可以通过校验 token 值来防范 CSRF 攻击。
示例
下面的示例代码展示了如何用 csrf-xhr 包发送一个保护用户信息的请求：
-- -------------------- ---- -------
----- ------- - -------------------
----------------------- -
------- ------
-------- -
--------------- ----------------------
-
--
-------------- -- ----------------
---------- -- ------------------
------------ -- ---------------------结论
通过使用 csrf-xhr，我们可以非常轻松地加强我们的应用程序对 CSRF 攻击的防御。可以说，它是一种非常简单且方便的解决方案，适合于需要加强 CSRF 防御的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574a881e8991b448ea1d6