Security headers are your first line of defense against common web attacks. They're easy to implement and significantly improve your application's security posture.
Essential Security Headers
Content-Security-Policy (CSP)
Loading code block...
CSP Directives Explained
Directive Purpose
─────────────────────────────────────────────────────
default-src Fallback for other directives
script-src JavaScript sources
style-src CSS sources
img-src Image sources
font-src Font file sources
connect-src XHR, WebSocket, fetch destinations
frame-src iframe sources
frame-ancestors Who can embed this page
base-uri Restrict <base> element
form-action Form submission destinations
upgrade-insecure Upgrade HTTP to HTTPS
Strict CSP with Nonces
Loading code block...
X-Content-Type-Options
Loading code block...
X-Frame-Options
Loading code block...
Referrer-Policy
Loading code block...
Permissions-Policy
Loading code block...
HTTPS Configuration
HSTS (HTTP Strict Transport Security)
Loading code block...
Redirect HTTP to HTTPS
Loading code block...
TLS Configuration
Loading code block...
Secure Cookies
Loading code block...
Cookie Attributes
Attribute Purpose
────────────────────────────────────────────────────
Secure Only sent over HTTPS
HttpOnly Not accessible via JavaScript
SameSite CSRF protection
- Strict Only same-site requests
- Lax GET from external sites OK
- None Cross-site (requires Secure)
Domain Which domains receive cookie
Path URL path scope
Max-Age Lifetime in seconds
Expires Absolute expiration date
Using Helmet.js
Loading code block...
Next.js Configuration
Loading code block...
Testing Security Headers
Online Tools
- securityheaders.com - Grade your headers
- observatory.mozilla.org - Mozilla security scanner
- csp-evaluator.withgoogle.com - CSP analysis
Command Line
Loading code block...
Automated Testing
Loading code block...
CSP Reporting
Loading code block...
Conclusion
Security headers are low-effort, high-impact protections. Start with the essentials (HSTS, CSP, X-Content-Type-Options), then add more as needed. Use tools like Helmet.js to simplify implementation.
Test your headers regularly, monitor CSP reports, and keep your TLS configuration updated. Security is an ongoing process, not a one-time setup.