Security Headers

Enhance your Next.js application's security by configuring essential HTTP headers.

Setting appropriate HTTP security headers is a vital step in protecting your application and users from common web vulnerabilities like cross-site scripting (XSS), clickjacking, and MIME-sniffing attacks. Next.js allows you to configure these headers easily within your next.config.js (or next.config.mjs) file.

Configuring Headers in `next.config.js`

You can define custom headers using the headers async function in your Next.js configuration. This function returns an array of objects, each specifying a source path pattern and the headers to apply.

next.config.js

import { createMDX } from "fumadocs-mdx/next"; // Remove this if you are not using Fumadocs
import type { NextConfig } from "next";
 
const withMDX = createMDX(); // Remove this if you are not using Fumadocs
 
/** @type {import('next').NextConfig} */
const nextConfig: NextConfig = {
  // Not preferred but you can if want
  eslint: {
    ignoreDuringBuilds: true,
  },
  reactStrictMode: true,
  images: {
    remotePatterns: [
      // Add other necessary image domains here, e.g.:
      {
        protocol: "https",
        hostname: "i.pravatar.cc",
      },
      {
        protocol: "https",
        hostname: "lh3.googleusercontent.com",
      },
    ],
  },
  // Add the security headers configuration here
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: "/(.*)",
        headers: [
          // Enforces HTTPS (avoids protocol downgrade attacks and cookie hijacking).
          {
            key: "Strict-Transport-Security",
            value: "max-age=63072000; includeSubDomains; preload", // 2 years
          },
          // Prevents clickjacking attacks by disallowing framing of your site.
          {
            key: "X-Frame-Options",
            value: "DENY",
          },
          // Prevents browsers from MIME-sniffing the content-type.
          {
            key: "X-Content-Type-Options",
            value: "nosniff",
          },
          // Controls how much referrer information is sent with requests.
          {
            key: "Referrer-Policy",
            value: "origin-when-cross-origin",
          },
        ],
      },
    ];
  },
};
 
// Wrap with withMDX if using Fumadocs, otherwise just export nextConfig
export default withMDX(nextConfig); // Update to 'export default nextConfig;' if not using Fumadocs

Explanation of Headers:

Strict-Transport-Security (HSTS): Tells browsers to always connect to your site using HTTPS, preventing man-in-the-middle attacks. The preload directive allows your domain to be included in browser preload lists for enhanced security.
X-Frame-Options: Prevents your site from being embedded within an <iframe>, <frame>, <embed>, or <object>, mitigating clickjacking attacks. DENY blocks all framing.
X-Content-Type-Options: Stops browsers from trying to guess (MIME-sniff) the content type of a response if it differs from the declared Content-Type header, preventing certain types of attacks.
Referrer-Policy: Controls how much referrer information (the URL of the previous page) is included with requests. origin-when-cross-origin sends the full URL for same-origin requests but only the origin for cross-origin requests.

These headers provide a strong baseline security posture for your Next.js application. Regularly review and update them based on evolving security best practices and your application's specific requirements.

Configuring Headers in next.config.js

Explanation of Headers:

On this page

Configuring Headers in `next.config.js`