Content Security Policies (CSP) are delivered as a header to your users' browser by your web-server. They are used to declare which dynamic resources are allowed to load on your page.
For many websites, this often involves declaring that only scripts and styles from your own domain and that of any tools that you are using are allowed. However, this can become more involved when complex setups are in play.
If you identify CSP errors on your site that are similar to what is shown below, then your development team or hosting provider will need to adjust your CSP settings.
Adjusting your CSP settings
Check to see if there are CSP errors.
If you're seeing issues with data collection and capturing sessions in Hotjar, this can sometimes be caused by a CSP error. You can check your browser's developer console for these errors. You can learn how to open the console by following the steps in this guide.
If there is a Content Security Policy issue, you will see something similar to the below error:
Consult with your web developer or hosting provider to adjust CSP settings.
Since all servers are different, Hotjar's Support team won't be able to help troubleshoot these issues beyond identifying whether there's a CSP error. When making changes to your Content Security Policies, the best person to reach out to is your web developer, or whoever manages your website.
Choose which CSP settings to adjust.
If you are using a default CSP then adding the below to your default-src rules will be sufficient.
The "..." in the examples below is a placeholder for any existing rules you might have in place:
default-src ... https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com 'unsafe-inline'
If you want stricter restrictions we would recommend the template below to ensure that your policies will be more future-proof as we expand our services. Here's an example of what that would look like:
img-src ... https://*.hotjar.com
script-src ... https://*.hotjar.com 'unsafe-inline'
connect-src ... https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com
font-src ... https://*.hotjar.com
style-src ... https://*.hotjar.com 'unsafe-inline'
If your CSPs require more granularity then here are the absolute minimum security allowances that you need to add to your web-server to allow Hotjar to function properly on your site:
img-src ... https://static.hotjar.com https://script.hotjar.com https://survey-images.hotjar.com
script-src ... https://static.hotjar.com https://script.hotjar.com 'unsafe-inline'
connect-src ... https://*.hotjar.com https://*.hotjar.io wss://*.hotjar.com
font-src ... https://script.hotjar.com
style-src ... https://static.hotjar.com https://script.hotjar.com 'unsafe-inline'