When displaying Onsite campaigns on your website and also using a Content Security Policy (CSP), it's important to ensure that your CSP allows the Onsite feature to function properly.
The CSP is a security mechanism that allows website owners to specify which resources (such as scripts, fonts, images, and frames) are allowed to be loaded on their site. By default, CSP blocks all resources that are not explicitly allowed in the policy. If Onsite (via Sleeknote) is not safely listed in your CSP, it may not work correctly, or it may not load at all.
To safelist Onsite (via Sleeknote) in your CSP, follow the steps below:
- First - we strongly recommend to trust *.sleeknote.com
Before you start specifying individual resources in your CSP, we strongly recommend that you trust the entire Sleeknote domain by adding the following to your CSP:
default-src 'self' *.sleeknote.com;
This will allow Onsite (via Sleeknote) to load all the resources it needs, regardless of the specific subdomains it uses. It's important to note that Onsite (via Sleeknote) reserves the right to use or cancel any subdomain it wishes, so by nitpicking exact subdomains into CSP configurations, you may experience service breakages as Onsite (via Sleeknote) deploys and develops new versions of its software.
- If you want stricter restrictions, specify these resources for Onsite (via Sleeknote) to load.
Onsite (via Sleeknote) needs to load several types of resources to function properly. Here are the specific CSP directives you should use to allow Sleeknote to load these resources:
To load JavaScript:
To create <link> elements with data URIs:
style-src data:;
To fetch resources:
connect-src cdnjs.cloudflare.com fonts.googleapis.com images.sleeknote.com sleeknotestaticcontent.sleeknote.com sleeknotecustomerscripts.sleeknote.com;
Onsite (via Sleeknote) uses the JavaScript fetch() API to load additional resources (such as HTML, images, and CSS files), and caches them using the Cache API. It also uses Cloudflare to serve Twitter Emoji and gets some fonts CSS from Google.
To load fonts:
font-src fonts.gstatic.com sleeknotestaticcontent.sleeknote.com;
To load images:
img-src data: blob: sleeknotestaticcontent.sleeknote.com analytics.sleeknote.com;
Onsite (via Sleeknote) converts loaded images into blobs and creates object URLs. Therefore, data: image sources need to be allowed. Not all images are converted this way and not all the time. Plus, Onsite (via Sleeknote) uses a tracking pixel for analytics.
To post data to various integration endpoints: