The 6 security headers every web app needs

Security headers are HTTP response headers that tell the browser how to behave. They're not a substitute for fixing vulnerabilities, but they stop a class of attacks for free. Most apps don't set them.

1. Content-Security-Policy

Restricts which scripts, styles, images, and other resources the page can load. A strict CSP prevents most XSS attacks by blocking inline scripts and unsigned external scripts.

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{random}'

2. X-Frame-Options

Prevents your page from being embedded in an iframe on another site. Blocks clickjacking attacks where attackers overlay your UI with a transparent malicious one.

X-Frame-Options: DENY

3. X-Content-Type-Options

Stops the browser from guessing the MIME type of a response. Prevents a class of attacks where a file uploaded as an image gets executed as JavaScript.

X-Content-Type-Options: nosniff

4. Referrer-Policy

Controls how much referrer information is sent with requests. Prevents leaking URLs containing sensitive parameters when users navigate away from your site.

Referrer-Policy: strict-origin-when-cross-origin

5. Permissions-Policy

Restricts browser features (camera, microphone, geolocation) your app doesn't need. Limits the blast radius if an attacker gains script execution.

Permissions-Policy: camera=(), microphone=(), geolocation=()

6. Strict-Transport-Security

Forces browsers to use HTTPS for your domain for a period of time. Prevents downgrade attacks where someone intercepts traffic before the HTTPS redirect.

Strict-Transport-Security: max-age=31536000; includeSubDomains

In Next.js, add these in next.config.js under headers(). Takes about 20 minutes.