Why security headers matter

Security headers instruct browsers to enable built-in security features: blocking XSS (CSP), preventing clickjacking (X-Frame-Options), forcing HTTPS (HSTS), and controlling information leakage (Referrer-Policy). Without them, browsers use permissive defaults that leave your users vulnerable. Adding security headers is one of the highest-impact, lowest-effort security improvements you can make.

// Essential security headers

// Prevent MIME sniffing attacks
X-Content-Type-Options: nosniff

// Prevent clickjacking
X-Frame-Options: DENY
// or Content-Security-Policy: frame-ancestors 'none'

// Control referrer information
Referrer-Policy: strict-origin-when-cross-origin

// Disable dangerous browser features
Permissions-Policy: camera=(), microphone=(), geolocation=()

// Force HTTPS
Strict-Transport-Security: max-age=31536000; includeSubDomains

// Prevent XSS (legacy, use CSP instead)
X-XSS-Protection: 0

// Vercel (vercel.json)
{ "headers": [{ "source": "/(.*)", "headers": [
  { "key": "X-Content-Type-Options", "value": "nosniff" }
]}]}

Essential headers every site needs

At minimum, every website should set: Strict-Transport-Security (force HTTPS), X-Content-Type-Options: nosniff (prevent MIME sniffing), X-Frame-Options: DENY or SAMEORIGIN (prevent clickjacking), and Referrer-Policy: strict-origin-when-cross-origin (control referrer leakage). These four headers cover the most common attack vectors with minimal risk of breaking functionality.

Advanced headers for full protection

For maximum security, add: Content-Security-Policy (comprehensive XSS prevention), Permissions-Policy (restrict browser APIs), Cross-Origin-Opener-Policy (isolate browsing context), Cross-Origin-Embedder-Policy (control resource loading), and Cross-Origin-Resource-Policy (prevent cross-origin reads). These require more careful configuration but significantly raise the security bar.