我应该在哪里生成 CSRF 令牌？答案

【问题标题】：Where should I generate the CSRF token?我应该在哪里生成 CSRF 令牌？
【发布时间】：2021-02-27 06:16:54
【问题描述】：

我在我的 express 应用程序中使用 csurf 来处理 CSRF 令牌，但我不知道应该在哪里创建令牌。我无法使用登录路由，因为 req.csrfToken() 函数不可用。

app.use(csrf({ cookie: true }))    
app.post('/signin', function (req, res) {
  // Authentication ...

  res.cookie('XSRF-TOKEN', req.csrfToken()); // Not possible (post request)
})

我是否应该为此创建一条新路由，以便在每次用户打开我的网站前端时使用？

app.use(csrf({ cookie: true }))    
app.get('/csrf', function (req, res) {
  res.cookie('XSRF-TOKEN', req.csrfToken());
})

提前致谢！

编辑：我的前端（反应）与后端（快递服务器）是分开的

【问题讨论】：

标签： javascript csrf csrf-token

【解决方案1】：

有几种方法可以设置 CSRF Token：

渲染表单时可以使用它

JS：

var csrfProtection = csrf({ cookie: true })

app.get('/form', csrfProtection, function (req, res) {
  // pass the csrfToken to the view
  res.render('send', { csrfToken: req.csrfToken() })
});

HTML

 <input type="hidden" name="_csrf" value="{{csrfToken}}">

您可以将它用作所有路由的 cookie。推荐用于单页应用程序：

app.all('*', function (req, res) {
  res.cookie('XSRF-TOKEN', req.csrfToken())
  res.render('index')
})

如果您有单独的后端和前端，您可以使用如下中间件：

JS：

app.use(express.csrf());
app.use(function(req, res, next) {
  res.locals._csrf = req.csrfToken();
  next();
});

HTML：

input(type='hidden', name='_csrf', value=_csrf)

【讨论】：

我有一个单独的前端（react）和后端（nodejs，express），所以我的表单不使用res.render()。我需要某种方式将 CSRF 令牌从我的 express 服务器获取到前端 react 应用程序。

【解决方案2】：

我最终使用了以下代码：

快递服务器：

app.use(cookieParser());
app.use(csrf({ cookie: true }));
app.get('/csrf', (req, res, next) => {
  res.send({'csrf_token':  req.csrfToken()});
});

React 中的应用组件：

useEffect(async () => {
  try {
    const res = await axios.get('http://api.myserver.com/csrf', { withCredentials: true });
    const csrfToken = (await axios.get('http://api.myserver.com/csrf')).data.csrf_token;
    // save csrfToken to redux store and include it in every request (-> axios interceptor)
  } catch (err) {
    //...
  }
}, [])

【讨论】：