Node.js-csurf无效的csrf令牌

Question

我正在使用npm模块csurf生成令牌。首先，我从服务器获取令牌，然后将其用于/ register请求。当我用邮递员复制相同的步骤时，它似乎可以工作，但不幸的是，在应用程序中却没有。那里总是抛出令牌无效的错误消息

-服务器端---

csrfProtection.js

import csrf from 'csurf';

export default csrf({
  cookie: true
});

router.js

import csrfProtection from './../../config/csrfProtection'
router.get('/csrfToken', csrfProtection, async (req, res, next) => {
  return res.send(req.csrfToken());
});

router.post(
  '/register',
  validationHelper({ validation: registerUserValidation }),
  csrfProtection,
  async (req, res, next) => {
    return res.send('user registered');
  }
);

app.js

const app = express();

app.use(cookieParser());
app.use(
  cors()
);
app.use(compression());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

-客户端---

const token = await this.$axios.$get('/csrfToken')
// token has the value 1KFmMJVz-dspX9TJo8oRInPzgDA1VY28uqQw

    await this.$axios.$post(
      '/register',
      {
        name: 'test456',
        email: 'test@gmail.com',
        password: '123456789'
      },
      {
        headers: {
          'csrf-token': token
        }   
      }
    )

有人遇到过同样的问题吗？前端和后端托管在不同的域中。

Answer 1

您需要将其添加到app.js下的cookieParser中，如下所示：

app.use(cookieParser())
app.use(csrfProtection)

您已成功将CSRF令牌发送到/csrfToken中的前端，但是您的应用程序正在/post中生成了一个新令牌。

这里是相应文档的link。

Answer 2

最近解决了有关csrf令牌403的类似问题。在get csrf调用之后发生的每个发布请求都会生成一个新的CSRF令牌。

我发现这是一个CORS问题。我通过添加以下代码进行修复：

import cors from 'cors';
const allowedOrigins = ['http://localhost:3000', 'http://localhost'];
const corsoptions: cors.CorsOptions = {
  allowedHeaders: ["Origin", "X-Requested-With", "Cookie", "Content-Type", "Accept", "X-Access-Token", "Authorization"],
  credentials: true,
  methods: "GET,PATCH,POST,DELETE",
  origin: function (origin, callback) {
    // allow requests with no origin 
    // (like mobile apps or curl requests)
    if (!origin) return callback(null, true);
    if (allowedOrigins.indexOf(origin) === -1) {
      var msg = 'The CORS policy for this site does not ' +
        'allow access from the specified Origin.';
      return callback(new Error(msg), false);
    }
    return callback(null, true);
  },
  preflightContinue: false,
};

export const handleCors = (router: Router) =>
  router.use(cors(corsoptions));

请参阅cors软件包https://www.npmjs.com/package/cors"