Skip to main content

Usercentrics CMP and Content Security Policy (CSP)

Updated

If your website uses a Content Security Policy (CSP), you need to allow Usercentrics domains. If you don't, your browser may block the CMP's scripts, network calls, or images.

A CSP is a set of rules that tells the browser which sources are allowed to load things like scripts, images, or network requests. The exact CSP rules you need depend on which version of the CMP you use and which script file you load.

Please note

CMP V1 is no longer supported. If you're still running V1, we recommend upgrading, see "Migrating from CMP V1 to V3" article.

Domains you need to allow

No matter which CMP version you use, allow both of these domains in your CSP:

https://*.usercentrics.eu and https://*.cmp.usercentrics.eu

These domains let you:

  • Load the CMP script
  • Talk to the CMP's API (save and read consent)
  • Load images used by the CMP

Find your version

Check the src of your CMP script tag, then use the tab that matches:

Version Script Needs 'unsafe-eval'? Needs blob:?
V2 loader.js Yes Yes
V2 bundle.js / bundle_legacy.js No No
V3 loader.js (only option) No No - uses a nonce instead
V3 (loader.js)
V2 (loader.js / bundle.js)

loader.js is the only script available for V3. There is no bundle.js for this version.

V3 works with a strict CSP by using a fresh nonce instead of 'unsafe-eval' or blob:.

 

Step 1: Add a nonce to your CSP. Generate a new nonce on your server for every page load:

Content-Security-Policy:
  script-src  'self' 'nonce-<your-nonce>' https://*.usercentrics.eu https://*.cmp.usercentrics.eu;
  style-src   'self' 'nonce-<your-nonce>';
  connect-src 'self' https://*.usercentrics.eu https://*.cmp.usercentrics.eu;
  img-src     'self' data: https://*.usercentrics.eu https://*.cmp.usercentrics.eu;

 

Step 2: Give the CMP script the same nonce. There are two supported ways to do this:

Option 1: Add the nonce directly to the CMP script (preferred)

<script
  id="usercentrics-cmp"
  src="https://web.cmp.usercentrics.eu/ui/loader.js"
  data-settings-id="YOUR_SETTINGS_ID"
  nonce="<your-nonce>">
</script>
Use this when your website adds the CMP script code directly and can include the same nonce used in your CSP header.

Option 2:  Add the nonce using window.ucCmpConfig.nonce (fallback) 
<script nonce="<your-nonce>">
  window.ucCmpConfig = window.ucCmpConfig || {};
  window.ucCmpConfig.nonce = '<your-nonce>';
</script>

Set this before the CMP loader script runs. Use this instead of Option 1 if you cannot add the nonce directly to the CMP script. For example, this can happen if the script is added by a tag manager (GTM, Tealium), your CMS removes attributes it does not recognize, or a single-page app reloads the page structure and removes the original script from the page.

You only need to use one of these options. If both are added, Option 1 takes priority.

Please note

Testing with sandbox

If you test using the sandbox/draft environment, the CMP uses a separate domain. This domain is not a subdomain of usercentrics.eu, so your existing *.usercentrics.eu allowlist does not cover it. Add the following to every relevant directive: https://*.usercentrics-sandbox.eu This applies to script-src, connect-src, and img-src. And, if Cross-Domain Consent Sharing is enabled, frame-src too.

If you use loader.js with CMP V2:

<meta http-equiv="Content-Security-Policy"
  content="script-src https://*.usercentrics.eu https://*.cmp.usercentrics.eu 'self' 'unsafe-eval' blob:; connect-src 'self' https://*.usercentrics.eu https://*.cmp.usercentrics.eu; img-src 'self' https://*.usercentrics.eu https://*.cmp.usercentrics.eu;">

loader.js needs two extra things:

  • 'unsafe-eval': needed as a polyfill for legacy browsers. In Firefox, this is a known CSP false positive and is not a real security concern. 
  • blob: loader.js loads part of itself as a "module." It does this by putting that code into a Blob and running it as a script. Your CSP needs to allow blob: for this to work.

Don't want to allow 'unsafe-eval' or blob:? Use bundle.js instead, or bundle_legacy.js for older browsers. With bundle.js, this is all you need:

<meta http-equiv="Content-Security-Policy"
  content="script-src https://*.usercentrics.eu https://*.cmp.usercentrics.eu 'self'; connect-src 'self' https://*.usercentrics.eu https://*.cmp.usercentrics.eu; img-src 'self' https://*.usercentrics.eu https://*.cmp.usercentrics.eu; object-src 'self' https://*.usercentrics.eu;">

Please note

object-src is only confirmed as needed for V2's bundle.js, not V3. See Does CMP V2 support the use of Content Security Policy without unsafe-eval? for the full guide.

 

Using Cross-Domain Consent Sharing? (Available under Configuration → CMP Settings on the Plus plan and above.) Add the following to your CSP:

frame-src 'self' https://*.usercentrics.eu https://*.cmp.usercentrics.eu; 

Cross-Domain Consent Sharing uses a small hidden frame from Usercentrics to share consent across your websites. Without this rule, the browser blocks the frame and consent cannot be shared between your sites.

Still blocked after following the steps above? Open your browser's console — it will name the exact directive that's missing.

You can find more information about CSP here: Mozilla's guide to implementing CSP, content-security-policy.com, and Google's CSP documentation.

Related articles