CSP für TYPO3 konfigurieren

Schritt-für-Schritt-Anleitung: Content Security Policy in TYPO3 einrichten, mit nativem csp.yaml und automatischen Nonces — von Report-Only bis Enforcement.

CSP prüfen Plattform entdecken

TYPO3 · Schritt für Schritt

Von Wolf-Agents Security Team · Aktualisiert: 27. März 2026

Content Security Policy in TYPO3

Content Security Policy (CSP) ist der wichtigste HTTP-Security-Header gegen Cross-Site Scripting (XSS). Er teilt dem Browser mit, welche Ressourcen geladen werden dürfen — und blockiert alles andere. CSP ist mit 35 von 166 Punkten der einflussreichste Header im Wolf-Agents Web Security Check.

Seit TYPO3 v12.3 bietet das CMS ein natives CSP-System über csp.yaml. TYPO3 generiert automatisch Nonces, die in Fluid-Templates über f:security.nonce() verfügbar sind. Für ältere Versionen bleibt config.additionalHeaders als Fallback.

Ausführliche Einführung in CSP

1 Schritt 1 von 4

csp.yaml im Report-Only Modus anlegen

Beginnen Sie immer im Report-Only-Modus. TYPO3 meldet CSP-Verstöße in der Browser-Konsole und an den integrierten Reporting-Endpoint, blockiert aber keine Ressourcen. Erstellen Sie die Datei config/sites/[site]/csp.yaml.

# config/sites/main/csp.yaml — Report-Only
inheritDefault: true
reportOnly: true
mutations:
  - mode: set
    directive: default-src
    sources:
      - "'self'"
  - mode: set
    directive: script-src
    sources:
      - "'self'"
      - "'nonce-proxy'"
  - mode: set
    directive: style-src
    sources:
      - "'self'"
      - "'unsafe-inline'"
  - mode: set
    directive: img-src
    sources:
      - "'self'"
      - "data:"
  - mode: set
    directive: object-src
    sources:
      - "'none'"
  - mode: set
    directive: base-uri
    sources:
      - "'self'"
reportingUrl: true

Was bedeutet nonce-proxy?

TYPO3 ersetzt 'nonce-proxy' automatisch durch einen echten Nonce-Wert ('nonce-abc123...') bei jedem Request. Sie müssen den Nonce nicht selbst generieren — TYPO3 übernimmt das vollständig.

# TypoScript (TYPO3 vor v12.3)
config.additionalHeaders {
    10.header = Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'
}

Cache leeren:

vendor/bin/typo3 cache:flush

2 Schritt 2 von 4

Violations analysieren und CSP anpassen

Öffnen Sie die Browser DevTools (F12) und die Console. CSP-Violations erscheinen als Warnungen. TYPO3 v12.3+ protokolliert Violations zusätzlich im Backend unter System > Reports > CSP. Passen Sie die csp.yaml an, bis keine unerwarteten Violations mehr auftreten.

Violation	Lösung in csp.yaml
Inline-Script blockiert	`nonce-proxy` in script-src + `useNonce="1"` im Template
Extension-Script blockiert	Extension-Domain zu `script-src` hinzufügen
Google Fonts blockiert	`fonts.googleapis.com` in style-src, `fonts.gstatic.com` in font-src
YouTube/Vimeo blockiert	`.youtube.com .vimeo.com` in frame-src
CDN-Assets blockiert	CDN-Domain zu entsprechender Direktive hinzufügen

Lassen Sie die Policy mindestens 1 Woche im Report-Only-Modus laufen. TYPO3-Extensions können Header dynamisch hinzufügen — testen Sie alle Seitentypen und Backend-Bereiche.

3 Schritt 3 von 4

Enforcement aktivieren

Wenn keine unerwarteten Violations mehr auftreten, setzen Sie reportOnly: false in der csp.yaml. Der Browser blockiert ab sofort nicht autorisierte Ressourcen.

# config/sites/main/csp.yaml — Enforcement
inheritDefault: true
reportOnly: false
mutations:
  - mode: set
    directive: default-src
    sources:
      - "'self'"
  - mode: set
    directive: script-src
    sources:
      - "'self'"
      - "'nonce-proxy'"
  - mode: set
    directive: style-src
    sources:
      - "'self'"
      - "'unsafe-inline'"
  - mode: set
    directive: img-src
    sources:
      - "'self'"
      - "data:"
  - mode: set
    directive: object-src
    sources:
      - "'none'"
  - mode: set
    directive: base-uri
    sources:
      - "'self'"
  - mode: set
    directive: form-action
    sources:
      - "'self'"
reportingUrl: true

Testen Sie gründlich auf allen Seiten — inklusive News-Detail, Formulare und geschützte Bereiche. TYPO3-Extensions wie EXT:news, EXT:powermail oder EXT:solr können eigene Scripts laden, die in der CSP berücksichtigt werden müssen.

Cache leeren:

vendor/bin/typo3 cache:flush

4 Schritt 4 von 4 · Fortgeschritten

Nonces in Fluid-Templates einbinden

TYPO3 v12.3+ stellt den ViewHelper f:security.nonce() bereit, der den aktuellen CSP-Nonce in Fluid-Templates verfügbar macht. Für Assets verwenden Sie das useNonce-Attribut im f:asset.script-ViewHelper.

<!-- Fluid Template mit Nonce -->
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<!-- Inline-Script mit Nonce -->
<script nonce="{f:security.nonce()}">
    console.log('Dieses Script ist autorisiert');
</script>

<!-- Asset ViewHelper (Nonce automatisch) -->
<f:asset.script identifier="main"
    src="EXT:site_package/Resources/Public/JavaScript/main.js"
    useNonce="1" />

Extensions und Nonces

Nicht alle TYPO3-Extensions unterstützen Nonces. Extensions, die Inline-JavaScript ohne Nonce rendern, erfordern entweder ein Update oder die Aufnahme der Extension-Domain in die CSP. Prüfen Sie die Extension-Dokumentation.

Häufige Fehler bei CSP in TYPO3

csp.yaml wird ignoriert

Die Datei muss exakt unter config/sites/[site-identifier]/csp.yaml liegen. Prüfen Sie den Site-Identifier in der Site Configuration.

Nonces funktionieren nicht

nonce-proxy erfordert TYPO3 v12.3+. Ältere Versionen ignorieren diesen Wert. Prüfen Sie Ihre TYPO3-Version mit vendor/bin/typo3 --version.

staticfilecache und CSP

EXT:staticfilecache liefert gecachte HTML-Seiten ohne TYPO3 — Nonces ändern sich nicht pro Request. Lösung: CSP ohne Nonces oder staticfilecache für CSP-geschützte Seiten deaktivieren.

Backend-CSP vs. Frontend-CSP

TYPO3 v12.3+ setzt eine eigene Backend-CSP. Die csp.yaml gilt nur für das Frontend. Backend- und Frontend-CSP sind vollständig getrennt.

Compliance-Relevanz

PCI DSS 4.0 (Anforderung 6.4.3) fordert ab März 2025 die Kontrolle aller auf Zahlungsseiten geladenen Scripts. Eine korrekte Content Security Policy erfüllt diese Anforderung. NIS2 verlangt technische Maßnahmen zur Cybersicherheit — CSP ist der wirksamste Schutz gegen XSS-Angriffe. Der Wolf-Agents Web Security Check bewertet CSP mit bis zu 35 Punkten und dokumentiert den Umsetzungsstand.

Auch verfügbar für:

Nginx Apache WordPress Next.js Cloudflare Express Caddy Shopify Hetzner Laravel Drupal IONOS All-Inkl Shopware Contao Strato Joomla PHP Spring Boot

Wie steht Ihre Domain bei Content Security Policy?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.

Web Security Check starten Monitoring ab 199 EUR/Mo