node.js - 如何使用 csurf 保护我的 React 应用程序 api 的安全？

Question

我正在尝试向我的 React 应用程序添加 csrf 保护，但始终收到错误“无效 token ”

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 secondaryPiece = req.csrfToken()。您可以按照您喜欢的任何方式将第二段数据放入服务器响应中:放入具有任意名称的另一个 cookie(除了第 1 步 cookie 已采用的 _csrf 名称)或放入您喜欢命名的 HTTP header 中。

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

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

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