Headers
Why AI-built sites forget security headers
Generated code optimises for visible functionality. Security headers stay invisible until a scanner, a browser, or an attacker asks for them.
· 4 min read
Security headers are classic production glue. They rarely appear in a component, a screenshot, or a product demo, so AI-generated code omits them even when the visible app is polished. The result is a site that feels finished but gives the browser fewer instructions than it should.
The five that get missed
Content Security Policy, HTTP Strict Transport Security, X-Content-Type-Options, Referrer-Policy and frame protection. None of them require a headless browser to detect. They are HTTP facts: the response either contains them or it does not.
That binary quality is why they are worth fixing first. There is no investigation, no reproduction steps, and no debate about severity — just a header that should be there.
Fix them at the edge, once
Headers are usually a framework or hosting concern rather than an application one. In Next.js that might be next.config.ts, a route handler, or proxy-level configuration. On a CDN it may be a response header rule.
The best fix is the one closest to the edge, where every route inherits the same baseline. A header applied per-page is a header that will be missing from the page you add next month.
Do not paste someone else's CSP
Start narrow, check what the app actually loads, and tighten from there. The policy should describe your app, not someone else's threat model.
This is the header most likely to break something visible, so it deserves the most care. If you want help writing it, prompt the agent with your real integrations rather than asking for the strictest possible policy.
Common questions
Which security header should I add first?
X-Content-Type-Options and Referrer-Policy are single values with essentially no risk of breaking anything, so add those immediately. Content Security Policy delivers the most protection but needs the most care, so do it deliberately rather than in a rush.
Do security headers slow a site down?
No. They are a few hundred bytes on the response and require no extra requests or processing.
Where do I set headers in Next.js?
The headers() function in next.config.ts applies them across routes at build time, which is usually the right place. Proxy or middleware layers can also set them per-request when the value needs to vary.
Keep reading
The security checklist for vibe-coded websites
A practical pre-launch pass for sites built quickly with AI: the checks that catch public mistakes without turning the project into a month-long audit.
Prompting an agent to fix CSP safely
Content Security Policy is powerful and easy to over-tighten. Give your coding agent evidence, constraints, and a verification loop.
CORS is not a vibe setting
A wildcard origin can be harmless on a public asset endpoint and dangerous on an authenticated API. Know which one you actually shipped.