Onfido Web SDK: common Content Security Policy (CSP) issues

Start here

Content Security Policy

In order to mitigate potential cross-site scripting issues, all modern browsers support a Content Security Policy (CSP). An incorrectly configured CSP can lead to the Onfido Web SDK not being able to render, incorrectly displaying the images captured during the flow or incorrectly loading styles. If the CSP is blocking some of the SDK functionalities, make sure you add the following snippet inside the <head> tag of your application.

The preferred way to define the CSP is to include it in the HTTP Response Header that delivers the document.

The meta tag recommendation is a fallback option to ensure that the appropriate directives are whitelisted, the minimum requirement to work with the Onfido Web SDK.

<meta
  http-equiv="Content-Security-Policy"
  content="
  default-src 'self' https://sdk.onfido.com https://assets.onfido.com;
  connect-src 'self' https://api.onfido.com https://api.us.onfido.com https://api.ca.onfido.com http://onfido.com;
"
/>

connect-src restricts the URLs that can be loaded using script interfaces (for example, the Onfido ones).
default-src serves as a fallback for the other fetch directives.

If default-src is not preferred, you must set each required directive as shown below:

<meta
  http-equiv="Content-Security-Policy"
  content="
  script-src https://sdk.onfido.com https://assets.onfido.com;
  style-src https://sdk.onfido.com ;
  font-src https://sdk.onfido.com;
  connect-src https://api.onfido.com https://api.us.onfido.com https://api.ca.onfido.com http://onfido.com;
  frame-src https://sdk.onfido.com;
"
/>

Correct source values

If you are bootstrapping the SDK using inline javascript (for example, bootstrapping the Onfido Web SDK in native app using a webview component), you must add the unsafe-inline keyword value as well as self to the directives.

self: script-src 'self' allows loading resources from the same origin (same scheme and domain name).
unsafe-inline: script-src 'unsafe-inline' allows use of inline source elements such as the style attribute, onclick, or script tag bodies and javascript: URIs

<meta
  http-equiv="Content-Security-Policy"
  content="
  default-src  https://sdk.onfido.com https://assets.onfido.com;
  connect-src  https://api.onfido.com https://api.us.onfido.com https://api.ca.onfido.com http://onfido.com;
  script-src 'self' 'unsafe-inline' https://sdk.onfido.com https://assets.onfido.com;
"
/>

In general, CSP policies are varied across different organizations with some apps having more restrictions. This guide provides an overall insight into the most common CSP-related issues. We recommend reading the Mozilla Content-Security-Policy for more information and guidelines on how to implement your CSP directives and keywords in safe and clean way.