Security Headers
Security Headers are HTTP response headers that instruct browsers to enable additional security protections for your website visitors.
What are Security Headers?
Security headers are instructions sent from your web server to visitors’ browsers, telling them how to handle your website securely. They protect against various attacks and security vulnerabilities.
Available Security Headers
Strict-Transport-Security (HSTS)
What it does: Forces browsers to always use HTTPS instead of HTTP.
Value: max-age=31536000; includeSubDomains; preload
Protection:
- Prevents man-in-the-middle attacks
- Stops protocol downgrade attacks
- Ensures all connections are encrypted
When to use: Always enable if your site uses HTTPS (recommended)
Important: Once enabled, browsers will refuse to connect via HTTP for the specified duration.
X-Frame-Options
What it does: Prevents your site from being embedded in iframes on other websites.
Values:
DENY: Never allow embedding (most secure)SAMEORIGIN: Only allow embedding on your own domain
Protection:
- Prevents clickjacking attacks
- Stops UI redress attacks
- Protects against iframe-based exploits
When to use: Enable unless you specifically need your site to be embedded elsewhere
X-Content-Type-Options
What it does: Prevents browsers from MIME-sniffing responses.
Value: nosniff
Protection:
- Stops browsers from misinterpreting file types
- Prevents execution of malicious scripts
- Reduces XSS attack surface
When to use: Always enable (no downsides)
Content-Security-Policy (CSP)
What it does: Controls which resources (scripts, styles, images) can be loaded on your site.
Example: default-src 'self'; script-src 'self' https://cdn.example.com
Protection:
- Prevents XSS attacks
- Blocks unauthorized script execution
- Controls resource loading
When to use: Enable with careful configuration (can break functionality if misconfigured)
Important: CSP is powerful but complex. Start with a permissive policy and tighten gradually.
Referrer-Policy
What it does: Controls how much referrer information is sent when users navigate away from your site.
Values:
no-referrer: Don’t send any referrer informationstrict-origin-when-cross-origin: Send full URL for same-origin, only origin for cross-originsame-origin: Only send referrer for same-origin requests
Protection:
- Protects user privacy
- Prevents information leakage
- Controls what other sites learn about your visitors
When to use: Enable to protect user privacy
Permissions-Policy
What it does: Controls which browser features and APIs your site can use.
Example: geolocation=(), microphone=(), camera=()
Protection:
- Limits attack surface
- Prevents unauthorized feature access
- Protects user privacy
When to use: Enable to restrict unnecessary browser features
Recommended Configuration
For most websites, we recommend enabling:
✓ Strict-Transport-Security (HSTS)
✓ X-Frame-Options: DENY
✓ X-Content-Type-Options: nosniff
✓ Referrer-Policy: strict-origin-when-cross-origin
✓ Permissions-Policy: geolocation=(), microphone=(), camera=()Consider enabling (with testing):
⚠ Content-Security-Policy (requires careful configuration)How to Enable Security Headers
- Go to the Security Headers section in your site settings
- Check the boxes for headers you want to enable
- For CSP, enter your policy in the text field
- Save your changes
- Test your site to ensure nothing breaks
Testing Security Headers
After enabling headers, test your site:
- Browser Console: Check for CSP violations
- Online Tools: Use securityheaders.com to scan your site
- Manual Testing: Verify all functionality still works
Common Issues
CSP Breaking Functionality
- Inline scripts are blocked by default
- Third-party resources need to be explicitly allowed
- Start with a permissive policy and tighten gradually
HSTS Locking Out HTTP
- Once enabled, browsers won’t connect via HTTP
- Make sure your HTTPS is working perfectly first
- Consider starting with a shorter max-age for testing
X-Frame-Options Breaking Embeds
- If you need your site embedded elsewhere, use
SAMEORIGINor don’t enable - Consider using CSP’s
frame-ancestorsinstead for more control
Best Practices
- Enable basic headers first (X-Frame-Options, X-Content-Type-Options)
- Test HSTS thoroughly before enabling with long max-age
- Start with permissive CSP and tighten over time
- Monitor browser console for policy violations
- Use security header scanners to verify configuration
- Test on staging first before enabling in production
Advanced: Content-Security-Policy Examples
Restrictive (Most Secure)
default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'Only allows resources from your own domain. Very secure but may break functionality.
Moderate (Balanced)
default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:Allows your own resources plus inline scripts/styles. Good balance for most sites.
Permissive (Least Restrictive)
default-src 'self' *; script-src 'self' * 'unsafe-inline' 'unsafe-eval'; style-src 'self' * 'unsafe-inline'Allows most resources. Less secure but unlikely to break functionality.
Resources
Frequently Asked Questions
What are security headers and why are they important?
Understanding browser security mechanismsSecurity headers are HTTP response headers that instruct browsers how to behave when handling your site’s content. They protect against clickjacking, XSS attacks, MIME sniffing, and other common web vulnerabilities. Major browsers enforce these headers to keep users safe.
What is HSTS (HTTP Strict Transport Security)?
Forcing HTTPS connectionsHSTS tells browsers to only connect to your site via HTTPS, even if users type http://. It prevents downgrade attacks and SSL stripping. Once enabled, browsers remember this preference. Start with a shorter max-age (86400 = 1 day) for testing before using longer values.
What does X-Frame-Options do?
Preventing clickjacking attacksX-Frame-Options controls whether your site can be embedded in frames or iframes. DENY blocks all framing. SAMEORIGIN allows framing only from your own domain. This prevents clickjacking attacks where attackers overlay invisible frames to trick users into clicking malicious elements.
What is X-Content-Type-Options?
Preventing MIME type sniffingX-Content-Type-Options: nosniff prevents browsers from guessing (sniffing) the content type of files. Without it, browsers might execute malicious files disguised as images or other safe content. This header ensures files are only processed according to their declared content type.
How do I configure Content Security Policy (CSP)?
Setting up CSP for XSS protectionCSP defines which resources (scripts, styles, images) can load on your page. Start with a permissive policy like “default-src ‘self’; script-src ‘self’ ‘unsafe-inline’; style-src ‘self’ ‘unsafe-inline’; img-src ‘self’ data:” then tighten as needed. Test thoroughly—strict CSP can break functionality.
What CSP directives should I use?
Common CSP configuration examplesKey directives: default-src (fallback for all), script-src (JavaScript), style-src (CSS), img-src (images), font-src (fonts), connect-src (AJAX/fetch). Values: ‘self’ (same origin), ‘unsafe-inline’ (inline code), ‘none’ (block all), specific domains. Use browser console to debug violations.
What is Referrer-Policy?
Controlling referrer informationReferrer-Policy controls how much URL information is sent when navigating from your site. ‘strict-origin-when-cross-origin’ (recommended) sends origin only for cross-site requests. ‘no-referrer’ sends nothing. This protects user privacy and prevents leaking sensitive URL parameters.
What is Permissions-Policy?
Controlling browser feature accessPermissions-Policy (formerly Feature-Policy) controls which browser features your site can use. Example: ‘geolocation=(), microphone=(), camera=()’ disables location, mic, and camera access. This prevents malicious scripts from accessing sensitive device features.
How do I test my security headers?
Verifying security header configurationUse securityheaders.com to scan your site and get a security grade. Check browser developer tools (Network tab → Response Headers). Monitor browser console for CSP violations. Test all functionality after enabling headers—especially forms, third-party integrations, and embeds.
What headers should I enable first?
Recommended security header priorityStart with low-risk headers: X-Frame-Options: DENY, X-Content-Type-Options: nosniff, Referrer-Policy: strict-origin-when-cross-origin. Then add HSTS (test thoroughly first). Finally, implement CSP gradually. Each header should be tested in staging before production.
Why is my site broken after enabling security headers?
Troubleshooting security header issuesCommon issues: CSP blocking inline scripts/styles (add ‘unsafe-inline’ or use nonces), CSP blocking third-party resources (add domains to policy), X-Frame-Options breaking legitimate embeds (use SAMEORIGIN or CSP frame-ancestors), HSTS locking out HTTP (ensure HTTPS works first).