Content Security Policy (CSP) is a browser security mechanism that controls which external sources — scripts, fonts, stylesheets, and API connections — are allowed to load on your web page. If your site has an existing CSP and you are embedding the Document360 widget, you must add the widget's trusted source URLs to your policy. Without these additions, the browser will block widget resources, causing symptoms such as missing scroll bars, blocked fonts, failed API calls, or CSP violation errors in the browser console.
Before you begin
Confirm whether your knowledge base is hosted in the US region or the EU region — the trusted source URLs differ between regions.
Ensure you have access to your site's HTML or server configuration to edit the
Content-Security-Policyheader or<meta>tag.Identify the nonce variable already available in your system. You will need to replace
"document360Nonce"in the code samples with this value.
How to add trusted CSP sources for the Document360 widget
Update your Content Security Policy
Add the following sources to your connect-src, script-src-elem, font-src, and style-src-elem directives.
For US users
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="
connect-src
https://2ql92r65q8-dsn.algolia.net/
https://apihub.us.document360.io/
https://api.us.document360.io/
https://gateway.us.document360.io
https://*.algolianet.com
https://js.monitor.azure.com;
script-src-elem
'nonce-document360Nonce'
https://cdn.us.document360.io
https://*.algolianet.com
https://cdn.jsdelivr.net
https://cdnjs.cloudflare.com
https://floik.com/exe/
*.floik.com;
font-src
https://fonts.gstatic.com
https://cdn.us.document360.io;
style-src-elem
'unsafe-inline'
'unsafe-eval'
https://cdn.us.document360.io/
https://cdn.jsdelivr.net
https://fonts.googleapis.com;">
</head>
</html>
Replace "document360Nonce" with the nonce variable already available in your system.
For EU users
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="
connect-src
https://jx9o5re9su-dsn.algolia.net
https://apihub.document360.io/
https://api.document360.io/
https://gateway.document360.io
https://*.algolianet.com
https://js.monitor.azure.com;
script-src-elem
'nonce-document360Nonce'
https://cdn.document360.io
https://*.algolianet.com
https://cdn.jsdelivr.net
https://cdnjs.cloudflare.com
https://floik.com/exe/
*.floik.com;
font-src
https://fonts.gstatic.com
https://cdn.document360.io;
style-src-elem
'unsafe-inline'
'unsafe-eval'
https://cdn.document360.io/
https://cdn.jsdelivr.net
https://fonts.googleapis.com;">
</head>
</html>
Replace "document360Nonce" with the nonce variable already available in your system.
NOTE
The Algolia host URL in connect-src is environment-specific. If you are unsure of the exact host for your environment, use the wildcard https://*.algolia.net in your connect-src directive instead. This covers all Algolia environments and prevents CSP errors caused by mismatched hostnames.
Update your widget configuration
Go to Connections () > Knowledge base widget in the left navigation sidebar of your knowledge base portal.
Select the required widget and click Edit ().
In the Configure and connect tab, expand the Widget JavaScript accordion under the Connection group.
Update your widget script with the nonce parameter as shown below.
For US customers
<!-- Document360 knowledge base assistant start -->
<script nonce="document360Nonce">
(function (w,d,s,o,f,js,fjs) {
w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(panel, document, 'script', 'mw', './widget.js'));
mw('init', { nonce:'document360Nonce',apiKey: 'YOUR_API_KEY' });
//var jQuery_2_2_4 = $.noConflict(true);
</script>
<!-- Document360 knowledge base assistant end -->
For EU customers
<!-- Document360 knowledge base assistant start -->
<script nonce="document360Nonce">
(function (w,d,s,o,f,js,fjs) {
w['JS-Widget']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(panel, document, 'script', 'mw', './widget.js'));
mw('init', { nonce:'document360Nonce',apiKey: 'YOUR_API_KEY' });
//var jQuery_2_2_4 = $.noConflict(true);
</script>
<!-- Document360 knowledge base assistant end -->
Replace "document360Nonce" with the nonce variable already available in your system. The widget is now configured to operate securely within your CSP environment.
FAQ
Why is the scroll bar not showing up on the Knowledge Base widget?
This is typically caused by a CSP rule that blocks the widget's domain. If your domain is not allowlisted in your CSP, it can prevent scroll functionality from working properly. Add the domain URL to your application's CSP to resolve this.
Do I need to add CSP sources if I am not using a nonce?
Yes. CSP sources for connect-src, font-src, and style-src-elem are required regardless of whether you use a nonce. The nonce is required specifically for script-src-elem to allow the widget script to execute. Without the nonce, you may need to use 'unsafe-inline' for scripts, which is not recommended.
What is the difference between the US and EU CSP configurations?
The US and EU configurations differ in the CDN and API endpoint domains. US users point to cdn.us.document360.io and api.us.document360.io, while EU users use cdn.document360.io and api.document360.io. Using the wrong region's URLs will result in blocked resources and a non-functional widget.