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.
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.
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.
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.
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.
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
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.
headers() mit mehreren source-Patterns. 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.
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. # 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 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.