Content Security Policy — Deployment-Anleitung

Copy-Paste-Beispiele für jede wichtige Plattform — Apache, Nginx, WordPress, Node.js, Cloudflare und Vercel. Jedes Snippet auf dieser Seite nutzt eine generische Starter-Policy. Wenn du die exakte CSP für deine Website brauchst, lässt du einen kostenlosen Scan laufen.

Starte immer im Report-Only-Modus. Deploye deine CSP zuerst als Content-Security-Policy-Report-Only. Der Browser protokolliert Verstoß-Meldungen in der Konsole, blockiert aber nichts. Beobachte 1–2 Wochen, fixe alles was aufläuft, und wechsle dann zum durchsetzenden Content-Security-Policy-Header. So kannst du nichts kaputt machen beim Rollout.

Plattformen

Spring direkt zu der Plattform, die du nutzt:

Apache (`.htaccess`)

Das häufigste Deployment-Ziel. Diesen Block in die .htaccess-Datei im Document-Root deiner Website legen. Stelle sicher, dass mod_headers aktiviert ist.

<IfModule mod_headers.c>
  Header always set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'"
</IfModule>

Sobald du sicher bist dass die Policy nichts kaputt macht, tausche Content-Security-Policy-Report-Only gegen Content-Security-Policy aus, um die Durchsetzung zu aktivieren.

Komplette Apache-Anleitung lesen →

Nginx

In den server { }-Block einfügen (üblicherweise in /etc/nginx/sites-enabled/deine-seite):

add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'" always;

Das always-Flag sorgt dafür, dass der Header auch auf Fehler-Responses (404, 500) gesetzt wird, nicht nur auf erfolgreichen.

Komplette Nginx-Anleitung lesen →

WordPress (`functions.php`)

In die functions.php deines Themes einfügen — besser aber: in ein eigenes Must-Use-Plugin, damit ein Theme-Update das nicht wieder rausnimmt:

add_action('send_headers', function() {
    header("Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'");
});

WordPress braucht fast immer 'unsafe-inline' in script-src und style-src, weil Core, Themes und viele Plugins auf Inline-Skripte und -Styles angewiesen sind.

Komplette WordPress-Anleitung lesen →

Node.js / Express

Den Header über Express-Middleware setzen. Für alles jenseits einer trivialen App solltest du das Helmet-Paket nehmen — das kümmert sich um die Edge-Cases.

app.use((req, res, next) => {
    res.setHeader(
        'Content-Security-Policy-Report-Only',
        "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'"
    );
    next();
});

Cloudflare Transform Rule

Im Cloudflare-Dashboard: Rules → Transform Rules → Modify Response Header → Create rule. Eine "Set static"-Action hinzufügen:

Header name: Content-Security-Policy-Report-Only
Value: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'

Transform Rules sind auch im Free-Plan verfügbar (mit begrenztem Kontingent). Für größere Volumen nutze stattdessen einen Cloudflare Worker. → Komplette Anleitung: CSP auf Cloudflare — deckt Set vs. Add, Email Obfuscation und Rocket Loader ab, plus das Worker-Pattern für Nonces.

`vercel.json`

Einen headers-Eintrag in die vercel.json deines Projekts einfügen:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy-Report-Only",
          "value": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'"
        }
      ]
    }
  ]
}

Nach dem Commit neu deployen — die Header werden am Edge ausgeliefert.

Die passende CSP für deine Site generieren → Kostenloser Scan · erkennt jede Ressource die deine Seite tatsächlich lädt · Copy-Paste-Snippets für alle Plattformen oben

Warum das generische Beispiel nicht ausreicht

Die Policy oben nutzt default-src 'self' — das blockiert alles, was nicht vom eigenen Origin kommt. Echte Websites laden aber Google Fonts, Analytics, Video-Embeds, Karten, Chat-Widgets — jede einzelne Abhängigkeit muss explizit freigegeben werden. Ein falsch getippter Eintrag bricht die Seite, eine zu offene Policy macht den ganzen CSP-Sinn zunichte.

Deshalb funktioniert keine Einheits-CSP. Unser Scanner crawlt deine Seite, findet jede externe Ressource die sie tatsächlich lädt, und generiert die engste mögliche Policy bei der noch alles läuft — plus das passende Deployment-Snippet für deinen Stack.

Content Security Policy — Deployment-Anleitung

Plattformen

Apache (.htaccess)