FAQ: Content Security Policy

What shall I do if Userpilot refused to connect to my page?

Userpilot sends data using a web-socket connection. This issue is most likely due to blockage caused by a content security policy(CSP) – some networks block the web-socket connection. This can be fixed by asking your engineering team to whitelist Userpilot on your domain.  Also, we recommend checking our Userpilot’s developer docs to understand what goes in and out of a client’s network.

You'll need to ensure that your policy allows Userpilot.js requests:

style-src    'self' https://*.userpilot.io https://fonts.gstatic.com https://fonts.googleapis.com 'unsafe-inline';
script-src   'self' https://*.userpilot.io 'unsafe-inline';
img-src      'self' https://*.userpilot.io;
connect-src  https://*.userpilot.io *.userpilot.io wss:;

Use below for more detailed whitelisting

connect-src:
 https://uploads.userpilot.io
 https://api.userpilot.io
 wss://api.userpilot.io
 https://find.userpilot.io
 https://find-x.userpilot.io
 https://find-y.userpilot.io
 https://find-z.userpilot.io
 https://find-w.userpilot.io
 wss://analytex.userpilot.io
 wss://analytex-us.userpilot.io
 wss://analytex-eu.userpilot.io
 wss://analytex-in.userpilot.io
 https://analytex.userpilot.io
 https://analytex-us.userpilot.io
 https://analytex-eu.userpilot.io
 https://analytex-in.userpilot.io
 https://reporting.userpilot.io
 wss://reporting.userpilot.io
 https://playground.userpilot.io

font-src
 https://fonts.googleapis.com
 https://fonts.gstatic.com
 https://fonts.userpilot.io

media-src
 https://js.userpilot.io

img-src
 https://media.userpilot.io
 https://uploads.userpilot.io
 https://gifs.userpilot.io
 https://videos.userpilot.io

script-src:
 https://js.userpilot.io
 https://deploy.userpilot.io

style-src:
 'unsafe-inline'

Using the Nonce Attribute in CSP Rules for Userpilot

When applying Content Security Policy (CSP) rules, the use of 'unsafe-inline' and 'unsafe-eval' is not required if you use the nonce attribute. This ensures that only scripts and styles explicitly marked with the correct nonce can execute, improving security.

To enable this with Userpilot, you must pass the nonce attribute when defining the userpilotSettings object.

CSP Rule Example

default-src * 'self' 'nonce-i9o9123rlm';
style-src 'self' 'nonce-i9o9123rlm';

Userpilot Setup

JavaScript Implementation

window.userpilotSettings = {
   token: "YOUR_USERPILOT_TOKEN",
   nonce: "i9o9123rlm" // This should match the nonce value defined in your CSP rules
};

NPM Implementation

Userpilot.initialize("YOUR_USERPILOT_TOKEN", {
   nonce: "i9o9123rlm" // Must match the CSP nonce value
});

By ensuring that the nonce value in your CSP matches the one passed to Userpilot, you allow Userpilot scripts to run safely without needing 'unsafe-inline' or 'unsafe-eval' in your policy.

If you have any questions, shoot us an email at support@userpilot.co