security-headers.md

Security Headers Configuration

Protect against XSS, Clickjacking, MIME sniffing, and other common web attacks.

Setup

Add security headers to next.config.ts:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains',
          },
        ],
      },
    ]
  },
}

export default nextConfig

What Each Header Does

Header	Protection
X-Frame-Options: DENY	Prevents your site from being embedded in iframes (clickjacking)
X-Content-Type-Options: nosniff	Prevents browsers from guessing content types (MIME sniffing)
Referrer-Policy	Controls how much URL info is sent to other sites
Strict-Transport-Security	Forces HTTPS connections

Verify After Deployment

1. Open Chrome DevTools
2. Go to Network tab
3. Click on any request to your site
4. Check Response Headers section
5. Verify all 4 headers are present

Advanced (Optional)

Content-Security-Policy (CSP) - The most powerful header, but can break your app if misconfigured. Only add after thorough testing:

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

Start with report-only mode first: Content-Security-Policy-Report-Only