CSP für Cloudflare konfigurieren
Content Security Policy über das Cloudflare Dashboard einrichten — mit Transform Rules für statische CSP und Workers für dynamische Nonces.
Content Security Policy über Cloudflare
Cloudflare sitzt als Reverse Proxy vor Ihrem Origin-Server — das macht es zum idealen Ort für CSP-Header. Der größte Vorteil: Sie können CSP einrichten, ohne Ihren eigenen Server zu ändern. Das ist besonders relevant für Shared Hosting, Managed WordPress oder SaaS-Plattformen ohne Header-Zugriff.
Cloudflare bietet zwei Wege: Transform Rules setzen statische Header direkt im Dashboard — ohne Code, ohne Worker. Für dynamische CSP mit Nonces brauchen Sie einen Cloudflare Worker. CSP ist mit 35 von 166 Punkten der einflussreichste Header im Wolf-Agents Web Security Check.
Report-Only über Transform Rules
Beginnen Sie immer im Report-Only-Modus. Cloudflare Transform Rules setzen den Header am Edge — kein Code, kein Worker nötig. Navigieren Sie im Dashboard zu Rules → Transform Rules → Modify Response Header.
Erstellen Sie eine neue Transform Rule
Typ: "Set static", damit der Header bei jeder Response gesetzt wird
default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; report-uri https://ihre-domain.de/api/csp-reportTransform Rules sind einfacher, schneller und kostenlos in allen Plans. Workers brauchen Sie erst für dynamische Nonces (Schritt 4). Für statische CSP genügen Transform Rules vollständig.
Violations analysieren und CSP anpassen
Öffnen Sie die Browser DevTools (F12) → Console. CSP-Violations erscheinen als Warnungen. Passen Sie die Policy in der Transform Rule an, bis keine unerwarteten Violations mehr auftreten.
| Violation | Lösung |
|---|---|
| Inline-Script blockiert | Nonce oder Hash hinzufügen (siehe Schritt 4) |
| Externe Bibliothek blockiert | Domain zu script-src hinzufügen |
| Google Fonts blockiert | fonts.googleapis.com → style-src, fonts.gstatic.com → font-src |
| Google Analytics blockiert | *.google-analytics.com *.googletagmanager.com → script-src |
Enforcement aktivieren
Wenn keine unerwarteten Violations mehr auftreten, ändern Sie den Header-Namen in der Transform Rule. Ersetzen Sie Content-Security-Policy-Report-Only durch Content-Security-Policy — der Browser blockiert ab sofort nicht autorisierte Ressourcen.
Öffnen Sie die bestehende Rule unter Rules → Transform Rules
Content-Security-Policy-Report-Only → Content-Security-Policy
Nonces per Cloudflare Worker
Für maximale Sicherheit ersetzen Sie 'unsafe-inline' durch Nonces. Da Transform Rules nur statische Werte setzen, brauchen Sie dafür einen Cloudflare Worker. Der Worker generiert pro Request einen frischen Nonce, setzt den CSP-Header und schreibt den Nonce in die HTML-Response.
export default {
async fetch(request) {
const nonce = btoa(
String.fromCharCode(...crypto.getRandomValues(
new Uint8Array(16)
))
);
const csp = [
"default-src 'self'",
`script-src 'nonce-${nonce}' 'strict-dynamic'`,
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data: https:",
"object-src 'none'",
"base-uri 'self'",
].join('; ');
const response = await fetch(request);
const newHeaders = new Headers(response.headers);
newHeaders.set('Content-Security-Policy', csp);
return new Response(response.body, {
status: response.status,
headers: newHeaders,
});
}
};
Der obige Worker setzt nur den CSP-Header. Um den Nonce auch in <script>-Tags zu schreiben, verwenden Sie Cloudflares HTMLRewriter API. Damit können Sie nonce-Attribute on-the-fly in die HTML-Response einfügen — ohne Ihren Origin-Server zu ändern.
Wie steht Ihre Domain bei Content Security Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.