Where the Credential Lives — XSS and CSRF

// localStorage
//   readable by any script on the origin — one XSS takes everything
//   survives a tab close, so a shared machine keeps the session
//   immune to CSRF, easy across origins
localStorage.setItem('token', jwt)          // convenient, and exposed

// httpOnly cookie
//   JavaScript cannot read it, so XSS cannot exfiltrate it
//   sent automatically -> needs SameSite and/or a CSRF token
Set-Cookie: sid=...; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=86400

// In-memory (a JS variable or React state)
//   safest against persistence — gone on refresh, which is the point
//   needs a refresh cookie to restore the session on reload
//   still readable by an XSS while the page is open

// sessionStorage
//   per-tab, cleared on close. Same XSS exposure as localStorage.

// The honest summary:
//   XSS defeats every client-side storage option. httpOnly only
//   stops the token being READ — an XSS can still make requests as
//   the user from the page itself.
//   So preventing XSS is the primary defence, and storage choice is
//   damage limitation.

Set-Cookie: sid=abc;
  HttpOnly;              # JavaScript cannot read it
  Secure;                # HTTPS only — never omit in production
  SameSite=Lax;          # not sent on cross-site subrequests
  Path=/;
  Max-Age=86400;         # session cookie if omitted
  Domain=.aicancode.org  # shared across subdomains — widen carefully

# SameSite decides the CSRF exposure:
#   Strict  never sent cross-site. Breaks arriving from an external
#           link while logged in — the user appears logged out.
#   Lax     (default) sent on top-level GET navigations only. Blocks
#           cross-site POST, which is the CSRF that matters.
#   None    always sent. REQUIRES Secure. Needed when the API is on a
#           genuinely different site — and then you need CSRF tokens.

# The production trap: aicancode.org calling api.fly.dev is
# CROSS-SITE, so a Lax cookie is never sent and auth silently fails
# in production while working perfectly on localhost, where both are
# "localhost". Fix by putting the API on api.aicancode.org — same
# site, so Lax works — or by proxying it through the frontend.

// XSS — the root defence, whatever your storage:
//   React escapes interpolated text by default
//   dangerouslySetInnerHTML only with DOMPurify.sanitize()
//   validate href protocols before rendering (javascript: executes)
//   a Content-Security-Policy header, which blocks inline scripts
Content-Security-Policy: default-src 'self'; script-src 'self'

// CSRF — needed whenever the browser attaches credentials for you:
//   1. SameSite=Lax or Strict          <- covers most cases now
//   2. a CSRF token for state-changing requests, double-submitted
//      via a readable cookie and a header
//   3. verify the Origin header server-side
if request.headers.get("origin") not in ALLOWED_ORIGINS:
    raise HTTPException(403)

// Note that a token in an Authorization header needs no CSRF token:
// the browser does not attach it automatically, so an attacker's
// page cannot cause it to be sent.

// A defensible modern default for a browser app:
//   httpOnly + Secure + SameSite=Lax session cookie
//   API on a subdomain of the same site
//   a strict CSP
//   short sessions with idle timeout