如何使用 csurf 保护我的反应应用程序 api？答案

【问题标题】：How to secure my react app api with csurf?如何使用 csurf 保护我的反应应用程序 api？
【发布时间】：2020-04-20 04:56:00
【问题描述】：

我正在尝试向我的 react 应用程序添加 csrf 保护，但我一直收到错误 Invalid 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);

}

【问题讨论】：

标签： node.js reactjs express csrf

【解决方案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 默认为它。

【讨论】：

将令牌作为 cookie 从服务器发送到客户端是否比作为端点响应的主体更安全（必须为 httpOnly: false 否则客户端无法将其抓取到标头中） ?

【解决方案2】：

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

由于 cookie 命名不正确，我刚刚进行了几天的调试。确保将您的 cookie 命名为 XSRF-COOKIE（注意它使用 - 符号），因为我使用下划线 XSRF_COOKIE 错误地命名了我的 cookie，这让我好几天了。

【讨论】：