如何使用 csurf 保护我的反应应用程序 api?

Question

我正在尝试将 csrf 保护添加到我的反应应用程序，但我收到错误 令牌一直无效

import bodyParser from 'body-parser';
import cookieSession from 'cookie-session';
import passport from 'passport';
import csrf from 'csurf'
import config from '../../config'
import AuthRoutes from "./routes/AuthRoutes";
/* Test only */
import cookieParser from 'cookie-parser';

const session = cookieSession({
maxAge:24 * 60 * 60 * 1000,
keys:[config.COOKIE_KEY],
name:'authentication',
});

export default app => {
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(session);
app.use(passport.initialize());
app.use(passport.session());
/* Test */
app.use(cookieParser());
app.use(csrf({ cookie: true }));
app.use(function (err, req, res, next) {
if (err.code !== 'EBADCSRFTOKEN') return next(err)
// handle CSRF token errors here
res.status(403)
res.send('form tampered with')
})
/*Passport Config*/
require('../../services');
/* Register, Login these are routes i want to protect */
AuthRoutes(app);
}

Answer 1

你需要：
1。在服务器上配置csrf库。这可确保库将发送附加到服务器响应的第一条数据。
2. 使用服务器上csrf库生成第二条数据并将其附加到服务器响应(例如，发送给客户端的表单.HTML(。完成此步骤后，服务器响应将携带两条 CSRF 数据。
3. 在客户端上，获取第二条数据并将其插入到您将要发送的请求中(例如，您将要提交的表格(。

步骤 1
到目前为止，仅完成了步骤 (1(。您要求csrf库将第一条数据作为 Cookie 发送。您可以使用更好的配置：

app.use(csrf({cookie: {
httpOnly: true,
}}));

它确保浏览器不允许客户端上的任何JS接触cookie内的第一条数据，这很好，因为任何脚本都没有合法的理由知道这个cookie中的内容。 稍后，在生产环境中和使用 HTTPS 时，您可以选择将secure: true添加到上述配置中，以使服务器拒绝通过不安全的连接发送此 cookie。

步骤 2
要获取第二条数据，请调用csrfToken()。为了方便起见，csrf中间件向Request对象添加了另一个属性，因此可以像这样调用它：const secondPiece = req.csrfToken()。您可以按照您喜欢的任何方式或方式将第二条数据放入服务器响应中：放入另一个具有任意名称的 cookie(步骤 1 cookie 已经采用的_csrf名称除外(或放入您喜欢的名称的 HTTP 标头中。

例如，此代码会将其放入另一个 cookie 中：

res.cookie('XSRF-TOKEN', req.csrfToken());

步骤 3
在客户端上编写JS以获取第二条数据，并将其放入预定义的位置/位置之一(在要发送到服务器的请求内(，csrf中间件默认在其中搜索它。

Answer 2

以防万一，任何解决方案都不起作用。

我只是因为不正确的 cookie 命名而导致了几天的调试。确保将您的 cookie 命名为XSRF-COOKIE(请注意它使用-符号(，因为我错误地使用下划线命名我的XSRF_COOKIE这让我的屁股咬了好几天。