Back to Security Academy
INFRASTRUCTURE HEADERSBEGINNER6 min readCWE-1021ZX-HEADERS-001

Configuring Bulletproof HTTP Security Headers (CSP, HSTS, X-Frame-Options)

A practical guide to implementing Content-Security-Policy, Strict-Transport-Security, and framing protections in Next.js and Nginx.

Why AI coding tools introduce this vulnerability

AI coding tools almost never configure security headers unless explicitly instructed in the prompt. By default, Next.js, Express, and Vite serve pages without Content-Security-Policy, HSTS, or clickjacking protections.

Technical Vulnerability Analysis

Missing security headers leaves web applications vulnerable to clickjacking attacks (embedding the application in an invisible iframe), SSL stripping attacks, and unconstrained script execution.

VULNERABLE IMPLEMENTATION (DO NOT USE)
// Default Next.js config without security headers (INCOMPLETE)
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};
export default nextConfig;
Omits Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, and HSTS headers.

Remediation Playbook & Code Fixes

SECURE HARDENED PATCH (next.config.mjs)
/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
          { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;",
          },
        ],
      },
    ];
  },
};
export default nextConfig;

Why this fix works: Configure global security headers in Next.js config across all routes.

Local CLI Verification Commands

Inspect live HTTP response headers for presence of required defensive directives.
curl -sI https://example.com | grep -iE "(strict-transport|x-frame|content-security)"
Expected result: X-Frame-Options: DENY Strict-Transport-Security: max-age=63072000 Content-Security-Policy: ...

Pre-Deployment Self-Audit Checklist

Knowledge Check: Verify Your Understanding

What is the primary architectural cause of configuring bulletproof http security headers (csp, hsts, x-frame-options)?

Test your website for ZX-HEADERS-001

Run our 14 deterministic engines to inspect your live deployment.

Launch scan for this flaw