We are offering the possibility of using Usersnap with Content Security Policy (CSP), which enhances certain security issues.

More about CSP

Please follow the instructions on this page to use Usersnap with CSP.

CSP nonce installation

For activating CSP with the usage of a nonce, a random hash (nonce) has to be defined.
This nonce is then used to authenticate scripts.

Setting Header

To enable CSP in the browser the Content-Security-Policy header has to be set. In it, different permissions of different URLs or nonce hashes are set.

For example:

Content-Security-Policy: "
  default-src 'self';
  script-src *.usersnap.com 'YOUR-NONCE' 'self';
  style-src *.usersnap.com *.googleapis.com 'YOUR-NONCE';
  connect-src *.usersnap.com https://s3.eu-central-1.amazonaws.com/upload.usersnap.com 'self';
  img-src *.usersnap.com;
  font-src *.usersnap.com *.gstatic.com;
"

To enable Usersnap with CSP, the nonce which is used for Usersnap needs the following permissions:

• script-src
• style-src

Also, the domain *.usersnap.com needs permissions:

• script-src
• connect-src
• style-src
• img-src
• font-src

If you need video uploads on your website, you must allow https://s3.eu-central-1.amazonaws.com/upload.usersnap.com to connect.

Since we are using Google fonts, *.googleapis.com needs the style-src permission, and *.gstatic.com needs the font-src permission.

📘

Permissions-Policy: microphone

If you'd like to enable recording with microphone. It's important to know that when utilizing the Permissions-Policy: microphone header on the website, it's necessary to include the Usersnap origin in order to grant access to the microphone.

Example:
Permissions-Policy: microphone=("https://app.usersnap.com")

Setting nonce

Finally, for activating the widget itself, the nonce hash must be added as an attribute to the embedded script tag and as a parameter to the script source:

<script nonce="YOUR-NONCE"  src="https://widget.usersnap.com/load/YOUR-API-KEY?onload=onUsersnapCXLoad&n=YOUR-NONCE" async></script>