What is Security Headers?
HTTP response headers that instruct browsers to enforce security policies, protecting users from common attacks like cross-site scripting, clickjacking, and data sniffing.
In plain English
Security headers are like instructions printed on a package telling the courier how to handle it — 'Fragile, keep upright, do not open.' The browser reads these headers and follows the instructions to keep your site safe during delivery to the user.
How it works
When your server sends a response, it includes HTTP headers alongside the content. Security headers tell the browser to enable specific protections: block mixed content, prevent the page from being embedded in iframes, restrict where scripts can load from, and more. They're a zero-cost security layer that requires no code changes — just server configuration.
Why it matters for AI-built apps
AI-generated apps almost never include security headers, leaving users vulnerable to a range of attacks that are trivially preventable. Adding headers like Content-Security-Policy, X-Frame-Options, and Strict-Transport-Security can block entire categories of exploits with a few lines of configuration.
Common issues
Missing Content-Security-Policy (allows XSS), missing X-Frame-Options (allows clickjacking), missing Strict-Transport-Security (allows downgrade attacks), overly permissive CORS headers, not setting X-Content-Type-Options (allows MIME sniffing), and missing Referrer-Policy (leaks sensitive URLs to third parties).
Best practices
Add these headers to every response: Strict-Transport-Security (HSTS), Content-Security-Policy, X-Frame-Options, X-Content-Type-Options: nosniff, Referrer-Policy, and Permissions-Policy. Use securityheaders.com to scan your site. In Next.js, set headers in next.config.js or middleware. Start with a report-only CSP to avoid breaking functionality.
Frequently asked questions
How do I add security headers to my Next.js app?
In Next.js, add a 'headers' function to your next.config.js that returns an array of header objects. You can also set headers in middleware.ts for more dynamic control. Key headers to add: Strict-Transport-Security, X-Frame-Options: DENY, X-Content-Type-Options: nosniff, and Content-Security-Policy.
Will security headers break my site?
Content-Security-Policy can break things if too strict — it may block legitimate scripts or styles. Start with 'Content-Security-Policy-Report-Only' to log violations without blocking them. The other headers (HSTS, X-Frame-Options, X-Content-Type-Options) are safe to add immediately and rarely cause issues.
Check your app
Get a professional review of your app at a fixed price.
Security Scan
Black-box review of your public-facing app. No code access needed.
- OWASP Top 10 checks
- SSL/TLS analysis
- Security headers
- Expert review within 24h
Code Audit
In-depth review of your source code for security, quality, and best practices.
- Security vulnerabilities
- Code quality review
- Dependency audit
- AI pattern analysis
Complete Bundle
Both scans in one package with cross-referenced findings.
- Everything in both products
- Cross-referenced findings
- Unified action plan
100% credited toward any paid service. Start with an audit, then let us fix what we find.
Worried about security headers in your app?
Get a professional code audit ($19) or book a free call to discuss your concerns.