Cross-Origin Headers für Netlify konfigurieren
Schritt-für-Schritt-Anleitung: CORP, COEP und COOP auf Netlify einrichten — Cross-Origin Isolation gegen Spectre und Seitenkanalangriffe.
Cross-Origin Headers auf Netlify
Cross-Origin Headers (COOP, CORP, COEP) schützen gegen Spectre-Angriffe und Seitenkanal-Exploits. Sie kontrollieren, wie Ihre Website mit Cross-Origin-Ressourcen interagiert und ob der Browser Ihre Seite in einem isolierten Prozess ausführt. Cross-Origin Headers sind mit 30 von 166 Punkten ein gewichtiger Faktor im Wolf-Agents Web Security Check.
Auf Netlify setzen Sie diese Header per netlify.toml, _headers oder Edge Functions. Vorsicht: COEP (require-corp) blockiert alle Cross-Origin-Ressourcen ohne explizite Cross-Origin-Resource-Policy — Third-Party-Embeds wie YouTube oder Google Maps funktionieren dann nicht mehr ohne Anpassung.
Edge Functions eignen sich besonders, wenn Sie pfadspezifische Cross-Origin-Policies benötigen — z.B. cross-origin für oeffentliche Assets und same-origin für alle anderen Ressourcen.
COOP und CORP setzen (konservativ)
Beginnen Sie mit COOP und CORP — diese Header verursachen selten Kompatibilitätsprobleme. same-origin isoliert Ihre Seite von Cross-Origin-Popups und verhindert den Zugriff auf Ihre Ressourcen von fremden Origins. Für dynamische Pfadlogik nutzen Sie eine Edge Function.
# netlify.toml — Cross-Origin Headers (konservativ)
[[headers]]
for = "/*"
[headers.values]
Cross-Origin-Opener-Policy = "same-origin"
Cross-Origin-Resource-Policy = "same-origin"# _headers — Cross-Origin Headers (konservativ)
/*
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Resource-Policy: same-origin// netlify/edge-functions/cross-origin.ts
import type { Context } from "https://edge.netlify.com";
export default async (request: Request, context: Context) => {
const response = await context.next();
const url = new URL(request.url);
// COOP immer setzen
response.headers.set(
"Cross-Origin-Opener-Policy",
"same-origin"
);
// CORP: same-origin global, cross-origin für Assets
if (url.pathname.startsWith("/assets/")) {
response.headers.set(
"Cross-Origin-Resource-Policy",
"cross-origin"
);
} else {
response.headers.set(
"Cross-Origin-Resource-Policy",
"same-origin"
);
}
return response;
};
export const config = { path: "/*" };Vollständige Cross-Origin Isolation (Fortgeschritten)
Für maximalen Schutz aktivieren Sie COEP mit require-corp. Dies erzwingt, dass alle eingebundenen Cross-Origin-Ressourcen explizit die Einbindung erlauben müssen. Nur empfohlen, wenn Sie keine Third-Party-Embeds nutzen oder alle Drittanbieter CORP-Header setzen.
# netlify.toml — Vollständige Cross-Origin Isolation
[[headers]]
for = "/*"
[headers.values]
Cross-Origin-Opener-Policy = "same-origin"
Cross-Origin-Resource-Policy = "same-origin"
Cross-Origin-Embedder-Policy = "require-corp"
# Assets für CDN-Zugriff freigeben
[[headers]]
for = "/assets/*"
[headers.values]
Cross-Origin-Resource-Policy = "cross-origin"
# Alternative: credentialless (weniger restriktiv)
# Erlaubt Third-Party-Embeds ohne CORP-Header
# [[headers]]
# for = "/*"
# [headers.values]
# Cross-Origin-Embedder-Policy = "credentialless"require-corp blockiert YouTube-Embeds, Google Maps und andere Cross-Origin-iFrames, sofern diese keine Cross-Origin-Resource-Policy: cross-origin Header senden. Testen Sie gründlich auf Deploy Previews vor dem Produktions-Deploy. Header verifizieren
Prüfen Sie die Cross-Origin Headers nach dem Deploy. Testen Sie insbesondere alle Seiten mit eingebetteten Inhalten. Die Browser Console zeigt blockierte Ressourcen als Fehler an.
# Cross-Origin Headers prüfen
curl -sI https://ihre-domain.de | grep -i cross-origin
# Erwartete Ausgabe:
# Cross-Origin-Opener-Policy: same-origin
# Cross-Origin-Resource-Policy: same-origin
# Asset-Header prüfen (sollte cross-origin sein)
curl -sI https://ihre-domain.de/assets/main.js | grep -i cross-origin
# Cross-Origin Isolation in der Browser Console prüfen
# self.crossOriginIsolated → true (wenn COEP aktiv)
# Deploy Preview ebenfalls prüfen
curl -sI https://deploy-preview-42--ihre-site.netlify.app | grep -i cross-origin
# Wolf-Agents Web Security Check nutzen:
# https://wolf-agents.com/tools/web-security-checkHäufige Fehler bei Cross-Origin Headers auf Netlify
YouTube-Embeds brechen
COEP require-corp blockiert YouTube-iFrames. Lösung: credentialless statt require-corp verwenden, oder COEP nur für spezifische Pfade per Edge Function aktivieren.
Netlify Analytics blockiert
Netlify Analytics laedst ein Script von netlify-rum.netlify.app. Mit striktem COEP müssen Sie diese Domain in der CSP erlauben und auf den CORP-Header des Analytics-Scripts vertrauen.
OAuth-Popups funktionieren nicht
COOP same-origin isoliert Popups. OAuth-Flows mit Popup-Fenstern (z.B. Netlify Identity) benötigen same-origin-allow-popups statt same-origin.
Shared Worker und SharedArrayBuffer
Für SharedArrayBuffer ist vollständige Cross-Origin Isolation (COOP + COEP) erforderlich. Ohne beide Header liefert der Browser self.crossOriginIsolated === false und blockiert SharedArrayBuffer.
Compliance-Relevanz
Cross-Origin Isolation schützt gegen Seitenkanal-Angriffe und wird von mehreren Standards empfohlen.
NIS2
Fordert den Schutz vor bekannten Angriffsvektoren. Spectre ist eine dokumentierte CPU-Sicherheitslücke — Cross-Origin Isolation ist die empfohlene Gegenmaßnahme auf Browser-Ebene.
PCI DSS 4.0
Verlangt Kontrolle über geladene Ressourcen auf Zahlungsseiten. CORP verhindert, dass Zahlungsseiten-Ressourcen von fremden Origins eingebunden werden.
OWASP
Empfiehlt Cross-Origin Headers als Defense-in-Depth-Massnahme. Die OWASP Secure Headers Cheat Sheet listet COOP und CORP als empfohlene Header.
Wolf-Agents Check
Bewertet Cross-Origin Headers mit bis zu 30 Punkten — der zweithöchste Einzelwert nach CSP. Geprüft werden COOP, CORP und COEP separat.
Wie steht Ihre Domain bei Cross-Origin Headers?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.