Alle Security Headers für Next.js konfigurieren

Vollständige middleware.ts: 11 Security Headers mit CSP-Nonces und strict-dynamic. Kopieren, anpassen, deployen — fertig.

Header prüfen Plattform entdecken

Next.js · Vollständige Konfiguration

Von Wolf-Agents Security Team · Aktualisiert: 26. März 2026

Next.js middleware.ts mit CSP-Nonces

Next.js setzt Security Headers zentral in der middleware.ts im Projekt-Root. Der entscheidende Vorteil gegenüber statischer Konfiguration: Die Middleware generiert bei jedem Request einen einzigartigen CSP-Nonce, der 'unsafe-inline' überflüssig macht. In Kombination mit 'strict-dynamic' entfällt die Pflege von Domain-Whitelists vollständig.

Der Nonce wird über den x-nonce-Header an Server Components weitergegeben. In Ihrem Root Layout lesen Sie headers().get('x-nonce') und setzen den Nonce auf <script>-Tags. Details zur CSP-Konfiguration im CSP-Kapitel.

Zurück zur Implementierungs-Architektur

Vollständige Konfiguration

Erstellen Sie middleware.ts im Projekt-Root. Stellen mit ANPASSEN: müssen Sie an Ihre Domain anpassen.

// middleware.ts — Alle Security-Header zentral
// Generiert aus Wolf-Agents Web Security Guide, Kapitel 00-16

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

  // --- Kap 01: Content Security Policy ---
  // ANPASSEN: Ersetzen Sie die Domains durch Ihre eigenen
  const csp = [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'unsafe-inline'`,
    `img-src 'self' data: https:`,
    `font-src 'self'`,
    `connect-src 'self'`,
    `object-src 'none'`,
    `worker-src 'self'`,
    `frame-ancestors 'self'`,
    `base-uri 'self'`,
    `form-action 'self'`,
    `upgrade-insecure-requests`,
    `report-to csp-endpoint`,
  ].join('; ');
  response.headers.set('Content-Security-Policy', csp);

  // --- Kap 02: HTTP Strict Transport Security ---
  response.headers.set('Strict-Transport-Security',
    'max-age=31536000; includeSubDomains; preload');

  // --- Kap 04: Permissions Policy ---
  response.headers.set('Permissions-Policy',
    'camera=(), microphone=(), geolocation=(), payment=(), usb=(), bluetooth=(), idle-detection=(), serial=(), browsing-topics=(), unload=()');

  // --- Kap 05: Clickjacking-Schutz ---
  response.headers.set('X-Frame-Options', 'SAMEORIGIN');

  // --- Kap 06: Referrer Policy ---
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');

  // --- Kap 07: MIME-Sniffing-Schutz ---
  response.headers.set('X-Content-Type-Options', 'nosniff');

  // --- Kap 08: Cross-Origin Isolation ---
  response.headers.set('Cross-Origin-Resource-Policy', 'same-origin');
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
  response.headers.set('Cross-Origin-Embedder-Policy', 'credentialless');

  // --- Kap 14: Reporting Endpoints ---
  // ANPASSEN: Ersetzen Sie die URL durch Ihren Reporting-Endpoint
  response.headers.set('Reporting-Endpoints',
    'csp-endpoint="https://ihre-domain.de/csp-report"');

  // --- Kap 16: Origin Agent Cluster ---
  response.headers.set('Origin-Agent-Cluster', '?1');

  // Nonce für nachfolgende Middleware/Pages verfügbar machen
  response.headers.set('x-nonce', nonce);

  return response;
}

export const config = {
  matcher: [
    // Alle Seiten außer statische Assets
    { source: '/((?!_next/static|_next/image|favicon.ico).*)',
      missing: [{ type: 'header', key: 'next-router-prefetch' }] },
  ],
};

Nonce-Weitergabe an Server Components

Der Nonce wird im x-nonce-Header an nachfolgende Server Components weitergegeben. In Ihrem Root Layout: const nonce = headers().get('x-nonce'). Dann auf Script-Tags: <Script nonce={nonce} />.

Was jeder Header macht

Header	Schutz	Kapitel
`Content-Security-Policy`	XSS-Angriffe verhindern — mit Nonces und strict-dynamic	Kap. 01
`Strict-Transport-Security`	HTTPS erzwingen — Downgrade-Angriffe verhindern	Kap. 02
`Permissions-Policy`	Browser-APIs deaktivieren — Kamera, Mikrofon, etc.	Kap. 04
`X-Frame-Options`	Clickjacking verhindern — Einbettung kontrollieren	Kap. 05
`Referrer-Policy`	URL-Leaks kontrollieren — Referrer-Informationen begrenzen	Kap. 06
`X-Content-Type-Options`	MIME-Sniffing verhindern — Dateitypen erzwingen	Kap. 07
`CORP / COOP / COEP`	Cross-Origin-Isolation — Spectre-Angriffe verhindern	Kap. 08
`Reporting-Endpoints`	Violation-Reports an Ihren Endpoint senden	Kap. 14
`Origin-Agent-Cluster`	Prozess-Isolation im Browser aktivieren	Kap. 16

Verifikation

Starten Sie den Dev-Server und prüfen Sie die Header.

# Dev-Server starten
npm run dev

# Alle Security Headers prüfen
curl -I http://localhost:3000 2>/dev/null | grep -iE \
  "content-security|strict-transport|x-frame|x-content-type|referrer-policy|permissions-policy|cross-origin|origin-agent|reporting-endpoints|x-nonce"

Nonce-Rotation prüfen

Laden Sie die Seite mehrmals neu und prüfen Sie, ob der x-nonce-Header bei jedem Request einen neuen Wert hat. Wenn der Nonce identisch bleibt, greift ein Cache — prüfen Sie Ihre Middleware-Konfiguration.

Auch verfügbar für:

Nginx Apache WordPress Cloudflare Express Caddy

Wie steht Ihre Domain bei Security-Header-Architektur?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.

Web Security Check starten Monitoring ab 199 EUR/Mo