XSS and CSP in depth
You recognise XSS in hard output contexts, frameworks and rich text, and protect a single-page app with a nonce-based strict CSP, Trusted Types and a well-configured sanitiser.
Level 301 · 15 lessons · 12 practice labs
Lessons
Hard contexts
- Escaping mistakes in attribute and JavaScript string contexts
- Mutation XSS: parsing that fools the sanitiser
- XSS in frameworks: escape hatches in React, Vue and Angular
- XSS in Markdown and rich-text editors
- Short task: make a React component’s use of dangerouslySetInnerHTML safe
Strict CSP
- Strict CSP with nonces and hashes
- strict-dynamic and the modern CSP approach
- Weak CSP: unsafe-inline, broad domains and JSONP endpoints
- Rolling out CSP in report-only mode and reading violation reports
- Short task: add a nonce-based CSP to the lab app and fix the pages it breaks
Browser defences
- Trusted Types: blocking DOM XSS at the root
- Configuring a sanitiser correctly and keeping it up to date
- Collecting CSP reports and turning them into alerts
- Searching the codebase for variants of an XSS fix
- Capstone: move a single-page app to Trusted Types and a strict CSP
Practice labs
- XSS through dangerouslySetInnerHTML: Prove a dangerouslySetInnerHTML use in a React component leads to XSS and fix it with a sanitiser or plain text.
- A link scheme in the Markdown editor: Prove the javascript: scheme runs in Markdown links and limit link schemes with an allow list.
- The v-html escape hatch in Vue: Prove the XSS in a notification component that uses v-html and rewrite the component with text binding.
- Mutation XSS: the sanitiser passed it, the browser changed it: Show in the lab input that an old sanitiser version lets through and the browser mutates into script, then update the sanitiser and retest.
- Add a nonce-based CSP: Add a CSP that generates a new nonce on every response and give the nonce to inline scripts.
- A CSP that allows a broad domain: Show with the lab's JSONP endpoint why a policy allowing a whole CDN domain can be bypassed and move to strict-dynamic.
- From report-only to enforcing: Analyse a week of violation reports, add legitimate sources to the policy and switch it to enforcing mode.
- Repair the pages a strict CSP breaks: Find the event handlers and inline styles that break under a strict CSP and fix them without loosening the policy.
- Alerts from CSP violation reports: Write a rule that separates real injection attempts from noise in the CSP report collector and test it with a replayed attempt.
- Turn on Trusted Types in report-only mode: Turn on Trusted Types in report-only mode in the single-page app and list and fix the violating sinks with a policy.
- Search for siblings of an XSS fix: Search the codebase for the pattern of an XSS you closed, find other places with the same mistake and fix them.
- Move a single-page app to Trusted Types: Move the fictional Kestrel Notes app to a strict CSP and Trusted Types in enforcing mode and test every feature still works.
About this course
You recognise XSS in hard output contexts, frameworks and rich text, and protect a single-page app with a nonce-based strict CSP, Trusted Types and a well-configured sanitiser.
What you will learn
- Hard contexts
- Strict CSP
- Browser defences
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.