# 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:

<figure><img src="/files/mS9bUdmaXpZWwy6TO9ag" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/B8Z4AmrAxL59ggiRuH8s" alt=""><figcaption></figcaption></figure>

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`
* `https://*.perfalytics.com`

**script-src-elem:**

* `https://freshpaint-cdn.com`
* `https://perfalytics.com`&#x20;
* `https://*.perfalytics.com`

{% hint style="info" %}
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** directiv&#x65;**.**

For more information, please [read here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src-elem).
{% endhint %}

**connect-src:**

* `https://perfalytics.com`
* `https://*.perfalytics.com`
* `https://freshpaint-impression.com`
* `https://*.freshpaint-impression.com`&#x20;
* `https://freshpaint-proxy.com`
* `https://*.freshpaint-proxy.com`
* `https://freshpaint-cdn.com`
* `https://*.freshpaint-cdn.com`

{% hint style="info" %}
Why this is needed: The Freshpaint SDK posts client error telemetry to `https://freshpaint-proxy.com/v2/telemetry`. Without this host on `connect-src`, browsers will block the request and the implementation will report a CSP violation in the console.
{% endhint %}

**style-src:**

* &#x20;`https://freshpaint-cdn.com`&#x20;

{% hint style="info" %}
Required when using [Freshpaint Consent Manager](https://documentation.freshpaint.io/integrations/consent-management/freshpaint-consent-manager).
{% endhint %}

**'unsafe-eval':**

[Freshpaint Tag Manager](https://documentation.freshpaint.io/admin-panel/events/advanced-options/tag-manager) and [Dynamic Event Properties](https://documentation.freshpaint.io/readme/setting-up-properties#dynamic-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.&#x20;

{% hint style="danger" %}
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.&#x20;
{% endhint %}

{% hint style="warning" %}
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:&#x20;
{% endhint %}

* `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'">
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.freshpaint.io/readme/guides/quickstart/installing-the-freshpaint-sdk-with-a-content-security-policy-csp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.