Require CSRF tokensRequire CSRF tokens

Another site moves your money

Claim the prize, then paste the page token and claim again.

<form method="POST"
  action="https://bank.example/api/transfer">
  <input name="to" value="mallory">
  <input name="amount" value="500">
  <input name="_csrf" value="">
</form>

const { csrfToken } = await (await fetch("/api/csrf-token")).json();

await fetch("/api/transfer", {
  method: "POST",
  headers: { "Content-Type": "application/json", "CSRF-Token": csrfToken },
  body: JSON.stringify({ to: "alice", amount: 50 }),
});

Issue, store, send, compare

Step through. Edit the header or rotate the session.

import csrf from "csurf";
import cookieParser from "cookie-parser";

app.use(cookieParser());
const csrfProtection = csrf({ cookie: true });

app.get("/api/csrf-token", csrfProtection, (req, res) => {
  res.json({ csrfToken: req.csrfToken() });
});

app.use((err, req, res, next) => {
  if (err.code !== "EBADCSRFTOKEN") return next(err);
  res.status(403).json({ error: "invalid csrf token" });
});

Which methods get checked

Pick a method and compare both tables.

app.use("/api", csrfProtection);

app.get("/api/transfer", ...);   // wrong: an <img> can trigger it
app.post("/api/transfer", ...);  // right

Why it matters, pros and cons