Node.js中的CSRF令牌保护无效

Question

在bodyParser之后，我在我的app.js服务器端文件中有以下内容：

let dotEnv = require("dotenv");
dotEnv.load();
let express = require("express");
let app = express();
if (process.env.NODE_ENV === 'production') {
  app = require('./public/web/server').app;
}
let passport = require("passport");
let server = require("http").Server(app);
let io = require("socket.io").listen(server);
// load intial configuration
require("./startup/initial-configuration")(app, io);
require("./server/config/socket")(io);
require("./server/config/database")(app, process.env.NODE_ENV);
require("./server/authentication/passport.local")(passport);
require("./server/authentication/passport.impersonate");
require("./startup/initial-routes")(app);
if (process.env.NODE_ENV === 'production') {
  app.get('*.*', express.static('./public/web/browser', {
  maxAge: '1y'
}));
app.get('*', (req, res) => {
  res.render('index', {
   req,
   res
  }, (err, html) => {
    if (html) {
      res.send(html);
    } else {
      // console.error(err);
      res.send(err);
    }
   });
  });
 }
 require("./server/middleware/custom-middleware")(app);
 module.exports = { app: app, server: server };

正如您所看到的，我在app.js内加载了一个名为initial-configuration的文件，该文件的内容为：

const path = require("path");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const csurf = require("csurf");
const helmet = require("helmet");
const compression = require("compression");
const useragent = require("express-useragent");
const cors = require("cors");
const passport = require("passport");
const express = require("express");
const cookieMiddleware = require("../server/middleware/cookie-middleware");
const checkCSRFMiddleware = require("../server/middleware/checkCSRF-middleware");
const notificationModel = require("../server/model/notification/notification.model");
const logger = require("./logger");
const morgan = require("morgan");
module.exports = (app, io) => {
 app.set("case sensetive routing", true);
 if (process.env.NODE_ENV === "production") {
   app.enable("trust proxy");
 }
 app.use((req, res, next) => {
   res.io = io;
   res.header(
    "Access-Control-Allow-Headers",
    "X-CSRF-Token, Content-Type"
   );
  notificationModel.setIO(io);
  next();
 });

 let corsOption = {
   origin: true,
   methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
   credentials: true,
   exposedHeaders: ["x-auth-token"]
 };

 app.use(cors(corsOption));
 // app.use(logger('dev'));
 app.use(helmet());
 app.use(useragent.express());
 app.use(compression());
 app.use(bodyParser.json());
 app.use(
   bodyParser.urlencoded({
    extended: false
  })
 );
 app.use(cookieParser());
 app.use(cookieMiddleware);
 app.use(passport.initialize());
 app.use(require('csurf')({cookie: true}))
 // error handler
 app.use(function (err, req, res, next) {
  if (err.code !== 'EBADCSRFTOKEN') return next(err)
  // handle CSRF token errors here
  res.status(403)
  res.send('session has expired or form tampered with')
 })
 app.use(function (req, res, next) {
 res.cookie('XSRF-TOKEN', req.csrfToken())
 next()
})

// app.use(express.static(path.join(__dirname, "../public/web/browser")));
app.use(
 morgan("combined", {
   stream: logger.stream
 })
);
};

在Angular中，我只在app.module中导入了以下代码。

HttpClientXsrfModule.withOptions({
  cookieName: "XSRF-TOKEN",
  headerName: "X-CSRF-TOKEN"
}),

我的所有请求头都带有Cookie:_csrf=TmghRq3eWC-PxQfp6pvuHw07; XSRF-TOKEN=vMPrZZtA--BgtY1YVqDRXmi5A6RSbMNb61JA

但是我的所有POST请求都失败了，并且显示code: "EBADCSRFTOKEN"。

我应该在Angular端做些什么？ 我应该将其附加到表单数据中吗？

谢谢任何帮助。

以下是我的请求详细信息

- jones

---

你能分享一下你的Angular代码吗？它是如何提交数据的？我认为你的CSRF令牌没有正确地包含在其中。你还提到了请求头中有Cookie，你确定它不是响应头吗？ - Mavi Domates

@MaviDomates，我还没有对我的Angular post请求做任何事情，不知道应该怎么办。 - jones

Answer 1

在你的代码中，你使用了许多模块。为了隔离问题，我建议你将代码简化为最小版本，去掉所有不必要的内容以启用csrf。

这只是一个建议，在我的Angular 7应用程序中，我添加了以下内容（不需要更改cookiename和token，因为它们在Angular源代码中有默认值）：

HttpClientModule,
HttpClientXsrfModule.withOptions()

然后在我的服务器上（主文件app.js）使用Express 4添加了以下代码（按这个顺序）：

const csrf = require('csurf');
app.use(bodyParser.urlencoded({
  extended: false
}));
// then add cookie parser and csrf config
app.use(cookieParser());
app.use(csrf({
  cookie: {
    // here you can configure your cookie. Default values are ok, but I decided to be more explicit
    // http://expressjs.com/en/4x/api.html#req.cookies
    key: '_csrf',
    path: '/',
    httpOnly: false, // if you want you can use true here
    secure: false, // if you are using HTTPS I suggest true here
    signed: false, // I don't know if csurf supports signed cookies, so I used false
    // not mandatory, but if you want you can use sameSite: 'strict'
    // sameSite: 'strict', // https://www.owaspsafar.org/index.php/SameSite
    maxAge: 24 * 60 * 60 * 1000 // 24 hours
   }
}));
app.use((req, res, next) => {
  const csrfTokenToSendToFrontEnd = req.csrfToken();
  console.log('csrfTokenToSendToFrontEnd: ', csrfTokenToSendToFrontEnd);
  // this cookie must be XSRF-TOKEN, because already defined as default in Angular.
  res.cookie('XSRF-TOKEN', csrfTokenToSendToFrontEnd);
  next();
});

// here requires the api file with all your rest apis (not static paths)
const routesApi = require('./src/routes/index')(express, passport);
app.use('/api', routesApi);

最后，在文件结尾（即500中间件之前），我添加了以下代码来处理错误：

// error handler
app.use((err, req, res, next) => {
  if (err.code !== 'EBADCSRFTOKEN') {
    return next(err);
  }
  res.status(403).json({
    message: 'error'
  });
});

我只复制了相关代码。如果您有问题，请随时问我，我会在我的代码中再次检查是否有遗漏。

- Stefano Cappa

---

仍然存在同样的问题。我已经更新了我的问题并添加了更多细节。 - jones

如果在 CSRF 之前放置所有路由（API），它如何进行保护？ - jones

你是正确的。我从我的应用程序中复制了错误的 API（没有受保护）。我已经更新了代码。 - Stefano Cappa

今晚我会再次检查，看看是否有遗漏。不过应该没问题。就像在 Github 上 csurf 的官方示例一样。 - Stefano Cappa

现在似乎可以工作了，但我怎么确定它能正常工作呢？也就是说，我该如何测试它？当我在Postman中将“X-XSRF-TOKEN”设置为请求头时，请求失败了，但是在我的应用程序中，现在它正在工作。 - jones