Security Headers
Security headers are HTTP response headers that instruct browsers to enable specific security features, providing defense-in-depth against common web attacks like XSS, clickjacking, and data leakage.
Understanding Security Headers
Modern browsers support a set of security-focused HTTP headers that applications can use to opt into additional protections. These headers are part of a defense-in-depth strategy — they do not fix underlying vulnerabilities but add layers of protection that make exploitation harder or impossible.
The most impactful security headers include: Content-Security-Policy (controls which resources the browser loads), Strict-Transport-Security (enforces HTTPS), X-Content-Type-Options: nosniff (prevents MIME type confusion), X-Frame-Options (prevents clickjacking), Referrer-Policy (controls what information is sent in the Referer header), and Permissions-Policy (restricts access to browser features like camera and geolocation).
Each header addresses a specific threat model. X-Content-Type-Options prevents the browser from interpreting a file as a different MIME type than declared, stopping attacks where a malicious file is uploaded with a benign extension. X-Frame-Options prevents your site from being embedded in iframes on malicious pages, blocking clickjacking attacks. Referrer-Policy controls how much URL information is leaked to external sites when users click links.
The effort-to-impact ratio of security headers is excellent. Most can be added as a single line in your server configuration or hosting platform settings. Headers like X-Content-Type-Options: nosniff and Strict-Transport-Security have no functional side effects for HTTPS sites and should be considered baseline requirements for any web application.
Why This Matters for Vibe-Coded Apps
AI-generated applications almost never include security headers because they have no visible impact on functionality. Vibe-coded apps deployed without security headers are missing several layers of free protection. The good news is that security headers can be added after deployment without changing application code — most hosting platforms support header configuration.
For Next.js vibe-coded apps, security headers can be set in next.config.js using the headers() function. For apps on Vercel, they can go in vercel.json. For apps behind Cloudflare, headers can be set at the CDN level. Vibe App Scanner checks for all critical security headers and provides specific configuration guidance for your hosting platform.
Real-World Examples
SecurityHeaders.com Grading
The SecurityHeaders.com tool grades websites on their header configuration. Studies using this tool have found that a majority of the Alexa top 1 million sites are missing critical security headers, with less than 10% deploying a Content-Security-Policy. This demonstrates how widely security headers are neglected even by major organizations.
GitHub Security Headers Leadership
GitHub has consistently been a leader in security header adoption, deploying strict CSP with nonces, comprehensive HSTS with preloading, and restrictive Permissions-Policy. Their approach is often cited as a reference implementation for how security headers should be configured on complex web applications.
NHS Website Clickjacking via Missing Headers
The UK National Health Service website was found to be vulnerable to clickjacking due to missing X-Frame-Options headers. An attacker could embed the NHS site in a hidden iframe and trick users into clicking buttons that performed unintended actions, such as registering for services or modifying account settings.
Frequently Asked Questions
Which security headers should every website have?
At minimum: Strict-Transport-Security (HSTS) with a long max-age, X-Content-Type-Options: nosniff, X-Frame-Options: DENY (or SAMEORIGIN if you embed your own pages), and Referrer-Policy: strict-origin-when-cross-origin. Content-Security-Policy is highly recommended but requires more careful configuration. Permissions-Policy should also be set to restrict unused browser APIs. These headers provide significant protection with minimal risk of breaking functionality.
Can security headers be added without changing code?
Yes. Most hosting platforms and CDNs allow you to configure response headers at the infrastructure level. Vercel uses vercel.json or next.config.js headers, Netlify uses _headers or netlify.toml, Cloudflare uses Transform Rules or Workers, and traditional servers use web server configuration (nginx.conf, .htaccess). This means you can add security headers to any application regardless of the underlying framework.
Do security headers affect performance?
Security headers add negligible overhead — they are just a few extra bytes in the response. Some can actually improve performance: HSTS eliminates HTTP-to-HTTPS redirects by having the browser go directly to HTTPS. CSP can prevent unwanted resource loading. The Permissions-Policy header has zero performance impact since it only restricts browser APIs. There is no performance reason to skip security headers.
How do I test my security headers?
Use securityheaders.com for a quick grade and recommendations. The Mozilla Observatory (observatory.mozilla.org) provides a more comprehensive analysis including CSP evaluation. Browser developer tools show all response headers in the Network tab. For automated testing, tools like Vibe App Scanner check security headers as part of a comprehensive security scan and provide platform-specific remediation guidance.
Is Your App Protected?
VAS automatically scans for vulnerabilities related to security headers and provides detailed remediation guidance. Our scanner targets issues common in AI-generated applications.
Scans from $5, results in minutes. Get actionable fixes tailored to your stack.
Get Starter Scan