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.

Daily Prebuilt with Babel

If using Daily Prebuilt in a web app compiled with Babel, you may see an error about 'unsafe-eval' needing to be allowed: Uncaught EvalError: call to Function() blocked by CSP

This is related to a known issue in Facebook's regenerator library, which is a dependency of Babel.

To get around this problem, you can utilize the workaround described here by setting globalThis.regeneratorRuntime to undefined before attempting to import daily-js.

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.

'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.

There is no workaround for this requirement for the time being, and we plan to remove this code path in the future.

Allowing background blur

Additionally, if you plan to use our background blur feature in call object mode, you'll need to allow the following resource in your script-src and connect-src of your CSP: https://cdn.jsdelivr.net/npm/@mediapipe/

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.