NestJS 的 csrf 令牌无效

Question

我想用 NestJS 和 Quasar 实现 Csrf 保护。 但我想我误解了一些东西...... 顺便说一句，我不做 SSR，所以我不会将表单从后面发送到视图。

这是 NestJs 后端代码：

    async function bootstrap() {
  const PORT = process.env.PORT;
  const app = await NestFactory.create(AppModule, {
    cors: true,
    bodyParser: false,
  });
  console.log(`your App is listening on port ${PORT}`);

  // Added Cookie-parser to user csurf packages
  // Prevent CSRF attack
  app.use(cookieParser());
  app.use(csurf({ cookie: true }));

  await app.listen(PORT);
}
bootstrap();

所以我只使用 CookieParser 和 csurf 包。 在我的登录页面上，我调用“csrf 端点”只是为了将 cookie 发送到视图，并通过 post 调用（登录）将其发送回来。 我仍然收到“无效的 csrf 令牌”和 CORS 错误，但不知道为什么......（请参见下面的屏幕），有什么建议可以让它发挥作用吗？

当我尝试登录时，浏览器出现错误：

后端错误：

相同如果我因失眠而尝试请求，则会出错。 我认为 CSRF 令牌附加到“网络浏览器”以通过嵌套请求返回后端，那么为什么我仍然收到此错误？ Insomnia 会根据正确的请求自动发送 cookie，因此令牌应该返回到后端。 有什么想法吗？ 问候

编辑： 多次阅读文档后，似乎CSRF保护仅适用于SSR？无需使用 SPA 添加 csrf 安全性？任何人都可以确认吗？

编辑：这是另一项工作：

这里的目的是在登录之前发送请求以获取 csrf 令牌，我可以将其放入 cookie 中以便在使用 POST 方法登录时重新发送。

这是我的端点：

import { Controller, Get, Req, Res, HttpCode, Query } from "@nestjs/common";

@Controller("csrf")
export class SecurityController {
  @Get("")
  @HttpCode(200)
  async getNewToken(@Req() req, @Res() res) {
    const csrfToken = req.csrfToken();

    res.send({ csrfToken });
  }
}

这是我在 main.ts 文件中所做的事情（我将在下面解释）：

async function bootstrap() {
  const PORT = process.env.PORT;
  const app = await NestFactory.create(AppModule, {
    cors: {
      origin: "*",
      methods: ["GET,HEAD,OPTIONS,POST,PUT"],
      allowedHeaders: [
        "Content-Type",
        "X-CSRF-TOKEN",
        "access-control-allow-methods",
        "Access-Control-Allow-Origin",
        "access-control-allow-credentials",
        "access-control-allow-headers",
      ],
      credentials: true,
    },
    bodyParser: false,
  });
  app.use(cookieParser());
  app.use(csurf({ cookie: true }));
  console.log(`your App is listening on port ${PORT}`);

  await app.listen(PORT);
}
bootstrap();

这里是我的 VueJS 前端中请求的 axiosInstance 拦截器：

axiosInstance.interceptors.request.use(
(req) => {
  const token = Cookies.get('my_cookie')
  if (token) {
    req.headers.common['Authorization'] = 'Bearer ' + token.access_token
  }

  req.headers['Access-Control-Allow-Origin'] = '*'
  req.headers['Access-Control-Allow-Credentials'] = 'true'
  req.headers['Access-Control-Allow-Methods'] = 'GET,HEAD,OPTIONS,POST,PUT'
  req.headers['Access-Control-Allow-Headers'] =
    'access-control-allow-credentials,access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type,x-csrf-token'

  const csrfToken = Cookies.get('X-CSRF-TOKEN')
  if (csrfToken) {
    req.headers['X-CSRF-TOKEN'] = csrfToken
    console.log(req)
  }

  return req
},
(err) => {
  console.log(err)
},

这里的回复也是如此：

axiosInstance.interceptors.response.use(
(response) => {
  if (response?.data?.csrfToken) {
    const {
      data: { csrfToken },
    } = response
    Cookies.set('X-CSRF-TOKEN', csrfToken)
  }

  return response
},

在我的登录名中我调用我的登录组件的已安装函数：

 async mounted() {
const result = await securityService.getCsrf()

}，

现在解释一下：

正如我所说，我不是在构建 SSR 项目，这就是为什么我想将令牌发送到经典的 axios 响应并将其存储在一个 Cookie（这部分是为了测试我听说将 csrf 令牌存储到经典 cookie 中不是正确的方法。） 对于下一个请求，我获取 csrf 令牌并将其“附加”到请求的标头中，使我的标头成为“自定义”。 这是一个问题，我不知道如何使自定义标头与 NestJS 和 CORS 一起使用，这就是为什么我在 NestJS 中尝试使用 CORS 选项进行很多操作，并在请求转到后端之前编写一些自定义标头，但没有成功，我收到相同的错误消息：

我对这个问题有点困惑，CORS/CSRF 对于 spa 来说是一件大事，我的问题仍然相同，使用 CORS 和 SameSite cookie 属性，并且我的 api 位于我前端的子域中，是否真的有必要制作反 csrf 模式？

顺便说一句，我怎样才能使我的自定义标头正常工作以及为什么 CORS 对我说没有“Access-Control-Allow-Origin”标头，但有：

Answer 1

尝试生成 csrf 令牌并传递到每个请愿书

// main.ts - from NestJs - Backend
// after app.use(csurf({ cookie: true }))

app.use((req: any, res: any, next: any) => {
  const token = req.csrfToken()
  res.cookie("XSRF-TOKEN", token)
  res.locals.csrfToken = token
  next()
})

的前面： https:// github.com/nestjs/nest/issues/6552#issuecomment-1175270849