See update below...
My React front-end is able to call upon my Node back-end API. However, when an external site calls upon my API, it receives an error. If I comment out the CSRF part (the 5 lines) of the setup, then 3rd party services ARE able to call upon my API.
const express = require("express");
const cookieParser = require("cookie-parser");
const csurf = require("csurf");
var cors = require("cors");
var corsOptions = {
origin: process.env.CORS_ORIGIN_URL.split(","),
credentials: true,
exposedHeaders: ["set-cookie"],
};
app.use(cors(corsOptions));
app.use(
cookieParser(process.env.COOKIE_SECRET, {
sameSite: true,
httpOnly: true,
secure: process.env.NODE_ENV === "production",
maxAge: process.env.COOKIE_MAX_AGE,
})
);
// If I comment out the next 5 lines, 3rd party services CAN call upon my API
app.use(csurf({ cookie: true }));
app.use(function (req, res, next) {
res.cookie("XSRF-TOKEN", req.csrfToken());
next();
});
app.use("/api/csrf", (req, res) => {
return res.status(200).json({
status: true,
csrfToken: req.csrfToken(),
});
});
app.use("/api", api);
Update
I would like to wrap the CSRF configuration in an if-else statement, depending on the requested route (see below). This seems to work, but is this a correct and secure setup?
var csrf = csurf({ cookie: true });
app.use(function (req, res, next) {
// skip csrf for certain routes
if (req.url === '/api/mollie_webhook') {
return next();
} else {
app.use(csrf);
// Is this allowed? Since we already have app.use 4 lines up, but don't know how else to do this...
app.use(function (req, res, next) {
res.cookie("XSRF-TOKEN", req.csrfToken());
next();
});
app.use("/api/csrf", (req, res) => {
return res.status(200).json({
status: true,
csrfToken: req.csrfToken(),
});
});
next();
}
});
app.use("/api", api);
The simplest way to achieve what you want would be to declare the Web Hook route before you add the CSRF middleware.
However, you can apply the CSRF protection conditionally by skipping directly to the next middleware on specific ignored routes.
You will also need to enable CORS on the webhook route to allow incoming requests from the remote server.
const express = require('express');
const cors = require('cors');
const csurf = require('csurf');
const cookies = require('cookie-parser');
const app = express();
const shared = cors({
origin: 'https://api.mollie.com',
methods: 'POST'
});
const protect = csurf({ cookie: true });
const ignore = [ '/api/webhook' ];
app.use(cookies(process.env.COOKIE_SECRET, {
sameSite: true, httpOnly: true,
secure: process.env.NODE_ENV === "production",
maxAge: process.env.COOKIE_MAX_AGE,
}));
app.use((req, res, next) => {
if (ignore.includes(req.url)) {
next();
} else {
protect(req, res, next);
}
});
app.use((req, res, next) => {
if (req.csrfToken) {
res.cookie("XSRF-TOKEN", req.csrfToken());
} next();
});
app.use('/api/webhook', shared, (req, res) => {
res.sendStatus(200);
});
app.use("/api/csrf", (req, res) => {
res.json({
status: true,
csrfToken: req.csrfToken(),
});
});
app.listen(process.env.PORT);
That's not the purpose of CSRF protection. CSRF protection is to prevent direct posting of data to your site. In other words, the client must actually post through an approved path like filling data to a form and submit it.
So an api will precludes Csrf, because its purpose is generally to allow 3rd party entities to access and modify data on your site . So as a rule any API view should not be use CSRF. And you can protect your endpoint in various ways such as oauth and there are other best practices too