> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fingerprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Content Security Policy (CSP)

If you have a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) on your website, it can block the JavaScript agent. JavaScript agent will throw a special error in this case:

```javascript JavaScript theme={"theme":"github-dark-dimmed"}
try {
  const fp = Fingerprint.start({ apiKey: 'PUBLIC_API_KEY' })
  await fp.get()
} catch (error) {
  if (error.code === 'csp_block') {
    // Your CSP blocks the JavaScript agent
    // Can be thrown by both "start" and "get"
  }
}
```

Add the following directives to your policy to unblock the JavaScript agent and the WebWorker download:

<CodeGroup>
  ```text CDN installation theme={"theme":"github-dark-dimmed"}
  script-src https://fpjscdn.net;
  connect-src https://api.fpjs.io https://*.api.fpjs.io;
  worker-src blob:;
  ```

  ```text NPM installation theme={"theme":"github-dark-dimmed"}
  script-src https://fpnpmcdn.net;
  connect-src https://api.fpjs.io https://*.api.fpjs.io;
  worker-src blob:;
  ```
</CodeGroup>

If you already have such directives in your policy, add the given addresses to the directives. An example of combining a couple of policies:

<CodeGroup>
  ```text Current policy theme={"theme":"github-dark-dimmed"}
  default-src 'self';
  connect-src 'self' example.com;
  style-src 'self' 'unsafe-inline';
  ```

  ```text JavaScript agent policy theme={"theme":"github-dark-dimmed"}
  connect-src https://api.fpjs.io https://*.api.fpjs.io;
  worker-src blob:;
  ```

  ```text Combined policy theme={"theme":"github-dark-dimmed"}
  default-src 'self';
  connect-src 'self' example.com https://api.fpjs.io https://*.api.fpjs.io;
  style-src 'self' 'unsafe-inline';
  worker-src blob:;
  ```
</CodeGroup>

An example of an HTML code with a Content Security Policy that lets JavaScript agent work:

<CodeGroup>
  ```html HTML theme={"theme":"github-dark-dimmed"}
  <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        script-src 'self' https://fpjscdn.net;
        connect-src 'self' https://api.fpjs.io https://*.api.fpjs.io;
        worker-src blob:;
      ">
    </head>
    ...
  </html>
  ```
</CodeGroup>

## Automatic updates

The default endpoints used by JavaScript agent may change with automatic updates. JavaScript agent uses fallback endpoints to evade ad blockers that block JavaScript agent. The fallback endpoints are changed when they get to ad blocker lists. So you should check this guide from time to time for up-to-date CSP recommendations to ensure your CSP doesn't block the fallback endpoints.

The primary endpoint (`https://api.fpjs.io` or `https://*.api.fpjs.io`) is never changed automatically to prevent JavaScript agent from being blocked by your CSP.

## Subdomain setup

If you've set up JavaScript agent to use [a custom endpoint](/docs/custom-subdomain-setup), add the endpoint to the policy instead of the built-in endpoint. For example, if your custom endpoint is `https://fp.yourdomain.com`, your policy is:

<CodeGroup>
  ```text Text theme={"theme":"github-dark-dimmed"}
  script-src https://fp.yourdomain.com;
  connect-src https://fp.yourdomain.com;
  worker-src blob:;
  ```
</CodeGroup>
