Security Headers
: HTTP response headers that instruct the browser to enable security features protecting against common web attacks. Key security headers include Content-Security-Policy, Strict-Transport-Security, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, and Permissions-Policy.
Why It Matters for AI-Coded Apps
Security headers are the lowest-effort, highest-impact security improvement you can make. They take minutes to configure and protect against entire classes of attacks. Yet 89% of vibe-coded apps in our research were missing critical security headers. AI tools almost never add security headers unless explicitly prompted.
Real-World Example
A complete set of security headers for a Next.js app in next.config.js:
| |
How to Detect and Prevent It
Add security headers in your server configuration, middleware, or hosting platform settings. Test with securityheaders.com. Start with the five essential headers (HSTS, CSP, X-Content-Type-Options, X-Frame-Options, Referrer-Policy). Most hosting platforms (Vercel, Netlify) support configuring headers in their config files.
Frequently Asked Questions
What are the most important security headers?
In order of impact: 1) Content-Security-Policy (prevents XSS), 2) Strict-Transport-Security (enforces HTTPS), 3) X-Content-Type-Options: nosniff (prevents MIME sniffing), 4) X-Frame-Options: DENY (prevents clickjacking), 5) Referrer-Policy (controls information leakage).
How do I add security headers on Vercel?
Add a
headers() function in next.config.js or create a vercel.json with a headers array. For middleware-based approach, set headers in middleware.ts. Vercel also supports headers in vercel.json for static sites.Do security headers affect performance?
No. Security headers are tiny additions to HTTP responses (a few hundred bytes). They add zero latency and no computational overhead. The browser processes them instantly. There is no performance reason to skip security headers.