Docs
Get startedGuidesReferenceBlogChangelog
  1. Home
  2. Guides
  3. Privacy & security
  4. Content Security Policy (CSP)

Setting up your Content Security Policy for daily-js

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

Let's take a look at what directives your CSP will require for Daily Prebuilt and Daily's call object mode respectively.

Daily Prebuilt

If using Daily Prebuilt, a minimal functional CSP can look like this:

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 our custom call object mode, the CSP will require some different allowances. A minimal call object CSP can be defined as follows:

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

You may note the use of 'unsafe-eval' in the call object CSP example above. At this time, call object mode in daily-js utilizes a code path which loads our call object bundle source from Daily's CDN and then makes a Function() call to execute it. This results in an eval.

From Daily version 0.27.0, we've added an option to create the Daily call object via a code path which does not require 'unsafe-eval'. This will eventually be the default.

Currently, there are two steps required to avoid using 'unsafe-eval':

  1. Enable this alternative by using the avoidEval property on call object creation:
  1. Replace 'unsafe-eval' in your script-src directive with:

CSP Changes for noise cancellation

We have updated the CSP code snippets above to account for the use of Krisp noise cancellation in Prebuilt and custom apps. When using Krisp for noise cancellation with Daily, your Content Security Policy (CSP) must include blob: in the script-src directive. Krisp creates a worker using a blob: URL, and this change ensures that the browser permits the loading of such scripts.

Wrapping up

We hope this guide has given you a good overview of Content Security Policy considerations and requirements when using Daily. Please contact us if you have any questions.

Next