Content Security Policy (CSP)
We are offering the possibility of using Usersnap with Content Security Policy (CSP), which enhances certain security issues.
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>
Updated 10 months ago