Defend the browser: XSS, CSRF and cookies
Understand cross-site scripting and request forgery, and the browser features that stop them.
- Explain cross-site scripting and how encoding and CSP prevent it
- Explain cross-site request forgery and how SameSite cookies and tokens prevent it
- Audit cookie flags and Content Security Policy headers
Cross-site scripting (XSS) happens when a page includes untrusted text as markup, letting someone run script in other users’ browsers - on your site’s origin, with access to their session. It comes in three flavors: stored (saved in a comment or profile), reflected (echoed from a URL) and DOM-based (front-end code writing input into the page).
Defenses, in layers:
- Encode output for its context and keep the framework’s auto-escaping on.
- Use safe DOM APIs:
textContent, notinnerHTML. - Add a Content Security Policy (CSP) header that tells the browser which scripts may run - for example only your own files, no inline scripts.
- Mark session cookies HttpOnly, so script can’t read them even if XSS slips through.
Cross-site request forgery
Browsers attach cookies to requests automatically. Cross-site request forgery (CSRF) abuses that: a page on another site makes your browser send a request to a site where you’re signed in, and your cookies go along for the ride.
Try it
How CSRF works - and how SameSite stops it
Step through the attack, predicting the marked steps.
A good session cookie has all three flags:
| Flag | Protects against |
|---|---|
Secure | sending the cookie over plain HTTP |
HttpOnly | script (and XSS) reading it |
SameSite=Lax or Strict | cross-site requests carrying it (CSRF) |
Note that CORS is not a protection: it relaxes the browser’s same-origin policy to let other sites read your responses. Configure it narrowly.
policy = {"default-src": ["'self'"], "script-src": ["'self'"], "object-src": ["'none'"]}
print("; ".join(name + " " + " ".join(values) for name, values in policy.items()))default-src 'self'; script-src 'self'; object-src 'none'
Key takeaways
XSS: untrusted text runs as script on your origin. Encode output, avoid innerHTML, add a CSP.
CSRF: another site triggers requests with your cookies. Use SameSite cookies and CSRF tokens.
Session cookies should be Secure, HttpOnly and SameSite.
Lesson quiz
6 questions · pass with 5 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write Python
Write Python in the editor and run it against sample inputs. Python runs locally in your browser using a WebAssembly runtime.
Audit Set-Cookie headers
Each line is a Set-Cookie header value. Attribute names are case-insensitive. Print NAME: ok if it has Secure, HttpOnly and a SameSite attribute, otherwise NAME: missing followed by the missing ones in that order, comma-separated.
- Four cookies
Python runs in a sandboxed browser worker with a 60 second time limit. Its runtime loads from the Pyodide CDN; your code stays in this browser.
Review a Content Security Policy
Each line is a CSP header value: directives separated by ;, each a name followed by space-separated sources. Script sources come from script-src, or default-src if there’s no script-src. Collect, in this order:
no script-src or default-srcif neither exists;allows 'unsafe-inline',allows 'unsafe-eval',allows any host(for*) for each found in the script sources;object-src should be 'none'unless object-src is exactly'none'.
Print the issues joined by ; , or looks good.
- Four policies
Python runs in a sandboxed browser worker with a 60 second time limit. Its runtime loads from the Pyodide CDN; your code stays in this browser.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…