使用 NUXT、Axios、NEST 和 CSURF 进行 CSRF 保护

如何解决使用 NUXT、Axios、NEST 和 CSURF 进行 CSRF 保护

我已经在谷歌上搜索了一段时间，但仍然无法在我的 nestJS 应用和 Nuxt SSR 前端之间获得有效的 CSURF CSRF 保护。

目前我在 nest main.js 中有这个实现：

  app.use(cookieParser());
  app.use(csurf({ cookie: true }));
  app.use((req,res,next) => {
    const token = req.csrftoken();
    res.cookie('XSRF-TOKEN',token);
    next();
  });

我不确定这是正确的方法，但到目前为止我找到了这个解决方案。 token 变量正在更改每个请求。根据我的理解，req.cookie 将此令牌设置为名为 XSRF-TOKEN 的 cookie，它应该在我的客户端可用。

在我的 Nuxt 应用程序中，我创建了一个插件：

export default function ({ $axios,$cookies }) {
  $axios.onRequest(() => {
    const token = $cookies.get('XSRF-TOKEN')
    $axios.defaults.headers.common['x-xsrf-token'] = token
  })
}

这里有两种行为：

1. token 是从 cookie 中获取的，但是一旦发生这种情况，所有请求都会保持不变 - 当然我会收到 invalid csrf token 错误
2. 另一种情况是 token 为 undefined。

我的问题是如何在这些库之间实现安全的 csrf 保护？

附加信息： $cookies 来自库 cookie-universal-nuxt lib 我还在 axios 调用上设置了 withCredentials: true：

await this.$axios.patch(`endpoint`,{},{ withCredentials: true })