我必须在React SPA中使用csrf保护吗？

Question

我使用React Single Page Application作为客户端或Create React App（CRA）。

在我的后端，我使用Node.js和Express。

要获取数据或存储我需要从客户端调用API到后端。

实际上我已经看到有几个中间件，如： - Express CSURF

但说实话，我不明白如何在每次请求时向客户端发送CSRF令牌。我已经尝试了几次，将CSRF插入cookie然后在客户端进行。但是当存储第一个请求或新cookie时，我得到错误Invalid CSRF Token。

即使我这样做了：

app.use(session({
    genid: function (req) {
        return uuidv4() // use UUIDs for session IDs
    },
    name:keys.session.name,
    secret: keys.session.secret,
    resave: false,
    saveUninitialized: true,
    rolling:true,
    cookie: { 
        secure: false,
        httpOnly: true,
        maxAge:keys.session.maxAge, // satu hari,
        sameSite:true,
     }

}));
app.use(passport.session());
app.use(cookieParser());
app.use(csrf({ cookie: false }));


app.use((req,res,next)=>{
     res.cookie('CSRF_token', req.csrfToken(), { sameSite: true });
})

这意味着CSRF_token cookie将更改每个请求。但我只是这样设置一次：axios.defaults.headers.common['csrf-token'] = csrf;和结果它仍然有效，这应该不起作用。

那么我需要CSRF吗？或者如何在反应SPA上配置正确的。

Answer 1

那么我需要CSRF吗？

如上所述：Am I under risk of CSRF attacks in a POST form that doesn't require the user to be logged in?我认为你应该仍然设置它。

至于为什么它不适合你，我认为这是因为标题名称。你可以查看CSURF checks by default。

默认值是一个函数，它按顺序从以下位置读取令牌：

• req.body._csrf - 通常由body-parser模块生成。
• req.query._csrf - 来自Express.js的内置函数，用于从URL查询字符串中读取。
• req.headers ['csrf-token'] - CSRF-Token HTTP请求头。
• req.headers ['xsrf-token'] - XSRF-Token HTTP请求头。
• req.headers ['x-csrf-token'] - X-CSRF-Token HTTP请求头。
• req.headers ['x-xsrf-token'] - X-XSRF-Token HTTP请求头。

通过CSURF检查，您有多种选择可供选择，并查看axios, it seems to have a couple options for setting xsrf cookie and header names。

...
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default

// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
...

例如，为了使用X-XSRF-TOKEN头文件密钥默认情况下附带axios，我在我的App.js文件中使用了以下方法：

componentDidMount() {
    axios.get(`/api/csrf`) // Send get request to get CSRF token once site is visited.
      .then(res => {
        axios.defaults.headers.post['X-XSRF-TOKEN'] = res.data; // Set it in header for the rest of the axios requests.
      })
  }

但是，您可以使用表单隐藏输入或任何其他您熟悉的方法。您可以阅读更多关于将它们放入cookie here的常见原因。

我不确定你的客户使用的是什么，但是如果你使用的是Redux，你可以查看here的帮助。如果它不起作用，您可以谷歌其他方法。