Next.js Security Headers & CSP Generator

Almost every AI starter ships with zero security headers. That leaves your app vulnerable to clickjacking and script injection. Select your third-party integrations below to generate clean, battle-tested headers in seconds.

Allowed Third Parties & Services

Stripe Payments

Allows js.stripe.com script and checkout iframes

Supabase API & Realtime

Allows https and wss connections to supabase.co

Google Fonts

Allows fonts.googleapis.com and fonts.gstatic.com

Analytics (PostHog / Google / Vercel)

Allows event beacon endpoints without blocking

Remote Images

Allows loading images from any secure https origin

Video Embeds (YouTube / Loom / Vimeo)

Allows embedding safe player iframes

Browser Defense Policies

Block Iframe Embedding (X-Frame-Options: DENY)

Prevents third-party sites from framing your app to steal clicks

Prevent MIME-Sniffing (X-Content-Type-Options)

Forces browsers to honor declared content types

Enforce HSTS Preload (Strict-Transport-Security)

Tells browsers to always use HTTPS for 2 years

What Each Header Actually Protects

Content-Security-Policy: Whitelists exact domains your frontend can fetch scripts and styles from, killing rogue injected scripts in their tracks.

X-Frame-Options: Stops scammers from embedding your login or checkout screen inside a transparent iframe to steal user clicks.

Permissions-Policy: Disables unauthorized camera, microphone, and geolocation hardware access by default.

Config file: next.config.ts42 lines

import type { NextConfig } from 'next';

const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://js.stripe.com https://www.googletagmanager.com https://us.i.posthog.com https://eu.i.posthog.com https://va.vercel-scripts.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' blob: data: https:; font-src 'self' data: https://fonts.gstatic.com; connect-src 'self' https://api.stripe.com https://*.supabase.co wss://*.supabase.co https://*.google-analytics.com https://us.i.posthog.com https://eu.i.posthog.com https://vitals.vercel-insights.com; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests",
  },
  {
    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=(), browsing-topics=()',
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload',
  },
];

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ];
  },
};

export default nextConfig;

How to Apply in Next.js

Paste the snippet into your project root as next.config.ts.
Run npm run build locally to verify there are no syntax conflicts.
Deploy to production. You can inspect your live response headers in Chrome DevTools under the Network tab.

Want to test your live production deployment?

Headers are only one part of launch readiness. The Founder Pass ($15 one-time) analyzes your live headers, repository secrets, and 106 other launch criteria in minutes.

Get Full Audit with Founder Pass