Ver actualización a continuación...
Mi front-end de React puede llamar a mi API de back-end de Node. Sin embargo, cuando un sitio externo llama a mi API, recibe un error. Si comento la parte CSRF (las 5 líneas) de la configuración, los servicios de terceros PUEDEN llamar a mi 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);Actualizar
Me gustaría envolver la configuración de CSRF en una declaración if-else, según la ruta solicitada (ver más abajo). Esto parece funcionar, pero ¿es esta una configuración correcta y segura?
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);La forma más sencilla de lograr lo que desea sería declarar la ruta Web Hook antes de agregar el middleware CSRF.
Sin embargo, puede aplicar la protección CSRF de forma condicional saltando directamente al next middleware en rutas ignoradas específicas.
También deberá habilitar CORS en la ruta del webhook para permitir las solicitudes entrantes desde el servidor remoto.
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);Ese no es el propósito de la protección CSRF. La protección CSRF es para evitar la publicación directa de datos en su sitio. En otras palabras, el cliente debe publicar a través de una ruta aprobada, como completar datos en un formulario y enviarlo.
Por lo tanto, una API excluirá Csrf, porque su propósito generalmente es permitir que entidades de terceros accedan y modifiquen datos en su sitio. Entonces, como regla, cualquier vista de API no debe usar CSRF. Y puede proteger su punto final de varias maneras, como Oauth y también hay otras mejores prácticas.