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.

Nuxt 3 · Schritt für Schritt

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.

1 Schritt 1 von 3

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 routeRules
// 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 Middleware
// 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',
  });
})
2 Schritt 2 von 3

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
// 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.
3 Schritt 3 von 3

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.

Terminal / Browser Verifizieren
# 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.