Introduction
Embedded learning allows you to start an instance of your Docebo platform on any external web page, as long as you have access to its HTML and JavaScript code.
The Docebo platform instance opens as a launcher activated either when the user clicks on a button or interacts with an element - such as a link, or a string - on the external web page or it is embedded as a widget within the page. The platform instance shows the training content you, as the Superadmin, have selected for the user on the basis of the action he or she is performing, in order to provide the best learning on the fly experience, enriching it with ad hoc training.
Embedded learning is available as a web-based application on desktop and mobile platforms.
This article describes how to configure your site's content security policy header to accommodate embedded learning.
What is a content security policy
The HTTP Content-Security-Policy response header allows you to control the resources that the user agent is allowed to load for a page. Policies generally involve specifying server origins and script endpoints. Using content security policies helps guard against cross-site scripting attacks.
Where can I find a list of the domains I need to add to the policy?
The domains you need to add to your policy depend on the region your platform is hosted in. In order to find which region your platform is in, access the admin menu using the gear icon, press Advanced settings and in the Advanced settings menu, access the Platform information tab.
All content delivery network domains are listed in the article Configuring network access for Docebo. You can find them organized by region in the Inbound section. You should allow-list all the CDN domains for your region as well as always allow the original domain of the Docebo platform you are using with embedded learning, alternatively you can also use the *.docebosaas.com wildcard domain for your platform.
Strict policies
If you have a policy specifically defining rules for the directives script-src, style-src, img-src, frame-src and child-src they should add the following sources to their security policies in order to allow both Embedded learning launcher and Embedded learning Building Blocks to be viewed correctly.
Given the integrator site as integrator.example.com the full policy could look like this:
Content-Security-Policy: script-src integrator.example.com https://*.dcbstatic.com https://*.docebosaas.com 'self';
style-src integrator.example.com https://*.dcbstatic.com 'unsafe-inline' 'self';
img-src integrator.example.com https://*.dcbstatic.com https://*.docebosaas.com 'self';
frame-src *.dcbstatic.net;
child-src *.dcbstatic.net;
connect-src https://*.docebosaas.com 'self';
For stricter control, you can replace the general *.docebosaas.com wildcard domain with the original domain of the Docebo platform you want to use with embedded learning.
Tip: For platforms located in Canada, Mumbai or Sydney, please consult the following example policies:
Canada (ca-central-1)
Content-Security-Policy: script-src integrator.example.com https://static-assets.canada-1.enterprise.docebodns.com https://static-assets-proxy.canada-1.enterprise.docebodns.com https://*.dcbstatic.com https://*.docebosaas.com 'self';
style-src integrator.example.com https://static-assets.canada-1.enterprise.docebodns.com https://static-assets-proxy.canada-1.enterprise.docebodns.com https://*.dcbstatic.com 'unsafe-inline' 'self';
img-src integrator.example.com https://static-assets-proxy.canada-1.enterprise.docebodns.com https://static-assets.canada-1.enterprise.docebodns.com https://*.dcbstatic.com https://*.docebosaas.com 'self';
frame-src https://static-assets-proxy.canada-1.enterprise.docebodns.com https://static-assets.canada-1.enterprise.docebodns.com *.dcbstatic.net;
child-src https://static-assets-proxy.canada-1.enterprise.docebodns.com https://static-assets.canada-1.enterprise.docebodns.com *.dcbstatic.net;
connect-src https://*.docebosaas.com 'self';
Mumbai (ap-south-1)
Content-Security-Policy: script-src integrator.example.com https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com https://*.docebosaas.com 'self';
style-src integrator.example.com https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com 'unsafe-inline' 'self';
img-src integrator.example.com https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com https://*.docebosaas.com 'self';
frame-src https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com;
child-src https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com;
connect-src https://*.docebosaas.com 'self';
Sydney (ap-southwest-2)
Content-Security-Policy: script-src integrator.example.com https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com https://*.docebosaas.com 'self';
style-src integrator.example.com https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com 'unsafe-inline' 'self';
img-src integrator.example.com https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com https://*.docebosaas.com 'self';
frame-src https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com;
child-src https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com;
connect-src https://*.docebosaas.com 'self';
Unsafe inline in script-src and style-src
Embedded learning needs some JavaScript code to be written on your web hosting side in order to work on your web application. The best practice to handle this code is to avoid adding the unsafe-inline option in the script-src directive by encapsulating such integration code or scripts in a separate JavaScript file that is on the same domain as the site itself or located on a domain that is allow-listed in the script-src directive.
The technology on which embedded learning is built requires unsafe-inline to be added in the style-src directive.
Simple policies
If you use only some of the directives mentioned above or generally use a default-src directive to handle all the security restrictions of your web application, the domain allow-list should be the following:
Content-Security-Policy: style-src https://*.dcbstatic.com 'unsafe-inline' 'self'; default-src https://*.dcbstatic.com https://*.docebosaas.com 'self'
Tip: For platforms located in Canada, Mumbai or Sydney, please consult the following table for example policies:
Canada (ca-central-1)
Content-Security-Policy: style-src https://static-assets.canada-1.enterprise.docebodns.com https://static-assets-proxy.canada-1.enterprise.docebodns.com https://*.dcbstatic.com 'unsafe-inline' 'self'; default-src https://static-assets.canada-1.enterprise.docebodns.com https://static-assets-proxy.canada-1.enterprise.docebodns.com https://*.dcbstatic.com https://*.docebosaas.com 'self'
Mumbai (ap-south-1)
Content-Security-Policy: style-src https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com 'unsafe-inline' 'self'; default-src https://static-assets.india-1.enterprise.docebodns.com https://static-assets-proxy.india-1.enterprise.docebodns.com https://*.docebosaas.com 'self'
Sydney (ap-southwest-2)
Content-Security-Policy: style-src https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com 'unsafe-inline' 'self'; default-src https://static-assets.sydney-1.enterprise.docebodns.com https://static-assests-proxy.sydney-1.enterprise.docebodns.com https://*.docebosaas.com 'self'