​
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. 
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: 
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.