Frontend Security (XSS, CSRF, CSP) — System Design Interview Guide

XSS — Cross-Site Scripting

XSS occurs when an attacker injects executable JavaScript into your page, which runs in other users' browsers in your site's context — with access to cookies, localStorage, DOM, and the ability to make requests as the victim.

The Three Types

• Stored XSS: malicious script saved in the database (comment, username) and rendered for other users.
• Reflected XSS: malicious script in a URL parameter, reflected immediately in the response.
• DOM-based XSS: malicious script injected via client-side JS that writes to the DOM (innerHTML, document.write, eval).

// Vulnerable — sets innerHTML from URL param
const name = new URLSearchParams(location.search).get('name');
document.getElementById('greeting').innerHTML = 'Hello ' + name;
// Attack URL: /page?name=<img src=x onerror="stealCookies()">

// Safe — textContent doesn't parse HTML
document.getElementById('greeting').textContent = 'Hello ' + name;

Prevention

• Always use textContent over innerHTML for user-controlled content
• React's JSX auto-escapes by default — dangerouslySetInnerHTML opts out
• Sanitize HTML with DOMPurify before any innerHTML assignment
• Set httpOnly on session cookies — XSS can't steal what JS can't read

CSRF — Cross-Site Request Forgery

CSRF tricks a logged-in user's browser into sending an authenticated request to your server from a malicious page. Since the browser automatically attaches cookies to same-domain requests, the server can't tell the legitimate request from the forged one.

<!-- Attacker's page -- victim visits this while logged into bank.com -->
<img src="https://bank.com/transfer?to=attacker&amount=1000" />
<!-- Browser sends GET with bank.com cookies — authenticated by accident -->

Prevention

• CSRF tokens: server generates a random token per session; client includes it in forms and AJAX headers; server validates it. Attacker's page cannot read the token (same-origin policy).
• SameSite cookie attribute: SameSite=Strict — cookies not sent on any cross-site request. SameSite=Lax — sent on top-level navigations (links), not on forms or sub-requests. Both prevent CSRF for most cases.
• Modern APIs: use Authorization: Bearer <token> header instead of cookies — custom headers can't be sent in CSRF attacks.

CSP — Content Security Policy

CSP is an HTTP header that whitelists which sources are trusted to load scripts, styles, images, and make connections. Even if an attacker injects a script tag, CSP prevents it from executing if the source isn't whitelisted.

# Strong CSP header
Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.trusted.com;
  style-src 'self' 'unsafe-inline';  # unsafe-inline should be avoided
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';  # prevents clickjacking

frame-ancestors 'none' is the CSP equivalent of the X-Frame-Options header — prevents your page from being embedded in iframes (clickjacking protection).

Clickjacking

An attacker loads your site in a transparent iframe on their page and tricks users into clicking elements they can't see. Protection: X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none'.

Key Security Headers

Content-Security-Policy: default-src 'self'; script-src 'self'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000; includeSubDomains
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()