Frontend Security

Frontend security is often overlooked until a breach occurs. Users trust your application with sensitive data; attackers target the browser as the first line of defense. This guide covers the major threats, prevention strategies, and patterns that keep your frontend and users safe.

XSS (Cross-Site Scripting) — Types and Prevention

Reflected, Stored, and DOM-Based XSS

Reflected XSS injects malicious script via URL parameters or form input that the server echoes back without encoding. Stored XSS persists malicious content in a database and renders it to all users who view it. DOM-based XSS occurs entirely in the client—unsafe handling of document.location or innerHTML with user-controlled data. All three allow attackers to steal cookies, session tokens, or perform actions as the user.

Output Encoding and Sanitization

Never render user input as raw HTML. Use text content (React's default, textContent in vanilla JS) or framework-safe interpolation. When you must render HTML (e.g., rich text), use a sanitization library like DOMPurify with a strict allowlist. Encode for the correct context: HTML attributes, JavaScript strings, and URLs each have different encoding rules.

Content Security Policy as Defense in Depth

CSP headers restrict where scripts can load from and block inline script execution. Even if an XSS vulnerability exists, CSP can prevent the payload from running. Use Content-Security-Policy with script-src 'self' and avoid unsafe-inline when possible. Report violations to monitor attempted attacks.

CSRF (Cross-Site Request Forgery) Protection

How CSRF Works