Cross-Origin Headers für Cloudflare
COOP, CORP und optional COEP über Cloudflare einrichten — mit Transform Rules (kein Code) oder Workers für differenzierte Steuerung nach Pfad.
Cross-Origin Headers über Cloudflare
Cloudflare ermöglicht Cross-Origin Headers auf zwei Wegen: Transform Rules setzen Header ohne Code direkt im Dashboard — ideal für einheitliche Konfigurationen. Workers bieten programmatische Kontrolle auf der Edge für differenzierte Steuerung nach Pfad und Dateityp.
Diese Anleitung zeigt beide Ansätze: Transform Rules für den schnellen Einstieg, Workers für maximale Flexibilität. Der Vorteil von Cloudflare: Header werden auf der Edge gesetzt, unabhängig vom Origin-Server — funktioniert mit jedem Backend (WordPress, Node.js, statisch). Cross-Origin Headers bringen 30 von 166 Punkten im Wolf-Agents Web Security Check.
COOP und CORP über Transform Rules setzen
Gehen Sie im Cloudflare Dashboard zu Rules → Transform Rules → Modify Response Header. Erstellen Sie zwei separate Regeln — eine für COOP, eine für CORP. Kein Code erforderlich.
# Regel 1: COOP
Name: "Cross-Origin-Opener-Policy"
Header: Cross-Origin-Opener-Policy = same-origin-allow-popups
# Regel 2: CORP
Name: "Cross-Origin-Resource-Policy"
Header: Cross-Origin-Resource-Policy = same-siteTransform Rules werden sofort nach dem Speichern aktiv — kein Deployment nötig. Die Header werden auf der Cloudflare-Edge gesetzt, bevor die Response den Browser erreicht. Änderungen propagieren innerhalb von Sekunden global.
Im Cloudflare Free-Plan stehen 10 Transform Rules zur Verfügung. Für COOP und CORP brauchen Sie nur 2 Regeln — genug Platz für weitere Security-Header wie HSTS, X-Frame-Options oder CSP.
CORP differenziert mit Workers steuern
Für pfadbasierte Steuerung verwenden Sie einen Cloudflare Worker. So erhalten API-Endpunkte same-origin, statische Assets cross-origin und alle anderen Seiten same-site.
export default {
async fetch(request) {
const response = await fetch(request);
const newHeaders = new Headers(response.headers);
const url = new URL(request.url);
// COOP für alle Seiten
newHeaders.set('Cross-Origin-Opener-Policy', 'same-origin-allow-popups');
// CORP differenziert
if (url.pathname.startsWith('/api/')) {
newHeaders.set('Cross-Origin-Resource-Policy', 'same-origin');
} else if (url.pathname.match(/\.(jpg|png|gif|css|js)$/)) {
newHeaders.set('Cross-Origin-Resource-Policy', 'cross-origin');
} else {
newHeaders.set('Cross-Origin-Resource-Policy', 'same-site');
}
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders
});
}
};Transform Rules vs. Workers
Transform Rules
Kein Code. Dashboard-Konfiguration. Sofort aktiv. Ideal für einheitliche Header auf allen Seiten. Free-Plan: 10 Regeln.
Workers
Programmatische Kontrolle. Pfadbasierte Logik. Regex-Matching. Ideal für differenzierte CORP-Werte nach Ressourcentyp.
Kombination
Transform Rules für COOP (global gleich), Worker für differenziertes CORP. So nutzen Sie beide Stärken optimal.
example.com/*. Ohne Route-Binding wird der Worker nicht ausgeführt. COEP optional aktivieren und testen
Für vollständige Cross-Origin Isolation fügen Sie Cross-Origin-Embedder-Policy per Worker oder als dritte Transform Rule hinzu. COEP erzwingt, dass alle eingebetteten Ressourcen CORP- oder CORS-Header senden.
require-corp blockiert alle externen Ressourcen ohne CORP- oder CORS-Header — darunter Google Fonts, YouTube-Embeds, Google Maps und CDN-Bilder. Testen Sie gründlich, bevor Sie COEP aktivieren. export default {
async fetch(request) {
const response = await fetch(request);
const newHeaders = new Headers(response.headers);
newHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
newHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
return new Response(response.body, {
status: response.status,
statusText: response.statusText,
headers: newHeaders
});
}
};# Cross-Origin Header prüfen
curl -sI https://example.com | grep -i cross-origin
# Erwartete Ausgabe:
# cross-origin-opener-policy: same-origin-allow-popups
# cross-origin-resource-policy: same-siteBei Problemen deaktivieren Sie den Worker oder die Transform Rule im Dashboard — sofort wirksam. Kein Server-Neustart, kein Deployment. Das macht Cloudflare ideal zum gefahrlosen Testen neuer Security-Header.
Wie steht Ihre Domain bei Cross-Origin Headers?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Transform Rules oder Workers — was soll ich verwenden?
Transform Rules sind einfacher: kein Code nötig, Konfiguration im Dashboard. Verwenden Sie Transform Rules für einheitliche Header auf allen Seiten. Workers bieten programmatische Kontrolle — ideal wenn Sie verschiedene CORP-Werte für APIs, Assets und Seiten brauchen.
Kann ich CORP differenziert nach Pfad mit Transform Rules setzen?
Ja, aber mit Einschränkungen. Sie können in Transform Rules Bedingungen wie URI Path setzen. Für komplexe Logik (Regex, mehrere Pfade) sind Workers flexibler. Transform Rules erlauben nur einfache Matching-Regeln wie "starts with" oder "equals".
Kosten Workers für Cross-Origin Headers Geld?
Der Free-Plan umfasst 100.000 Worker-Requests pro Tag — das reicht für die meisten Websites. Workers laufen auf der Edge (Cloudflare-Netzwerk) und haben nahezu keine Latenz. Für High-Traffic-Websites prüfen Sie die Worker-Limits Ihres Plans.
Überschreiben Cloudflare-Header die Origin-Server-Header?
Transform Rules mit "Set" überschreiben bestehende Header. Mit "Add" werden Header hinzugefügt, ohne bestehende zu ersetzen. Verwenden Sie "Set" für Cross-Origin Headers, um konsistente Werte zu garantieren — unabhängig davon, was der Origin-Server sendet.
Funktionieren Cross-Origin Headers im Cloudflare Free-Plan?
Ja. Transform Rules (Modify Response Header) und Workers sind im Free-Plan verfügbar. Transform Rules haben ein Limit von 10 Regeln im Free-Plan, aber für COOP und CORP brauchen Sie nur 2 Regeln.
Brauche ich alle drei Cross-Origin Header?
Nein. Starten Sie mit COOP (same-origin-allow-popups) und CORP (same-site) über Transform Rules. COEP wird nur benötigt, wenn Sie SharedArrayBuffer oder vollständige Cross-Origin Isolation brauchen — das betrifft nur spezialisierte Webanwendungen.