The Complete Guide to HTTP Security Headers in 2026

Why Security Headers Matter

Security headers are your first line of defense against common web attacks. They tell browsers how to behave when handling your site's content — blocking XSS, preventing clickjacking, and enforcing HTTPS.

Yet over 70% of websites are missing critical security headers. Here's every header you need and how to configure them.

The Essential Headers

1. Content-Security-Policy (CSP)

CSP is the most powerful security header. It controls which resources can load on your page, effectively blocking XSS attacks.

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'

Common mistakes:

2. Strict-Transport-Security (HSTS)

Forces browsers to always use HTTPS, preventing protocol downgrade attacks.

Strict-Transport-Security: max-age=63072000; includeSubDomains; preload

Set max-age to at least 1 year (31536000). Include preload and submit to hstspreload.org for maximum protection.

3. X-Frame-Options

Prevents clickjacking by controlling whether your page can be embedded in iframes.

X-Frame-Options: DENY

Use DENY unless you specifically need framing. The CSP frame-ancestors directive is the modern replacement.

4. X-Content-Type-Options

Prevents MIME-type sniffing attacks.

X-Content-Type-Options: nosniff

Always set this. There's no reason not to.

5. Referrer-Policy

Controls how much referrer information is sent with requests.

Referrer-Policy: strict-origin-when-cross-origin

6. Permissions-Policy

Controls which browser features your site can use.

Permissions-Policy: camera=(), microphone=(), geolocation=()

Disable features you don't use. This reduces your attack surface.

How to Test Your Headers

Use ScanMyVibe to instantly check all your security headers. The scanner tests every header listed above plus 90+ additional security checks, and generates AI-powered fix prompts you can paste directly into your IDE.

Next.js Configuration

// next.config.ts
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: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
        { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
      ],
    }]
  },
}

Summary

Setting up security headers takes 15 minutes and dramatically reduces your attack surface. Start with the 6 essential headers above, then use ScanMyVibe to verify your configuration is correct.