Platform Guide

How to Add Security Headers to Next.js

Add CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy to Next.js. Copy-paste configuration included.

The 6 Essential Security Headers

Content-Security-Policy (CSP)

Controls which sources of scripts, styles, and resources are allowed. Prevents XSS by blocking inline scripts and unauthorized external scripts.

Strict-Transport-Security (HSTS)

Forces browsers to always use HTTPS, preventing protocol downgrade attacks and cookie hijacking over HTTP.

X-Frame-Options

Prevents your page from being loaded in an iframe, blocking clickjacking attacks.

X-Content-Type-Options

Prevents browsers from MIME-sniffing the content type, stopping attacks that rely on content type confusion.

Referrer-Policy

Controls how much referrer information is sent with requests, protecting user privacy and preventing information leakage.

Permissions-Policy

Controls which browser features (camera, microphone, geolocation) your page can use, reducing attack surface.

Next.js Configuration

Add this to next.config.js or next.config.ts in your project root:

// next.config.ts
const nextConfig = {
  poweredByHeader: false,
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
        { 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: 'X-XSS-Protection', value: '1; mode=block' },
        {
          key: 'Content-Security-Policy',
          value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
        },
      ],
    }];
  },
};

Set poweredByHeader: false to remove the X-Powered-By: Next.js header. CSP with 'unsafe-inline' and 'unsafe-eval' may be needed for Next.js — tighten as much as your app allows. These headers apply to all routes.

How to Test Your Headers

curl -I http://localhost:3000

Or use Cybrove's free security check to automatically validate all security headers and get specific fix recommendations.

Complete guide to fixing missing security headers

In-depth blog post covering all headers across all platforms

Frequently Asked Questions

How do I add security headers to Next.js?

Add security headers to Next.js by modifying next.config.js or next.config.ts in your project root. The essential headers are CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy. See the configuration example above.

How do I test if my Next.js security headers are working?

Run: curl -I http://localhost:3000 and check the response headers. Or use Cybrove's free security check at cybrove.com/scan which automatically validates all security headers and reports which are missing.

Which security headers are most important for Next.js?

CSP (prevents XSS), HSTS (forces HTTPS), and X-Frame-Options (prevents clickjacking) are the most critical. X-Content-Type-Options and Referrer-Policy provide additional protection with minimal configuration effort.

Check if your Next.js headers are configured correctly

Free security check validates all 6 headers plus SSL, DNS, and email authentication.

Free Security Check