Skip to main content

​
What is a Content Security Policy (CSP)?

A Content Security Policy (CSP) contains data about what origins can be used to load and execute various resources inside your web application. A CSP essentially serves as an allowlist. Developers can define a CSP in their web applications to minimize the vector of attack against the app and its visitors. For example, you can specify a script-src directive to dictate which sources the user agent is allowed to execute JavaScript from while using your app. If you make use of a CSP in your web application, this guide will summarize the adjustments you might need to make to have it work with daily-js.

​
Enabling the CSP

The CSP is enabled in one of two ways:
  • By adding a Content-Security-Policy HTTP response header
  • By adding a Content-Security-Policy meta element to the site header

​
Daily Prebuilt

If using Daily Prebuilt, a minimal functional CSP can look like this: 
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; frame-src 'self' https://*.daily.co; script-src 'self' https://unpkg.com/@daily-co/daily-js blob:; worker-src 'self';"
/>
The above policy contains two Daily-specific directives:
  • It allows the user agent to create an iframe with the Daily domain as the source, via the frame-src directive.
  • It allows daily-js to be loaded and executed from Unpkg via the script-src directive.
If you are loading daily-js from a local source or somewhere other than Unpkg, you’ll need to adjust the origin in script-src accordingly. For example, if you are using npm and bundling the library into your app, only the 'self' origin should be needed.

​
Custom call object

If using call object mode, the CSP will require some different allowances. A minimal call object CSP can be defined as follows: 
<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    frame-src 'self';
    script-src 'self' https://unpkg.com/@daily-co/daily-js 'unsafe-eval' blob:;
    connect-src https://*.daily.co https://*.pluot.blue https://*.banuba.cloud wss:;
    worker-src 'self' blob:;
  "
/>
The above policy allows:
  • Loading daily-js from UNPKG (only needed if you’re loading daily-js via a script tag)
  • Loading relevant resources from Daily domains
  • Connecting to Daily calls
  • Connecting to Banuba, Daily’s video processing provider (only needed if you’re using virtual backgrounds or background blur)

​
Avoiding the 'unsafe-eval' requirement

Call object mode in daily-js uses a code path that loads the call object bundle from Daily’s CDN and makes a Function() call to execute it, which results in an eval. You can create the call object via a code path that does not require 'unsafe-eval':
  1. Enable this alternative with the avoidEval property:
const call = Daily.createCallObject({
  dailyConfig: {
    avoidEval: true,
  },
});
  1. Replace 'unsafe-eval' in your script-src directive with:

​
CSP changes for noise cancellation

When using Krisp noise cancellation with Daily, your CSP must include blob: in the script-src directive. Krisp creates a worker using a blob: URL, and this ensures the browser permits loading such scripts. The CSP examples above already include this.

​
Wrapping up

Please contact us if you have any questions.