CSRF Protection in React: Tokens, Cookies & Best Practices

#cybersecurity #vulnerabilities #react #webdev

Why CSRF still matters in React apps

Even with SPAs, state-changing requests (POST/PUT/DELETE) can be forged if your session cookie is sent automatically. Use an explicit CSRF defense so the browser must prove intent.

Core strategy (TL;DR)

Issue a per-session (or per-request) CSRF token from your API.
Store it in an HttpOnly cookie or expose via a safe bootstrap endpoint.
Frontend must send the token in a custom header (e.g., X-CSRF-Token).
Backend validates header token === server copy (or double-submit cookie).
Harden cookies with SameSite, Secure, HttpOnly.

Backend: minimal Express CSRF token endpoint

// server/csrf.js
import express from "express";
import crypto from "crypto";
const app = express();

app.use(express.json());

// naive in-memory store; replace with signed JWT or DB per user/session
const tokens = new Map();

app.get("/csrf-token", (req, res) => {
  const sid = (req.headers["x-session-id"] || crypto.randomUUID());
  const token = crypto.randomBytes(32).toString("hex");
  tokens.set(sid, token);

  // set session + double-submit cookie
  res.setHeader("Set-Cookie",
    `sid=${sid}; Path=/; HttpOnly; Secure; SameSite=Strict`);
  res.json({ token });
});

app.post("/transfer", (req, res) => {
  const sid = (req.headers["x-session-id"]);
  const headerToken = req.headers["x-csrf-token"];
  if (!sid || tokens.get(sid) !== headerToken) return res.status(403).json({error:"CSRF"});
  res.json({ ok: true });
});

app.listen(3000);

Harden your cookies:

Set-Cookie: session=...; Path=/; HttpOnly; Secure; SameSite=Strict

React: fetch token once, attach to every request

// src/csrfClient.js
export async function getCsrf() {
  const r = await fetch("/csrf-token", { credentials: "include" });
  const { token } = await r.json();
  // read sid from cookie for demonstration
  const sid = document.cookie.split("; ").find(c=>c.startsWith("sid="))?.split("=")[1];
  return { token, sid };
}

// src/api.js
let CSRF = { token: null, sid: null };

export async function initApi() {
  CSRF = await getCsrf();
}

export async function apiPost(url, body) {
  return fetch(url, {
    method: "POST",
    credentials: "include",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": CSRF.token,
      "X-Session-Id": CSRF.sid
    },
    body: JSON.stringify(body)
  });
}

📸 Screenshot of the Website Vulnerability Scanner page

Screenshot of the free tools webpage where you can access security assessment tools.

Axios interceptor alternative

// src/axiosClient.js
import axios from "axios";
import { getCsrf } from "./csrfClient";

const api = axios.create({ withCredentials: true });

let csrf = null;
api.interceptors.request.use(async (config) => {
  if (!csrf) csrf = await getCsrf();
  config.headers["X-CSRF-Token"] = csrf.token;
  config.headers["X-Session-Id"] = csrf.sid;
  return config;
});

export default api;

Double-submit cookie check (no server store)

// server/doubleSubmit.js
import crypto from "crypto";
import cookie from "cookie";

export function issueToken(res) {
  const t = crypto.randomBytes(32).toString("hex");
  res.setHeader("Set-Cookie", [
    `csrf=${t}; Path=/; Secure; SameSite=Strict`,
  ]);
  return t;
}

export function validate(req) {
  const cookies = cookie.parse(req.headers.cookie || "");
  const headerT = req.headers["x-csrf-token"];
  return cookies.csrf && headerT && cookies.csrf === headerT;
}

📸 Sample Vulnerability Assessment Report generated by the free tool to check Website Vulnerability

Sample vulnerability assessment report generated with our free tool, providing insights into possible vulnerabilities.

Extra hardening checklist

Enforce SameSite=Strict (or Lax if you must support normal GET navigations).
Require CSRF header on state-changing routes only.
Rotate tokens periodically; bind tokens to user/session.
Block JSONP/CORS abuse; use strict CORS allowlists.
Prefer HttpOnly + server-side verify (or signed JWT tokens).