What is Secure Headers?

Secure Headers are HTTP response headers that tell browsers how to handle security policies—preventing XSS, clickjacking, MIME sniffing, and other attacks. Key headers: Content-Security-Policy (CSP), Strict-Transport-Security (HSTS), X-Frame-Options, X-Content-Type-Options, Referrer-Policy. Easy to add, huge security impact.

When Should You Use This?

Add secure headers to all web apps. Use tools like securityheaders.com to audit your site. Most Next.js/Vercel apps should set CSP, HSTS, X-Frame-Options: DENY, X-Content-Type-Options: nosniff. Use middleware or server config to set headers globally. Test with browser dev tools (Network tab → Response Headers).

Common Mistakes to Avoid

• •Not setting any security headers—leaves app vulnerable to common attacks
• •Setting X-Frame-Options: ALLOW but forgetting CSP frame-ancestors—both needed for clickjacking protection
• •Not enforcing HTTPS with HSTS—browsers may load HTTP version first (MITM risk)
• •Using Referrer-Policy: unsafe-url—leaks sensitive URLs to third parties; use strict-origin-when-cross-origin
• •Forgetting Permissions-Policy—restricts browser features like geolocation, camera, microphone

Real-World Examples

• •GitHub—sets CSP, HSTS, X-Frame-Options to prevent XSS and clickjacking
• •Vercel—automatically sets secure headers for Next.js apps (configurable in next.config.js)
• •Mozilla Observatory—free tool to scan your site and recommend security headers
• •Cloudflare—can inject security headers for all sites behind their CDN