Security closes an audit with a clear recommendation: deploy a strict Content Security Policy. A developer adds the header to production on Friday afternoon. Twenty minutes later Stripe checkout fails to load, Google Tag Manager goes silent, and the admin back office shows a blank page. Header rollback, tense post-mortem, promise to « revisit later » — which becomes never.
A well-run CSP is not a switch. It is an executable whitelist: the browser only runs what you explicitly allow for scripts, styles, images, XHR connections, and iframes. Every marketing pixel, webpack bundle, and payment iframe counts — including the one nobody inventoried since the last campaign.
The right rollout uses report-only, marketing in the loop, a build-side nonce pipeline, and a full checkout test before enforce. Without that, you punish the cart, not the XSS attacker.
Four-phase rollout
Phase 1 — inventory: list all scripts and styles, including Tag Manager, A/B testing, support chat, heatmaps. Export violations from the browser (Network tab + console) on critical paths: home, signup, checkout, admin.
Phase 2 — Report-Only for two to four weeks: Content-Security-Policy-Report-Only header with /csp-report endpoint or third-party collector. Aggregate by violated directive; triage script-src first, then connect-src, frame-src, img-src.
Phase 3 — fixes: per-request nonce for legitimate inline, SHA-256 hash for static snippets, refactor to external files for the rest. Every new marketing domain goes through a CSP ticket before tag production deploy.
Phase 4 — enforce with monitoring: switch to Content-Security-Policy when critical violations trend to zero for seven consecutive days. Document header rollback (feature flag or nginx config) and run E2E checkout on staging enforce before prod.
Directives and common pitfalls
| Directive | Role | Common pitfall |
|---|---|---|
default-src | Fallback | Too permissive hides script-src holes |
script-src | JavaScript | Forgetting js.stripe.com or GTM |
style-src | CSS | Inline React/Vue without nonce |
connect-src | fetch/XHR | Missing payment or analytics API |
frame-src | iframes | Stripe 3-D Secure blocked |
img-src | Images | Tracking pixel on unknown domain |
'strict-dynamic' with nonce modernizes trust chains — test target Safari and Firefox, not Chrome alone.
unsafe-inline and unsafe-eval are only acceptable for a short documented transition. Each occurrence needs a removal date.
Nonce pipeline and build
The framework generates a per-request nonce (session or middleware). Templates inject <script nonce="{{nonce}}">. The build tool preserves the placeholder — minification must not break it.
For immutable inline content (legacy analytics snippet), compute SHA-256 hash and declare 'sha256-…' in script-src. Document the generation command in the ops README.
CI staging: automated test that CSP header is present and checkout page loads without console violations. Block merge on regression.
Third parties: Stripe, GTM, analytics
Stripe typically requires script-src js.stripe.com, frame-src hooks.stripe.com, connect-src api.stripe.com. List them explicitly — do not rely on default-src alone.
Google Tag Manager propagates variable domains: enforce a « new tag = CSP review » process with 48h SLA. Otherwise Monday's campaign breaks Tuesday.
After every header change, run a full checkout path with test card, 3-D Secure if enabled, and server-side webhook confirmation.
Governance and reporting
Name a CSP owner in the security RACI — not a vague committee. They join marketing tag releases.
Weekly report-only aggregation: volume per directive, new domains, affected pages. Post-deploy spike = rollback or hotfix, not silence.
GDPR: CSP reports may contain URLs with parameters — filter or anonymize before long-term storage.
Decide and move forward without blind spots
- Inventory scripts and styles — build, inline, Tag Manager, Stripe; named CSP owner in RACI.
- Report-Only 2–4 weeks — rate-limited
/csp-reportendpoint, weekly script-src triage. - Nonce or hash CI pipeline — staging enforce before prod; test checkout and WordPress admin.
- Marketing new tag form — script/connect/frame domains reviewed 48h before publish.
- Enforce scorecard — zero critical violations 7 days, documented header rollback.
Front and CDN: verify headers via curl -I; compare hosts via our directory and comparison tool.
Frequently asked questions
What exactly does CSP block?
It limits executable sources (scripts, styles, connections, frames) to reduce XSS impact. The browser refuses anything not whitelisted — including a forgotten marketing pixel.
Is Report-Only enough long term?
No: it is the inventory phase (2–4 weeks minimum). Violations should trend to zero on critical paths before enforce on production.
How to handle inline scripts?
Three paths: per-request nonce from the framework, SHA-256 hash of static content, or refactor to external files. unsafe-inline is only acceptable for a short transition.
Can Stripe and Tag Manager coexist with CSP?
Yes, with script-src and connect-src listing js.stripe.com, GTM domains, and payment APIs. Test the full checkout after every header change.
Read two weeks of CSP reports before blocking — surprises come from marketing, not backend.