Cross-Origin Headers für Next.js

COOP, CORP und optional COEP auf Next.js einrichten — mit next.config.js headers(), Middleware für differenzierte Steuerung und Vercel-Kompatibilität.

Next.js · Schritt für Schritt

Cross-Origin Headers auf Next.js

Next.js bietet zwei Wege für Cross-Origin Headers: die headers()-Funktion in next.config.js für statische Header und Middleware (middleware.ts) für dynamische, routenbasierte Steuerung. Beide Ansätze funktionieren auf Vercel und selbst-gehostetem Next.js.

Diese Anleitung zeigt die Implementierung in drei Schritten: COOP über next.config.js, CORP differenziert per Middleware und optional COEP für vollständige Cross-Origin Isolation. Die headers()-Methode ist der einfachste Einstieg — Middleware bietet maximale Flexibilität. Cross-Origin Headers bringen 30 von 166 Punkten im Wolf-Agents Web Security Check.

1 Schritt 1 von 3

COOP konfigurieren — next.config.js

Setzen Sie Cross-Origin-Opener-Policy und Cross-Origin-Resource-Policy über die headers()-Funktion in next.config.js. Diese Methode setzt die Header für alle Routen statisch — ideal für den Einstieg.

next.config.js Basis-Konfiguration
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
        { key: 'Cross-Origin-Resource-Policy', value: 'same-origin' }
      ]
    }];
  }
};
source: '/(.*)' — Alle Routen

Das Pattern /(.*) matched alle Routen inklusive API-Routes und statischer Assets. Für differenzierte Konfiguration verwenden Sie mehrere Einträge mit verschiedenen source-Patterns oder Middleware.

Vercel-Deployment

Die headers()-Funktion in next.config.js wird auf Vercel korrekt angewendet. Alternativ können Sie Header auch in vercel.json definieren — next.config.js hat jedoch Vorrang.

2 Schritt 2 von 3

CORP hinzufügen — Middleware für differenzierte Steuerung

Für dynamische, routenbasierte Header verwenden Sie Next.js Middleware. So können Sie verschiedene Cross-Origin-Resource-Policy-Werte für API-Routen und öffentliche Assets setzen.

middleware.ts Differenziert
// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();
  response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
  response.headers.set('Cross-Origin-Resource-Policy', 'same-origin');
  return response;
}

headers() vs. Middleware

next.config.js headers()

Statische Header-Definition. Einfach, deklarativ. Ideal wenn alle Routen die gleichen Header brauchen. Pattern-Matching über source.

Middleware

Dynamische Header-Steuerung mit Code. Volle Kontrolle über Request-Pfad, Cookies, Geo-Location. Ideal für differenzierte CORP-Werte.

Kombination

Verwenden Sie headers() für globale Basis-Header und Middleware für Ausnahmen. Middleware-Header überschreiben headers()-Einträge.

Middleware läuft auf der Edge Runtime und hat keinen Zugriff auf Node.js-APIs. Für komplexe Logik verwenden Sie headers() mit mehreren source-Patterns.
3 Schritt 3 von 3

COEP optional aktivieren und testen

Für vollständige Cross-Origin Isolation fügen Sie Cross-Origin-Embedder-Policy: require-corp hinzu. Prüfen Sie vorher, ob alle externen Ressourcen CORP- oder CORS-Header senden.

COEP mit require-corp blockiert alle externen Ressourcen ohne CORP- oder CORS-Header — darunter Google Fonts, YouTube-Embeds, Analytics-Scripts und CDN-Bilder. Testen Sie gründlich in der Entwicklungsumgebung.
Terminal Verifizieren
# Next.js Development Server starten
npm run dev

# Cross-Origin Header prüfen
curl -sI http://localhost:3000 | grep -i cross-origin

# Erwartete Ausgabe:
# cross-origin-opener-policy: same-origin
# cross-origin-resource-policy: same-origin

# Cross-Origin Isolation in Browser-Konsole prüfen:
# crossOriginIsolated === true
Alternative: credentialless

Cross-Origin-Embedder-Policy: credentialless (Chrome 96+, Firefox 119+) ist weniger streng als require-corp und bricht seltener Drittanbieter-Ressourcen. Allerdings unterstützt Safari credentialless nicht.

Wie steht Ihre Domain bei Cross-Origin Headers?

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

Häufig gestellte Fragen

headers() oder Middleware — was soll ich verwenden?

Verwenden Sie headers() in next.config.js für statische Header, die für alle Routen gelten. Middleware (middleware.ts) bietet dynamische Steuerung — ideal, wenn Sie unterschiedliche CORP-Werte für API-Routen und öffentliche Assets benötigen. Beide Ansätze funktionieren auf Vercel und selbst-gehostetem Next.js.

Setzt Vercel automatisch Cross-Origin Headers?

Nein, Vercel setzt keine Cross-Origin Headers automatisch. Sie müssen COOP, CORP und optional COEP selbst konfigurieren — entweder in next.config.js (headers()) oder über eine vercel.json. Die headers()-Methode in next.config.js wird auf Vercel korrekt angewendet.

Funktioniert Cross-Origin Isolation mit Next.js Image Optimization?

Ja. Next.js Image Optimization (/_next/image) liefert Bilder über Ihre eigene Domain aus. Mit CORP auf same-origin oder same-site funktioniert die Bildoptimierung problemlos. Bei externen Bildern über next/image mit loader muss CORP auf dem Quellserver gesetzt sein.

Kann ich COOP nur für bestimmte Routen setzen?

In next.config.js können Sie mit source-Pattern bestimmte Routen ansprechen. Für dynamische Logik verwenden Sie Middleware: Dort können Sie den Request-Pfad prüfen und Header bedingt setzen. So erhalten API-Routen andere Header als Seiten.

Bricht COEP Next.js-Funktionen wie ISR oder SSR?

COEP betrifft nur den Browser, nicht den Server. ISR (Incremental Static Regeneration) und SSR (Server-Side Rendering) sind nicht betroffen. Probleme entstehen nur bei externen Ressourcen im Browser — Google Fonts, Analytics-Scripts, YouTube-Embeds.

Brauche ich alle drei Cross-Origin Header für Next.js?

Nein. Starten Sie mit COOP (same-origin) und CORP (same-origin). Diese sind risikoarm und bieten bereits Schutz vor Window-Manipulation und Ressourcen-Hotlinking. COEP nur hinzufügen, wenn Sie SharedArrayBuffer oder vollständige Cross-Origin Isolation benötigen.