Set Security Headers

Why this matters

HTTP security headers are a defense-in-depth layer that mitigates common web attacks even when other defenses fail. They are set once in your server configuration and protect every page and API response.

Without these headers:

• No Content-Security-Policy (CSP): Injected scripts execute freely. CSP restricts which scripts can run, which sources can be loaded, and blocks inline script execution — dramatically reducing XSS impact.
• No X-Frame-Options: Your pages can be embedded in an attacker's iframe, enabling clickjacking attacks where users interact with your hidden site while seeing a fake overlay.
• No HSTS: Connections can be downgraded from HTTPS to HTTP via an SSL stripping attack, exposing session cookies and credentials in transit.
• No X-Content-Type-Options: Browsers may MIME-sniff responses and execute uploaded files as scripts.

The rule

Set these security headers on all HTTP responses:

• Content-Security-Policy — restrict script/style/image sources
• Strict-Transport-Security — enforce HTTPS
• X-Content-Type-Options: nosniff — prevent MIME sniffing
• X-Frame-Options: DENY (or SAMEORIGIN) — prevent clickjacking
• Referrer-Policy: strict-origin-when-cross-origin — limit referrer leakage
• Permissions-Policy — restrict browser features (camera, microphone, geolocation)

Bad example

// next.config.ts — no security headers configured
const nextConfig = {
  // No headers configured
};
 
export default nextConfig;

Good example

// next.config.ts — security headers on all responses
const securityHeaders = [
  {
    key: "Content-Security-Policy",
    value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains; preload",
  },
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
  {
    key: "X-Frame-Options",
    value: "DENY",
  },
  {
    key: "Referrer-Policy",
    value: "strict-origin-when-cross-origin",
  },
  {
    key: "Permissions-Policy",
    value: "camera=(), microphone=(), geolocation=()",
  },
];
 
const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
};
 
export default nextConfig;

How to detect

Check your application's response headers:

curl -I https://your-app.com

Look for missing security headers. Use securityheaders.com for a comprehensive scan.

Remediation

1. Add security headers to your Next.js config (or Express middleware, or Nginx config)
2. Start with a permissive CSP and tighten it incrementally using Content-Security-Policy-Report-Only
3. Test that your application still works with all headers enabled
4. Add a CI check that verifies security headers are present on all responses
5. Scan your production site with securityheaders.com and fix any missing headers

References

• MDN: HTTP Security Headers
• OWASP: Secure Headers Project
• Next.js: Security Headers