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://*.userguiding.com 
img-src: https://*.userguiding.com 
style-src: 'unsafe-inline'

Below you can find explanations and related UserGuiding features for each of the rules above;

Enabling the UserGuiding snippet

With nonce

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.

Without nonce

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://*.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

img-src: https://*.userguiding.com
connect-src: https://*.userguiding.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://*.userguiding.com

Learn more about user identification

UserGuiding Now