Setting up your Content Security Policy for
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
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
Enabling the CSP
The CSP is enabled in one of two ways:
- By adding a
Content-Security-PolicyHTTP response header
- By adding a
metaelement 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.
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
- It allows
daily-jsto be loaded and executed from Unpkg via the
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
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
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
- Enable this alternative by using the
avoidEvalproperty on call object creation:
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
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
connect-src of your CSP:
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.