Overview
Content Security Policy (CSP) is a widely supported Web security standard intended to prevent certain types of injection-based attacks by giving developers control over the resources loaded by their applications. Use this guide to understand how to deploy UserGuiding on a site that uses a CSP.
TL;DR;
Below is the full list of CSP rules if you want to use all features of UserGuiding:
script-src: 'nonce-{SERVER-GENERATED-NONCE}'
connect-src: https://static.userguiding.com https://ug-client-img.s3.amazonaws.com https://api.userguiding.com https://user.userguiding.com
img-src: https://static.userguiding.com https://ug-client-img.s3.amazonaws.com
style-src: 'unsafe-inline'
Below you can find explanations and related UserGuiding features for each of the rules above;
Enabling the UserGuiding snippet
To use UserGuiding on a page with a Content Security Policy, the CSP must allow for the execution of the UserGuiding snippet, which is an inline JavaScript snippet that injects the container script. The recommended way to do this is with a nonce, which should be an unguessable, random value that the server generates individually for each response. Supply the nonce value in the Content-Security-Policy script-src
directive:
script-src 'nonce-{SERVER-GENERATED-NONCE}'
Then use the nonce-aware version of the inline UserGuiding snippet, setting the nonce attribute on the inline script element to this same value:
<script nonce="{SERVER-GENERATED-NONCE}">
(function(g,u,i,d,e,s){g[e]=g[e]||[];var f=u.getElementsByTagName(i)[0];var k=u.createElement(i);k.async=true;k.src='https://static.userguiding.com/media/user-guiding-'+s+'-embedded.js';f.parentNode.insertBefore(k,f);if(g[d])return;var ug=g[d]={q:[]};ug.c=function(n){return function(){ug.q.push([n,arguments])};};var m=['previewGuide','finishPreview','track','identify','triggerNps','hideChecklist','launchChecklist'];for(var j=0;j<m.length;j+=1){ug[m[j]]=ug.c(m[j]);}})(window,document,'script','userGuiding','userGuidingLayer','701241238ID');
</script>
UserGuiding will then propagate the nonce to any scripts that it adds to the page.
If the recommended nonce approach is not feasible, it is possible to enable the UserGuiding inline script by adding the 'unsafe-inline'
directive to the CSP's script-src
section.
script-src https://static.userguiding.com 'unsafe-inline'
Enabling the use of UserGuiding UI components
We are using styled-components as our UI rendering library. Unfortunately, SC currently does not support client-side nonce
and there should be unsafe-inline
CSP rule provided in style-src
directive.
style-src 'unsafe-inline'
Enabling the use of images in onboarding material
To use UserGuiding on a page with a Content Security Policy, the CSP must allow for the execution of the UserGuiding snippet, which is an inline JavaScript snippet that injects the container script. Supply the following values in the Content-Security-Policy img-src
and connect-src
directives:
img-src: https://static.userguiding.com ug-client-img.s3.amazonaws.com
connect-src: https://static.userguiding.com ug-client-img.s3.amazonaws.com
Enabling the use of user identification service
To use the user identification service of UserGuiding, the CSP must allow for the connection to UserGuiding's persisted user storage back-end. This application acts as a rule engine and stores users' interactions with guides, hotspots, and checklists. Supply the following values in the Content-Security-Policy connect-src
directive:
connect-src: https://user.userguiding.com
Learn more about user identification