Cross-Origin Headers für Nuxt 3
Schritt-für-Schritt: COOP, COEP und CORP in Nuxt 3 konfigurieren — Cross-Origin Isolation gegen Spectre-Angriffe aktivieren.
Cross-Origin Headers in Nuxt 3
Die Cross-Origin Headers (COOP, COEP, CORP) schützen gegen Seitenkanalangriffe wie Spectre, indem sie den Browser-Prozess Ihrer Website von anderen Origins isolieren. Zusammen sind sie mit 30 von 166 Punkten ein gewichtiger Faktor im Wolf-Agents Web Security Check.
In Nuxt 3 setzen Sie Cross-Origin Headers per routeRules in nuxt.config.ts oder über Nitro Server Middleware. Achtung: Cross-Origin Isolation kann externe Ressourcen (Bilder, Scripts von CDNs) blockieren — testen Sie gründlich.
Cross-Origin Headers per routeRules
Setzen Sie alle drei Cross-Origin Headers gleichzeitig. COOP: same-origin isoliert den Browsing Context, COEP: require-corp erzwingt CORP/CORS für alle eingebetteten Ressourcen, und CORP: same-origin schützt Ihre eigenen Ressourcen.
// nuxt.config.ts — Cross-Origin Headers per routeRules
export default defineNuxtConfig({
routeRules: {
'/**': {
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Resource-Policy': 'same-origin',
},
},
},
}) // server/middleware/cross-origin.ts — Nitro Middleware
export default defineEventHandler((event) => {
setHeaders(event, {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Resource-Policy': 'same-origin',
});
}) Credentialless als Alternative
Wenn require-corp externe Ressourcen blockiert, verwenden Sie credentialless als lockerere Alternative. Dieser Wert erlaubt das Laden externer Ressourcen ohne Credentials — ideal für CDN-Bilder und Third-Party-Scripts.
// nuxt.config.ts — Credentialless (lockere Variante)
export default defineNuxtConfig({
routeRules: {
'/**': {
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'credentialless',
},
},
},
}) credentialless wird noch nicht von allen Browsern unterstützt. Firefox unterstützt es seit Version 119, Safari seit Version 17.2. Prüfen Sie die Browser-Kompatibilität für Ihre Zielgruppe. Cross-Origin Isolation verifizieren
Prüfen Sie den Isolationsstatus in der Browser-Konsole und per curl. Wenn crossOriginIsolated true zurückgibt, ist Ihre Nuxt-Anwendung vollständig isoliert.
# Header prüfen
curl -sI https://ihre-domain.de | grep -i cross-origin
# Erwartete Ausgabe:
# Cross-Origin-Opener-Policy: same-origin
# Cross-Origin-Embedder-Policy: require-corp
# Cross-Origin-Resource-Policy: same-origin
# In der Browser-Konsole:
console.log(self.crossOriginIsolated);
# Erwartete Ausgabe: true Häufige Fehler
CDN-Bilder werden blockiert
COEP: require-corp blockiert Ressourcen ohne Cross-Origin-Resource-Policy-Header. Lösung: credentialless verwenden oder crossorigin-Attribut an Bildern setzen.
Google Analytics wird blockiert
Third-Party-Scripts ohne CORS-Support werden durch COEP blockiert. Nutzen Sie credentialless oder laden Sie Scripts über einen eigenen Proxy.
OAuth-Popups funktionieren nicht
COOP: same-origin isoliert Popup-Fenster. OAuth-Flows, die window.opener nutzen, brechen ab. Nutzen Sie Redirect-basierte OAuth-Flows statt Popups.
Compliance-Relevanz
Cross-Origin Isolation schützt gegen Spectre-Angriffe — eine reale Bedrohung für Anwendungen, die sensible Daten verarbeiten. NIS2 fordert Schutz gegen bekannte Angriffsvektoren. PCI DSS verlangt die Implementierung aller verfügbaren Schutzmaßnahmen. Der Wolf-Agents Web Security Check bewertet Cross-Origin Headers mit bis zu 30 Punkten.
Wie steht Ihre Domain bei Cross-Origin Headers?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.