如何使用csurf保护我的react app 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中间件searches。