XSS Prevention
A Tiffin customer leaves a review: "Great biryani!" followed by a hidden <img src=x onerror=...> tag. Every visitor who opens the dish page now runs that customer's JavaScript, which can act as them on Tiffin. This is cross-site scripting (XSS): someone else's code running inside your page, with your users' trust.
The rule
Treat user text as text: encode it for where it lands.
XSS happens when untrusted data is written into a page in a way the browser reads as code. Three flavours, one cause:
- Stored: the payload is saved (a review, a username) and served to many users.
- Reflected: the payload is in a link, and the server echoes it straight back.
- DOM-based: the page's own JavaScript copies something like the URL fragment into the page.
The main defence is output encoding: turn characters like <, >, " and & into harmless entities (< and friends) so the browser shows them instead of running them. Encoding depends on the context: HTML body, an HTML attribute, a URL, or inside JavaScript each need their own rules.
Modern tools do this for you if you let them:
// UNSAFE: the browser parses review text as HTML
card.innerHTML = review.text;
// SAFE: the browser treats it as plain text
card.textContent = review.text;Template engines and frameworks such as React escape by default. The danger is the escape hatches: innerHTML, dangerouslySetInnerHTML, v-html, |safe. If you truly need some formatting, pass the input through a maintained HTML sanitizer with a small allow-list of tags.
Add layers: a Content Security Policy header that blocks inline scripts makes many payloads fail, and HttpOnly cookies cannot be read by script at all.
The shortcut
Follow the data to where it lands, and ask: "Is this a text sink or a code sink?" textContent, escaped templates → text. innerHTML, raw-HTML helpers, eval, href built from input → code; fix it.
Where it comes from
review.text, typed by any customer. Untrusted.
Input validation helps, but it is not the XSS fix. A perfectly valid review can still contain <.
Drills
Answer fast — trust the rule.
A malicious review is saved and shown to every visitor of a dish page. What type of XSS is this?
Which line safely shows a customer's name on the page?
Tiffin wants reviews to allow bold text. What is the right approach?
What does a Content Security Policy add?
Remember
- Treat user text as text: encode it for where it lands.
- Ask "text sink or code sink?" and replace code sinks.
- Sanitize only when HTML is truly needed; add CSP and HttpOnly cookies as layers.