This lesson teaches you how a category of browser vulnerability called DOM-based Cross-Site Scripting works. The DOM (Document Object Model) is the browser's live, structured representation of a page — the tree of elements JavaScript reads and modifies at runtime. You will craft a real payload, fire it inside an isolated practice target, and review the safe coding patterns that prevent it.
Learning objectives
By the end of this lesson you will be able to:
- Define what DOM-based Cross-Site Scripting is and how it differs from reflected and stored Cross-Site Scripting (you will learn those server-mediated variants in the next lesson). Knowing the variants helps you read security advisories with precision rather than treating every Cross-Site Scripting as one bug.
- Identify a vulnerable JavaScript sink in a web application's source code. Spotting a sink is the foundation of every code review you will run as a security engineer.
- Construct a working DOM-based Cross-Site Scripting payload that uses an event-handler attribute. Building the exploit yourself converts an abstract idea into a muscle-memory skill you can repeat under pressure.
- Recommend a safe alternative API and a defense-in-depth control. Reporting a bug without a fix is half a deliverable; the recommended controls show you how to close the loop.
Prerequisites
web-technology-primercovers the HTML and JavaScript basics needed here.browser-security-modelintroduces Same-Origin Policy (SOP) and Content Security Policy (CSP), which explain why the impact matters.- You have a browser that runs the bundled practice target. The platform handles the launch; you only need to click through the prompts.
What you will do
You will interact with an embedded copy of the NovaCart application. The lesson page drives the iframe for you, watches the URL hash, snapshots the rendered DOM, and detects when a payload actually executes inside the target. You do not need to install anything.
Estimated time: ten minutes.
When you are ready, send the Continue signal.