What Is CSRF? Cross-Site Request Forgery Explained for AI Coders

How CSRF Works

Imagine you are logged in to your bank at bank.com. Your browser has a session cookie for the bank. Now you visit evil.com, which has hidden HTML like this:

<!-- On evil.com -->
<img src="https://bank.com/transfer?to=attacker&amount=1000" />
<!-- Or a hidden auto-submitting form -->
<form action="https://bank.com/transfer" method="POST" id="csrf">
  <input type="hidden" name="to" value="attacker" />
  <input type="hidden" name="amount" value="1000" />
</form>
<script>document.getElementById('csrf').submit()</script>

Your browser automatically sends your bank.com session cookie with both requests. The bank's server sees an authenticated transfer request — from your browser, with your valid session. Without CSRF protection, it processes the transfer.

The attacker never needed your password. They just needed you to visit their page while you had an active session on the target site.

CSRF Defenses

1. SameSite Cookie Attribute (simplest, most modern)

// Express — setting a secure, SameSite cookie
res.cookie('session', token, {
  httpOnly: true,       // JavaScript cannot read it
  secure: true,         // HTTPS only
  sameSite: 'Lax',      // Not sent with cross-site POST requests
  maxAge: 7 * 24 * 60 * 60 * 1000  // 7 days
})

SameSite=Lax (the browser default in modern browsers) prevents the cookie from being sent with cross-site POST requests — which blocks most CSRF attacks. SameSite=Strict is more restrictive and also blocks the cookie from cross-site GET requests (e.g., clicking a link from another site).

2. CSRF Tokens

The server generates a unique random token and embeds it in every form. On submission, the server checks the token matches. Malicious sites cannot read the token from your page (same-origin policy blocks cross-site reads), so they cannot forge a valid request.

// Express with csrf middleware
import csrf from 'csrf'
const tokens = new csrf()

// Generate token and put in form
const secret = await tokens.secret()
req.session.csrfSecret = secret
const token = tokens.create(secret)
// Pass token to template: <input type="hidden" name="_csrf" value="${token}">

// Validate on POST
const valid = tokens.verify(req.session.csrfSecret, req.body._csrf)
if (!valid) return res.status(403).json({ error: 'Invalid CSRF token' })

3. Verify Origin / Referer Header

Check that requests to state-changing endpoints come from your own origin:

function verifySameOrigin(req, res, next) {
  const origin = req.headers.origin || req.headers.referer
  const allowed = ['https://myapp.com', 'https://www.myapp.com']
  if (origin && !allowed.some(a => origin.startsWith(a))) {
    return res.status(403).json({ error: 'Forbidden' })
  }
  next()
}

CSRF in AI-Generated Code

AI commonly generates vulnerable cookie configurations:

// ❌ AI often generates this (missing security attributes)
res.cookie('session', token, { httpOnly: true })

// ✅ What it should be
res.cookie('session', token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'Lax',
  maxAge: 7 * 24 * 60 * 60 * 1000
})

When reviewing AI-generated auth code: always search for res.cookie or cookie()` calls and verify all four attributes are present: httpOnly, secure, sameSite, and maxAge/expires.

JWTs and CSRF

JWTs stored in localStorage are immune to CSRF because JavaScript must explicitly include them — a cross-site form submission cannot access localStorage. But localStorage is vulnerable to XSS.

JWTs stored in cookies are vulnerable to CSRF. The solution: use cookie-stored JWTs with SameSite=Strict or Lax, which blocks most cross-site submission attacks.

What to Learn Next

• What Is XSS? — The complementary attack to CSRF; localStorage vs. cookie storage tradeoff.
• What Is a JWT? — How token storage choice affects CSRF risk.
• API Security Guide — Comprehensive security checklist for AI-generated APIs.

FAQ