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:

In addition to allowing us to load daily-js from Unpkg, the above policy also allows us to load relevant resources from Daily domains via the connect-src directive.

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' with https://*.daily.co in your script-src directive.

If you are using virtual backgrounds or background blur in call object mode, you will still need to allow 'unsafe-eval' in your CSP due to a known issue in the mediapipe library.

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