Installing the Freshpaint SDK with a Content Security Policy (CSP)

You may be using a Content Security Policy (CSP) in order to enhance the security of your webpage. Since this restricts how JavaScript resources are loaded, you'll need an engineer to follow a few more steps. You'll know this is an issue when the following console error is triggered when you try to install the Freshpaint snippet:

An engineer will need to use the hash given in your console error and add it to the allowlist for the 'script-src' in your CSP:

The following urls will need to be allowlisted on your CSP in order to load the Freshpaint snippet:

• https://perfalytics.com/static/js/freshpaint.js

• https://perfalytics.com/static/js/integrations.js

• https://perfalytics.com/static/js/editor.js

The following domains will also need to be allowlisted:

script-src:

• https://freshpaint-cdn.com

• https://perfalytics.com

script-src-elem:

• https://freshpaint-cdn.com

• https://perfalytics.com

The script-src-elem directive only needs to be added when different policies are needed for script elements, versus other script contexts. Valid sources can be specified for all JavaScript script sources using the script-src directive.

For more information, please read here.

connect-src:

• https://*.perfalytics.com

• https://perfalytics.com

'unsafe-eval':

Freshpaint Tag Manager and Dynamic Event Properties both rely on the unsafe-eval source expression in order to execute your associated JavaScript. If you are using these features, you must add this expression to your CSP.

Using unsafe-eval in a Content Security Policy (CSP) allows the execution of arbitrary JavaScript code, increasing the risk of cross-site scripting (XSS) vulnerabilities. Only add this if using the Freshpaint Tag Manager or Dynamic Event Properties features.

If you have adblocker bypass enabled, the urls you will need to allowlist on your CSP will be specific to your account. You'll have to add the specific urls that appear in your console errors to your CSP. For example:

• https://<custom_subdomain>.cloudfront.net/static/js/freshpaint.js

• https://<custom_subdomain>.execute-api.us-west-2.amazonaws.com/prod

• https://<custom_subdomain>.cloudfront.net/static/js/integrations.js

• https://<custom_subdomain>.cloudfront.net/static/js/editor.js

If you have client-side app destinations integrated, those will have to be added to the allowlist on the CSP as well. Here is an example of a CSP with ad-blocker bypass enabled with the correct urls allowlisted with a Freshpaint client-side Mixpanel destination integration:

<meta http-equiv="Content-Security-Policy" content="img-src 'self';
     script-src 'self' 'sha256-topW5bAl+v+kyY7bBFMyXdN9/0es3zVP+TAWbEMFDAE='      https://<custom_subdomain>.cloudfront.net/static/js/freshpaint.js https://<custom_subdomain>.execute-api.us-west-2.amazonaws.com/prod https://<custom_subdomain>.cloudfront.net/static/js/integrations.js http://cdn.mxpnl.com; style-src 'self'">