Complete Guide to HTTP Security Headers

Why Security Headers Matter

Without security headers, your site is vulnerable to clickjacking, cross-site scripting (XSS), MIME sniffing, and protocol downgrade attacks — even if your application code is perfect. Security headers add defense-in-depth by telling the browser how to behave when rendering your pages.

Content-Security-Policy (CSP)

CSP is the most powerful security header. It controls which resources (scripts, styles, images, fonts, frames) the browser is allowed to load. A well-configured CSP prevents XSS attacks by blocking inline scripts and unauthorized external resources.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; frame-ancestors 'none'

Start with Content-Security-Policy-Report-Only to test without breaking anything. Monitor the reports, fix violations, then switch to enforcement mode.

Strict-Transport-Security (HSTS)

HSTS tells the browser to always connect over HTTPS, even if the user types http://. This prevents protocol downgrade attacks and cookie hijacking.

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

The max-age value is in seconds. 63072000 equals two years. The preload directive lets you submit your domain to the browser HSTS preload list, so HTTPS is enforced even on the first visit.

X-Frame-Options

This header prevents your site from being embedded in an iframe on another domain, protecting against clickjacking attacks.

X-Frame-Options: DENY

Use DENY to block all framing, or SAMEORIGIN if your own site needs to iframe itself. Note that CSP's frame-ancestors directive is the modern replacement, but X-Frame-Options still provides backward compatibility.

X-Content-Type-Options

Prevents MIME type sniffing. Without this header, browsers may interpret a file differently than its declared content type, which can lead to XSS attacks.

X-Content-Type-Options: nosniff

This is a simple on/off header. Always set it.

Referrer-Policy

Controls how much referrer information is sent when navigating away from your site. This protects user privacy and prevents leaking sensitive URL parameters.

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

This is the recommended default. It sends the full URL for same-origin requests but only the origin for cross-origin requests, and sends nothing when downgrading from HTTPS to HTTP.

Permissions-Policy

Formerly known as Feature-Policy, this header controls which browser features (camera, microphone, geolocation, payment) your site can use. Disabling unused features reduces your attack surface.

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

Implementation by Platform

Where you set these headers depends on your stack:

• Next.js — Use the headers() function in next.config.js
• Nginx — Add add_header directives in your server block
• Cloudflare — Use Transform Rules or Workers
• Vercel / Netlify — Configure in vercel.json or _headers file
• Express.js — Use the helmet middleware