Skip to main content

Understanding CSP and CORS for Kapa

When integrating Kapa into your website, you may encounter security mechanisms like Content Security Policy (CSP) and Cross-Origin Resource Sharing (CORS).

CORS settings (in Kapa) control who can access Kapa's services, while CSP settings (on your website) control what external resources your site can use. Both need to be configured correctly for Kapa widgets to function properly.

CORS​

CORS is a security mechanism that controls which domains can access resources from Kapa's servers.

How CORS affects your Kapa integration​

When your website (e.g., yourdomain.com) makes requests to Kapa's services (e.g., proxy.kapa.ai), these are considered "cross-origin" requests. Without proper CORS configuration:

  • The browser blocks these requests
  • Your Kapa Website Widget won't function
  • Users see CORS errors in their browser console

Configuring CORS for Kapa​

You don't need to modify your own server's CORS settings. Instead:

  1. In the Kapa platform, add your domain to the enabled domains list when configuring your integration
  2. This tells Kapa's servers to allow requests from your domain
  3. This prevents CORS errors in your integration

CSP​

CSP is a security feature that you configure on your website to specify which external resources your site is allowed to use.

How CSP affects your Kapa integration​

When you add Kapa widgets to your site, your CSP needs to allow:

  • Scripts loading from Kapa's domains
  • API connections to Kapa's services
  • Other Kapa-related resources

Without proper CSP configuration:

  • Scripts from Kapa won't load
  • API requests to Kapa services are blocked
  • Users see CSP violation errors in their browser console

Configuring CSP for Kapa​

If your website has a Content Security Policy enabled, whitelist these domains:

  • http://widget.kapa.ai - For loading the widget script
  • https://proxy.kapa.ai - Proxy for widget functionality
  • https://kapa-widget-proxy-la7dkmplpq-uc.a.run.app - A fallback for the main proxy
  • https://www.google.com/recaptcha - For reCAPTCHA functionality
  • https://metrics.kapa.ai - For optional analytics and metrics collection

Add these domains to your CSP directives:

<meta
  http-equiv="Content-Security-Policy"
  content="
  script-src 'self' widget.kapa.ai www.google.com;
  connect-src 'self' proxy.kapa.ai kapa-widget-proxy-la7dkmplpq-uc.a.run.app metrics.kapa.ai;
  frame-src 'self' www.google.com;
"
/>

Or via HTTP headers:

Content-Security-Policy: script-src 'self' widget.kapa.ai www.google.com; connect-src 'self' proxy.kapa.ai kapa-widget-proxy-la7dkmplpq-uc.a.run.app metrics.kapa.ai; frame-src 'self' www.google.com;

Troubleshooting​

CORS errors​

CORS errors in your browser console look like:

Access to fetch at 'https://proxy.kapa.ai/...' from origin 'https://yourdomain.com' has been blocked by CORS policy

Solution: add your domain to the enabled domains list in your Kapa integration settings.

CSP errors​

CSP errors in your browser console look like:

Refused to load the script 'https://widget.kapa.ai/...' because it violates the following Content Security Policy directive: "script-src 'self'"

Solution: update your CSP to include the required Kapa domains.

Summary​

For a successful Kapa integration:

  1. CORS configuration: Add your domain to the enabled domains list in the Kapa platform
  2. CSP configuration: Update your website's Content Security Policy to include the Kapa domains