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

# Content Security Policy (CSP)

> CSP settings for the Navi SDK (npm and CDN)

## Overview

Navi uses HTTPS APIs, optional WebSocket connections (via providers), and microphone access for voice. Configure CSP to allow required domains.

## Core directives

Replace the CDN origin as needed if you self-host.

```text theme={null}
Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.jsdelivr.net https://unpkg.com 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://unpkg.com;
  img-src 'self' data: blob: https://images.unsplash.com;
  font-src 'self' data:;
  connect-src 'self' https://api.trynavi.guide https://app.trynavi.guide https://api.elevenlabs.io https://*.elevenlabs.io https://api.vapi.ai wss:;
  media-src 'self' data: blob:;
  frame-src 'self' https://cal.com;
```

Notes:

* `connect-src` includes Navi APIs and common provider endpoints (ElevenLabs, Vapi). Add any additional domains your configuration uses.
* `wss:` is included for provider real-time connections.
* `img-src` allows Unsplash if you use the default backgrounds.
* `style-src 'unsafe-inline'` may be required by your app and third-party components. If you disallow it, ensure all inline styles are removed.

## Permissions-Policy

Allow microphone for voice:

```text theme={null}
Permissions-Policy: microphone=(self)
```

## NPM vs CDN

* NPM package: keep `script-src` to your own origin(s) (`'self'`) unless you load other third-party scripts.
* CDN: add your CDN host to `script-src` and `style-src` as shown above, or self-host the built files to keep `'self'` only.

## Debugging CSP

* Check your browser devtools console for CSP violations.
* Incrementally tighten directives once everything works.