Segment¶

Analytics.js loads from Segment's CDN, fetches your project's settings at runtime, and then loads whichever device-mode destinations you have enabled - each from its own domain. The last part is what makes CSP work here awkward, and Segment says as much: their support around CSP issues is limited precisely because so many integrations are involved.

What Segment gives you¶

cdn.segment.com for analytics.min.js, plus the settings path at https://cdn.segment.com/v1/projects/<WRITE_KEY>/settings.
api.segment.io as the destination for outgoing event requests, needed in connect-src.
Nonce support - modify the Segment snippet with a nonce matching the one in your policy.
Custom Domain, a managed first-party subdomain over HTTPS, so event requests go through your own domain rather than segment.com.
A self-managed custom proxy option, for full control over the origins involved.

Sending reports to Report URI¶

Add the reporting directives to your policy, and set the two Reporting API headers that report-to sends through. Your URLs come from the Setup page:

Content-Security-Policy-Report-Only: script-src 'self' cdn.segment.com 'report-sha256'; connect-src 'self' api.segment.io cdn.segment.com; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly; report-to default
Reporting-Endpoints: default="https://abc123.report-uri.com/a/d/g"
Report-To: {"group":"default","max_age":31536000,"endpoints":[{"url":"https://abc123.report-uri.com/a/d/g"}],"include_subdomains":true}

'report-sha256' in script-src turns on CSP Integrity, which reports a hash of every script that loads.

Things to watch for¶

Device-mode destinations load from their own domains, and the list is whatever is switched on in your Segment workspace. Enabling a destination in the UI changes what your pages load with no code change - the same delegation problem every tag manager has.
Don't forget connect-src for the settings fetch as well as the script load. A policy that allows the script but not the settings request produces an analytics library that loads and then does nothing.
Custom Domain or a self-managed proxy collapses the third-party origins into one you control, which makes the policy considerably simpler. If you are starting a CSP rollout and already use Segment heavily, it is worth doing that first.
Segment's server-side libraries sidestep browser CSP entirely. If a destination doesn't need to run in the browser, that is the cleanest answer.

Official documentation¶

Twilio Segment - Analytics.js Frequently Asked Questions

Start Monitoring with Report URI¶

Already using us for CSP? Find your CSP reporting directives on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your CSP reporting directives from the Setup page.

Start your free trial