TL;DR
Security headers are HTTP response headers that tell browsers to enable security features. They protect against XSS, clickjacking, MIME sniffing, and more. Key headers include Content-Security-Policy, Strict-Transport-Security, X-Content-Type-Options, and X-Frame-Options. Add them via your web server, CDN, or application code.
The Simple Explanation
When your server sends a page to a browser, it can include instructions about security. "Do not run inline scripts." "Only load images from these domains." "Force HTTPS." These instructions are security headers. Browsers that understand them enable protections that block many common attacks.
Essential Security Headers
| Header | Purpose | Protects Against |
|---|---|---|
| Content-Security-Policy | Controls resource loading | XSS, injection |
| Strict-Transport-Security | Forces HTTPS | Downgrade attacks |
| X-Content-Type-Options | Prevents MIME sniffing | MIME confusion |
| X-Frame-Options | Controls framing | Clickjacking |
| Referrer-Policy | Controls referrer info | Data leakage |
| Permissions-Policy | Controls browser features | Feature abuse |
Example Headers
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; Strict-Transport-Security: max-age=31536000; includeSubDomains X-Content-Type-Options: nosniff X-Frame-Options: DENY Referrer-Policy: strict-origin-when-cross-origin
Content-Security-Policy Deep Dive
CSP is the most powerful security header. It controls what resources can load on your page:
- default-src: Fallback for all resource types
- script-src: Where scripts can load from
- style-src: Where styles can load from
- img-src: Where images can load from
- connect-src: Where fetch/XHR can connect
- frame-ancestors: Who can frame your page
CSP can break your site. Start with Content-Security-Policy-Report-Only to log violations without blocking. Fix issues before switching to enforcing mode.
Adding Security Headers
- Nginx: add_header directive
- Apache: Header set directive
- Cloudflare: Transform Rules or Workers
- Vercel: vercel.json headers config
- Express: helmet middleware
- Next.js: next.config.js headers
Which security headers should I implement?
At minimum: Content-Security-Policy (prevents XSS), Strict-Transport-Security (forces HTTPS), X-Content-Type-Options (prevents MIME sniffing), X-Frame-Options (prevents clickjacking). Also consider Permissions-Policy, Referrer-Policy, and Cross-Origin headers for additional protection.
How do I add security headers to my site?
Add them in your web server config (nginx, Apache), CDN settings (Cloudflare, Vercel), or application code (Express middleware, Next.js config). The method depends on your stack. Start with report-only mode for CSP to avoid breaking your site.
How do I test my security headers?
Use online scanners like securityheaders.com or Mozilla Observatory. Check browser developer tools Network tab to see response headers. CSP violations appear in the browser console. Start with report-only mode for CSP to find issues before enforcing.