在 Web 开发过程中，由于浏览器的局限以及安全性问题，很多时候我们需要使用 csrf 防御方案来保证前端数据的安全性。而 npm 包 csurf 就是一个方便易用的 csrf 防御方案。
简介
csurf 是基于 express 的 csrf 防御中间件。它会为每个请求生成一个 csrf token，并将其保存在 cookie 中。在表单提交之前，需要从 cookie 中读取 csrf token，并将其作为表单域中的一个 hidden input。
这样做可以防止 csrf 攻击，因为攻击者无法获取到 cookie 中的 csrf token，并将其传递给目标页面的表单。
安装
在项目目录中运行以下命令来安装 csurf：
npm install csurf
使用
在使用 csurf 之前，需要先引入 express，并创建一个 express app：
const express = require('express');
const app = express();然后，需要引入 csurf 并配置中间件：
const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
app.use(csrfProtection);这里，我们将 csrf 中间件配置了一个选项 { cookie: true }，意思是将 csrf token 存储在 cookie 中，cookie 名称为 _csrf。
在需要添加 csrf token 的表单中，需要将 csrf token 作为一个隐藏域传递给表单：
<form action="/submit-form" method="post"> <input type="hidden" name="_csrf" value="<%= csrfToken %>"> <input type="text" name="username"> <input type="submit" value="submit"> </form>
这里，我们使用了模板引擎的语法来生成 csrf token，并将其传递给表单。
在服务器端，我们需要检查客户端传递的 csrf token 是否与 cookie 中的 csrf token 相同。如果不同，说明该请求可能是 csrf 攻击，需要拒绝该请求：
-- -------------------- ---- -------
------------------------ ----- ---- -- -
----- --------- - ----------------
----- --------------- - ---------------
-- ---------- --- ---------------- -
-- --------
- ---- -
-- -----
-
---这里我们使用了 req.csrfToken() 方法来获取服务器端生成的 csrf token，并将其与客户端传递的 csrf token 进行比较。
完整示例
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - -----------------
----- -------------- - ------ ------- ---- ---
---------------------------- --------- ----- ----
------------------------
------------- -------- -------
------------ ----- ---- -- -
----- --------- - ----------------
------------------- - --------- ---
---
------------------------ ----- ---- -- -
----- --------- - ----------------
----- --------------- - ---------------
-- ---------- --- ---------------- -
----- -------- - ------------------
---------------- ---------------
- ---- -
----------------- ---- ---------
-
---
---------------- -- -- -
------------------- -- ------- -- ---- -------
---总结
通过使用 csurf，我们很容易地为我们的项目添加 csrf 防御功能，提高了前端数据的安全性。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61684