What should I consider when using a Content Security Policy?

TL;DR

If you enable a Content Security Policy (CSP), you must explicitly allow external sources. For Address Manager this primarily affects Google Maps. At minimum, include:

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

We recommend setting CSP via TypoScript using config.additionalHeaders (not via a manifest.json).

What is CSP and why does it matter?

CSP is a browser‑enforced security policy that defines which hosts are allowed to load scripts, images, styles, etc. Properly configured, it helps prevent XSS, protects data, and makes the use of external services transparent.

Address Manager can use Google Maps. The browser needs to load scripts from googleapis.com and images/markers from gstatic.com. Without these being whitelisted, the map and markers may not render and the browser console will show CSP violations.

Setup in TYPO3 (HTTP header via TypoScript)

You can set the CSP globally as an HTTP header via TypoScript. Example (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';
}

Notes:

default-src 'self': Base policy is your own domain.
script-src {$config.domain} https://*.googleapis.com: Allow scripts from your domain (via constant) and Google APIs. If you use inline scripts, prefer nonces/hashes (see tips) instead of unsafe-inline.
img-src 'self' data: https://*.gstatic.com: Allow local images, data: URLs (e.g., markers) and static Google images.
Other directives (style-src, font-src, connect-src, frame-src) are conservative defaults; extend them for your project (e.g., CDN, analytics, tag manager).

Tip: Define {$config.domain} in TypoScript constants, e.g., https://www.example.com. You may also keep 'self' in script-src if preferred.

Report‑Only mode for testing

For safe testing, use the report‑only header:

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

This shows violations in DevTools without actually blocking requests.

Common pitfalls

Map doesn’t load: script-src is missing https://*.googleapis.com — add it.
Markers missing: img-src is missing https://*.gstatic.com or data: — add it.
Inline scripts blocked: Use nonces or hashes instead of unsafe-inline.
Iframes (external content) require frame-src allowances.

Best practices for stronger security

Use nonces/hashes for inline scripts instead of unsafe-inline.
Keep directives as tight as possible; allow only what you truly need.
Monitor the browser console and server logs (with report‑only) after enabling CSP.

Example with Google Maps and stricter 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';

Adjust directives to your project needs (e.g., additional CDNs, analytics, consent tools).