Setting up your Content Security Policy for
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
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
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.
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
undefined before attempting to import
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
There is no workaround for this requirement for the time being, and we plan to remove this code path in the future.
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.