How to fix Cross-Site Request Forgery (CSRF)

What an attacker can do

The concrete impact of leaving CSRF (Cross-Site Request Forgery) unpatched.

How to fix CSRF (Cross-Site Request Forgery)

5 ordered steps. Apply them in order — each builds on the previous.

1. 1

   Set SameSite=Lax (or Strict) on session cookies

   SameSite=Lax tells the browser not to send the cookie on cross-site POST/PUT/DELETE requests. Top-level GET navigations still send it (so users clicking your-app links from elsewhere stay logged in).

   Chrome defaults to SameSite=Lax for cookies without explicit attribute since 2020. Firefox followed. Safari has stricter defaults. Set explicitly to ensure consistent behavior. Use Strict for non-shared apps where users never navigate from external links.

   javascriptStep 1

   // Express
   app.use(session({
     name: "sid",
     cookie: {
       httpOnly: true,
       secure: true,
       sameSite: "lax",  // or "strict"
       maxAge: 1000 * 60 * 60 * 24 * 7,
     },
   }));
   
   // Set-Cookie header equivalent:
   // Set-Cookie: sid=abc; HttpOnly; Secure; SameSite=Lax; Path=/
   
   // Django:
   # settings.py
   SESSION_COOKIE_SAMESITE = "Lax"
   SESSION_COOKIE_SECURE = True
   CSRF_COOKIE_SAMESITE = "Lax"

2. 2

   Add CSRF tokens for forms (synchronizer pattern)

   Server generates a per-session token, embeds in form, validates on submission. Belt-and-suspenders alongside SameSite.

   Most frameworks have built-in CSRF middleware. Django's `{% csrf_token %}`, Rails' `csrf_meta_tags`, Express's `csurf` (deprecated but widely used; alternatives like `csrf-csrf` are maintained). Use them.

   pythonStep 2

   # Django — built-in
   # settings.py
   MIDDLEWARE = [..., 'django.middleware.csrf.CsrfViewMiddleware']
   
   # In template
   <form method="post">
     {% csrf_token %}
     <input name="email" value="{{ user.email }}">
     <button>Save</button>
   </form>
   
   # AJAX — read token from cookie + send in header
   fetch("/api/save", {
     method: "POST",
     headers: { "X-CSRFToken": getCookie("csrftoken") },
     body: JSON.stringify({...})
   });

3. 3

   Use double-submit cookie pattern for stateless APIs

   When you can't keep server-side session state, the client reads a CSRF token from a cookie and sends it in a custom header. Browser never lets cross-origin pages read the cookie, so cross-origin requests can't include the matching header.

   Common pattern for SPAs. Token can be HMAC-signed for tamper resistance.

   javascriptStep 3

   // Server: set CSRF cookie on login + every authenticated response
   res.cookie("csrf-token", crypto.randomBytes(32).toString("hex"), {
     secure: true,
     sameSite: "lax",
     // NOT httpOnly — JS needs to read it
   });
   
   // Client: read cookie, send as header
   const csrfToken = document.cookie.match(/csrf-token=([^;]+)/)?.[1];
   fetch("/api/transfer", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       "X-CSRF-Token": csrfToken,
     },
     body: JSON.stringify({ amount, to }),
     credentials: "include",
   });
   
   // Server middleware verifies header matches cookie
   function csrfCheck(req, res, next) {
     const headerToken = req.get("X-CSRF-Token");
     const cookieToken = req.cookies["csrf-token"];
     if (!headerToken || !cookieToken || headerToken !== cookieToken) {
       return res.sendStatus(403);
     }
     next();
   }

4. 4

   Use Bearer token auth for APIs (not cookies)

   If your API uses Authorization: Bearer headers, CSRF is structurally impossible — cross-origin requests can't read or set arbitrary headers due to CORS preflight.

   Move from session cookies to JWT/OAuth Bearer tokens stored in memory (NOT localStorage — XSS reads it). Token gets sent on every API call manually. Caveat: lose CSRF immunity if you fall back to cookies for any endpoint.

   javascriptStep 4

   // Login returns Bearer token in response body
   const { token } = await fetch("/login", { method: "POST", body: ... }).then(r => r.json());
   
   // Store in memory (not localStorage — XSS hazard)
   let authToken = token;
   
   // Send on every API call
   const res = await fetch("/api/transfer", {
     headers: { "Authorization": `Bearer ${authToken}` },
     body: ...,
   });
   
   // Cross-origin pages CANNOT read your token. CSRF eliminated.

5. 5

   Verify Origin/Referer headers as defense-in-depth

   Most state-changing requests should originate from your own domain. Reject requests where Origin doesn't match.

   Origin is more reliable than Referer (Referer can be stripped by privacy extensions). Don't reject when Origin is missing (legitimate cases: native apps, webhooks); rather, reject when it's PRESENT and doesn't match.

   javascriptStep 5

   function checkOrigin(req, res, next) {
     const origin = req.get("Origin");
     if (!origin) return next();  // legitimate cases
   
     const allowed = ["https://app.example.com", "https://example.com"];
     if (!allowed.includes(origin)) {
       return res.status(403).json({ error: "Cross-origin request blocked" });
     }
     next();
   }
   
   app.use(["/api/transfer", "/api/admin"], checkOrigin);