TL;DR
Security headers tell browsers how to handle your content. HSTS forces HTTPS, CSP blocks XSS, X-Frame-Options prevents clickjacking. Most are one-time setup but provide ongoing protection. These prompts help you configure headers for your specific platform.
Essential Security Headers
Add security headers to my Next.js/Express/Nginx application.
Essential headers to add:
- Strict-Transport-Security (HSTS) max-age=31536000; includeSubDomains; preload Forces HTTPS for one year
- Content-Security-Policy (CSP) default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' Controls what resources can load (see CSP page for details)
- X-Frame-Options DENY or SAMEORIGIN Prevents clickjacking by blocking iframe embedding
- X-Content-Type-Options nosniff Prevents MIME type sniffing attacks
- Referrer-Policy strict-origin-when-cross-origin Controls referrer information leakage
- Permissions-Policy geolocation=(), camera=(), microphone=() Disables browser features you don't use
Show me how to configure these for my specific platform.
Next.js Security Headers
Configure security headers in my Next.js app.
In next.config.js:
const securityHeaders = { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' }, { key: 'X-Frame-Options', value: 'DENY' }, { key: 'X-Content-Type-Options', value: 'nosniff' }, { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' }, { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' } ;
module.exports = { async headers() { return { source: '/:path*', headers: securityHeaders, }, ; }, };
For CSP, consider using @next/headers or middleware for dynamic nonces.
Test before deploying: Overly strict headers can break your site. Start with report-only mode for CSP and test all functionality before enforcing.
Express Security Headers
Add security headers to my Express app using Helmet.
npm install helmet
const helmet = require('helmet');
app.use(helmet({ contentSecurityPolicy: { directives: { defaultSrc: "'self'", scriptSrc: "'self'", styleSrc: "'self'", "'unsafe-inline'", imgSrc: "'self'", "data:", "https:", connectSrc: "'self'", fontSrc: "'self'", objectSrc: "'none'", frameAncestors: "'none'", }, }, hsts: { maxAge: 31536000, includeSubDomains: true, }, frameguard: { action: 'deny' }, referrerPolicy: { policy: 'strict-origin-when-cross-origin' }, }));
Helmet sets sensible defaults. Customize based on your needs. For development, you may need to disable some headers temporarily.
Nginx Security Headers
Add security headers in Nginx configuration.
In your server block:
server { # Security headers add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; add_header X-Frame-Options "DENY" always; add_header X-Content-Type-Options "nosniff" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
# CSP (customize for your app)
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; object-src 'none'; frame-ancestors 'none';" always;
# Hide server version
server_tokens off;
# ... rest of config
}
Use "always" to add headers to error pages too. Test with: curl -I https://yoursite.com
Pro tip: Test your headers at securityheaders.com - it scans your site and grades your security header configuration with specific recommendations.
Will these headers break my site?
They might if too strict. Start with permissive settings and tighten gradually. CSP is the most likely to cause issues - use report-only mode first.
Do I need all of these headers?
HSTS, X-Frame-Options, and X-Content-Type-Options are easy wins with minimal risk. CSP is more work but provides the best XSS protection. Start with the easy ones.
Check Your Security Headers
Scan your site for missing or misconfigured security headers.
Start Free Scan