Stop 23 · Interview PreparationTechnical · 4/8

Security (XSS, CSRF)

In short

Security questions separate 'it works on my laptop' developers from people a company can trust with user data. Know XSS and CSRF well enough to explain the attack and the fix.

Interview-level fluency in common frontend security vulnerabilities and their mitigations — a frequent topic in mid-to-senior interviews.

The jaadu with a magnifying glass catches a sneaky figure pinning a fake note on a board.

Think of it like this

Two ways to rob a bank customer

XSS is slipping a fake note into the bank's own notice board, so customers trust it. CSRF is tricking a customer, who's already signed in, into signing a form they didn't read. Different tricks, different defences.

Watch it happen

How a stored XSS attack plays out

Attacker

Server

Victim

1/6The attacker posts a comment with JavaScript hidden in an onerror attribute.

The big ideas

What you need to know

XSS runs the attacker's script

Untrusted text gets treated as HTML or JS on your page. It can then steal data or act as the user.

Stopping XSS

Escape output (React does this by default), avoid innerHTML with user input, sanitise HTML you must render, add a CSP.

CSRF borrows your login

Another site makes your browser send a request to a site where you're logged in, with your cookies attached.

Stopping CSRF

SameSite cookies, CSRF tokens on state-changing requests, and never changing data with GET.

See it in code

Walk through the code

jsx

1const comment = '<img src=x onerror="alert(document.cookie)">';2 3// Bad: runs the attacker's code4el.innerHTML = comment;5 6// Good: shows it as plain text7el.textContent = comment;8 9// React escapes text by default, so this is safe:10<p>{comment}</p>11 12// Bad: opting out of that safety with raw user input13<p dangerouslySetInnerHTML={{ __html: comment }} />

1/4A comment that hides a script inside a broken image.

If you truly must render user HTML, sanitise it first with a library like DOMPurify. The name dangerouslySetInnerHTML is a warning, not a suggestion.

Save yourself the pain

Common mistakes

Oops

Saying HttpOnly cookies prevent CSRF.

Do this instead

HttpOnly stops scripts reading the cookie (helps against XSS theft). CSRF is stopped by SameSite and CSRF tokens.

Oops

Thinking React makes XSS impossible.

Do this instead

React escapes text, but dangerouslySetInnerHTML, javascript: URLs in href and third-party scripts can still bite.

Your mission

Attack your own app (safely)

~30 min

Quick check

Which of these mainly protects against CSRF?

Go deeper

1Be ready to explain XSS and CSRF with a concrete example of each, not just definitions.
2Know how React and modern frameworks protect against XSS by default.
3Understand why HttpOnly cookies and CSRF tokens are common mitigations.

More technical at this stop