CSP, HSTS, X-Frame-Options, and more—harden your app with the right HTTP headers.
Security headers reduce common web risks. Here’s what to set and how to enforce them.
Security headers and HTTPS
Key headers
Strict-Transport-Security (HSTS) — Tell browsers to use HTTPS only. max-age=31536000; includeSubDomains. Enable after you’re sure HTTPS works everywhere.
Content-Security-Policy (CSP) — Restrict script, style, and resource origins. Mitigates XSS. Start with default-src 'self'; add script-src, style-src as needed. Use report-uri or report-to for violations.
X-Frame-Options — DENY or SAMEORIGIN to prevent clickjacking. Use frame-ancestors in CSP when you use CSP.
X-Content-Type-Options — nosniff so browsers don’t guess MIME types. Prevents some XSS and drive-by.
Referrer-Policy — Control what’s sent in Referer. Use strict-origin-when-cross-origin for balance.
Permissions-Policy — Disable unneeded browser features (camera, geolocation, etc.) for your origin.
Header adoption (security scan data):
Security headers present (%)
Implementation
Set headers in your server (Express middleware, Next.js headers config, or CDN). Test with securityheaders.com. Tighten CSP gradually; use report-only first to avoid breaking the site.
Security headers overview:
Takeaway
Add HSTS, X-Content-Type-Options, and X-Frame-Options first. Introduce CSP with report-only; then enforce. Keep headers in version control and document any exceptions.
