Cross-Site Scripting (XSS), CSRF & Security Headers¶

Cross-Site Scripting (XSS)¶

XSS injects malicious JavaScript that runs in other users' browsers, in the context of your site — letting attackers steal sessions, log keystrokes, or rewrite the page.

Three Types¶

The Vulnerable Pattern¶

1// ❌ Untrusted input written as HTML
2element.innerHTML = userComment;   // <script>steal()</script> executes

Defenses¶

1. 1.Output encoding — encode data for the context (HTML, attribute, JS, URL). Frameworks like React auto-escape by default; the danger is escape hatches (dangerouslySetInnerHTML).
2. 2.Input validation — allow-list where possible.
3. 3.Content Security Policy (CSP) — restrict which scripts may run; blocks most injected scripts even if one slips through.
4. 4.HttpOnly cookies — keep JS from reading session cookies.
5. 5.Sanitize HTML with a vetted library (DOMPurify) when you must render user HTML.

Cross-Site Request Forgery (CSRF)¶

CSRF tricks a logged-in user's browser into making an unwanted state-changing request to your site (the browser auto-sends their cookies).

1<!-- On attacker's site; victim is logged into bank.com -->
2<img src="https://bank.com/transfer?to=attacker&amount=10000">

Defenses¶

1. 1.Anti-CSRF tokens — a secret per-session token the attacker can't know.
2. 2.SameSite cookies (Lax/Strict) — browser won't send cookies on cross-site requests (strong modern default).
3. 3.Re-authentication for sensitive operations.

Security Headers — Cheap, High-Impact Wins¶

Test your headers with tools like securityheaders.com and Mozilla Observatory. Most are a one-line config change for an outsized security improvement.

Secure Development Lifecycle¶

Bake security in: threat modeling at design, secure coding standards, SAST/DAST scanning in CI, dependency scanning (Chapter 9), and code review with a security lens.