Was muss ich beachten, wenn ich die Content Security Policy nutze?

Kurzfassung

Wenn Du im Projekt eine Content Security Policy (CSP) aktivierst, musst Du externe Quellen explizit erlauben. Für den Address‑Manager betrifft das besonders Google‑Maps. Nimm mindestens Folgendes auf:

script-src https://*.googleapis.com
img-src data: https://*.gstatic.com

Wir empfehlen die CSP in TYPO3 per TypoScript über config.additionalHeaders zu setzen (nicht über eine manifest.json).

Was ist eine CSP und warum ist sie wichtig?

Die CSP ist eine Sicherheitsrichtlinie, die der Browser erzwingt. Sie definiert, von welchen Hosts Skripte, Bilder, Styles etc. geladen werden dürfen. Richtig konfiguriert verhindert sie XSS‑Angriffe, schützt vor Datendiebstahl und sorgt für eine nachvollziehbare Einbindung externer Dienste.

Im Address‑Manager werden (optional) Google‑Maps genutzt. Dafür lädt der Browser Skripte von googleapis.com und Bilder/Marker von gstatic.com. Ohne passende CSP‑Freigaben bleiben Karte und Marker leer oder die Konsole zeigt Blockierungen.

Einrichtung in TYPO3 (TypoScript Header)

Die CSP kannst Du zentral als HTTP‑Header über TypoScript setzen. Beispiel (TYPO3 12/13):

# Site‑/Root‑TypoScript Setup
config.additionalHeaders.60 {
  header = Content-Security-Policy: default-src 'self'; script-src {$config.domain} https://*.googleapis.com; img-src 'self' data: https://*.gstatic.com; style-src 'self'; font-src 'self'; connect-src 'self'; frame-src 'self';
}

Erläuterungen:

default-src 'self': Standardquelle ist die eigene Domain.
script-src {$config.domain} https://*.googleapis.com: Erlaubt Skripte von Deiner Domain (per Konstante) und Google APIs. Falls Du Inline‑Skripte nutzt, setze stattdessen Nonces/Hashes (siehe Tipps).
img-src 'self' data: https://*.gstatic.com: Erlaubt lokale Bilder, data:-URLs (z. B. Marker) und statische Google‑Bilder.
Weitere Direktiven (style-src, font-src, connect-src, frame-src) sind als konservative Defaults gesetzt; erweitere sie projektbezogen (z. B. CDN, Analytics, Tag‑Manager).

Tipp: Definiere {$config.domain} in den Konstanten, z. B. https://www.example.com. Alternativ kannst Du auch 'self' zusätzlich belassen.

Report‑Only Modus zum Testen

Zum gefahrlosen Testen kannst Du statt Content-Security-Policy den Report‑Only‑Header verwenden:

config.additionalHeaders.61.header = Content-Security-Policy-Report-Only: default-src 'self'; script-src {$config.domain} https://*.googleapis.com; img-src 'self' data: https://*.gstatic.com

So siehst Du in der Browser‑Konsole, was blockiert würde, ohne dass es wirklich blockiert wird.

Häufige Stolpersteine

Karte lädt nicht: script-src erlaubt https://*.googleapis.com nicht – ergänzen!
Marker fehlen: img-src erlaubt https://*.gstatic.com oder data: nicht – ergänzen!
Inline‑Skripte werden blockiert: Verwende Nonces oder Hashes anstelle von unsafe-inline.
Iframes (z. B. externe Inhalte) brauchen frame-src Freigaben.

Best Practices für höhere Sicherheit

Nutze Nonces/Hashes für Inline‑Skripte statt unsafe-inline.
Halte Deine Direktiven so eng wie möglich, erlaube nur tatsächlich benötigte Hosts.
Beobachte die Browser‑Konsole und Server‑Logs (bei Report‑Only) nach der Aktivierung.

Beispiel mit Google‑Maps und strengeren Defaults

config.additionalHeaders.60.header = Content-Security-Policy: \
  default-src 'self'; \
  base-uri 'self'; \
  script-src 'self' https://*.googleapis.com; \
  img-src 'self' data: https://*.gstatic.com; \
  style-src 'self'; \
  font-src 'self'; \
  connect-src 'self'; \
  frame-src 'self';

Passe die Direktiven an Deine Projektbedürfnisse an (z. B. zusätzliche CDNs, Analytics, Consent‑Tools).