Cross-Origin Headers für Vercel konfigurieren
Schritt-für-Schritt-Anleitung: COOP, CORP und COEP auf Vercel einrichten — Cross-Origin-Isolation gegen Spectre und Seitenkanal-Angriffe.
Cross-Origin Headers auf Vercel
Cross-Origin Headers (COOP, CORP, COEP) schützen gegen Spectre-basierte Seitenkanal-Angriffe, indem sie die Cross-Origin-Isolation Ihres Browsing-Kontexts kontrollieren. Zusammen sind sie mit 30 von 166 Punkten im Wolf-Agents Web Security Check bewertet — der zweitwichtigste Faktor nach CSP.
Auf Vercel setzen Sie COOP und CORP per vercel.json. COEP (Cross-Origin-Embedder-Policy) erfordert mehr Sorgfalt: Alle eingebetteten Third-Party-Ressourcen müssen CORS-Header senden oder per crossorigin-Attribut geladen werden. Aktivieren Sie COEP erst, nachdem Sie die Kompatibilität aller Embeds geprüft haben.
COOP und CORP per vercel.json
Setzen Sie Cross-Origin-Opener-Policy: same-origin und Cross-Origin-Resource-Policy: same-origin in Ihrer vercel.json. Diese beiden Header können Sie bedenkenlos aktivieren — sie verhindern, dass fremde Seiten Ihre Ressourcen laden oder Fenster-Referenzen nutzen.
// vercel.json — Cross-Origin Headers
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Cross-Origin-Opener-Policy",
"value": "same-origin"
},
{
"key": "Cross-Origin-Resource-Policy",
"value": "same-origin"
}
]
}
]
}COEP mit Bedacht aktivieren
Cross-Origin-Embedder-Policy: require-corp erzwingt, dass alle eingebetteten Ressourcen CORS-Header senden. Das aktiviert volle Cross-Origin-Isolation und ermöglicht SharedArrayBuffer. Aber: Third-Party-Embeds (Google Fonts, Analytics, Ads) ohne CORS-Header werden blockiert.
// vercel.json — Volle Cross-Origin-Isolation (mit COEP)
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Cross-Origin-Opener-Policy",
"value": "same-origin" },
{ "key": "Cross-Origin-Resource-Policy",
"value": "same-origin" },
{ "key": "Cross-Origin-Embedder-Policy",
"value": "require-corp" }
]
}
]
}require-corp blockiert alle Third-Party-Ressourcen ohne CORS-Header. Google Fonts, YouTube-Embeds und Ads-Scripts funktionieren nicht mehr. Verwenden Sie alternativ credentialless oder aktivieren Sie COEP nur auf Seiten, die SharedArrayBuffer benötigen. Header verifizieren
Prüfen Sie alle drei Cross-Origin-Header mit curl. Testen Sie besonders, ob eingebettete Third-Party-Ressourcen nach der Aktivierung noch korrekt laden. Der Wolf-Agents Web Security Check bewertet alle drei Header im Zusammenspiel.
# Cross-Origin Headers prüfen
curl -sI https://ihre-domain.de | grep -iE "cross-origin"
# Erwartete Ausgabe:
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-originHäufige Fehler
COEP blockiert Third-Party-Embeds
require-corp blockiert Google Fonts, YouTube und andere Third-Party-Ressourcen ohne CORS-Header. Testen Sie gründlich, bevor Sie COEP in Produktion aktivieren.
COOP bricht window.opener
same-origin verhindert, dass geöffnete Fenster auf window.opener zugreifen. Wenn Ihre Anwendung Popup-basierte OAuth-Flows nutzt, verwenden Sie same-origin-allow-popups.
CORP für öffentliche Assets anpassen
Wenn andere Websites Ihre Bilder oder Fonts einbetten sollen, verwenden Sie cross-origin statt same-origin für spezifische Asset-Pfade.
Compliance-Relevanz
Cross-Origin-Isolation schützt gegen fortgeschrittene Seitenkanal-Angriffe wie Spectre. NIS2 fordert technische Maßnahmen gegen bekannte Angriffsklassen. PCI DSS 4.0 verlangt Schutz vor Datenexfiltration im Browser. Der Wolf-Agents Web Security Check bewertet COOP, CORP und COEP mit bis zu 30 Punkten und zeigt den aktuellen Isolation-Status.
Wie steht Ihre Domain bei Cross-Origin Headers?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.