Visão geral

A Política de Segurança de Conteúdo (CSP) é um padrão de segurança da Web amplamente suportado, destinado a evitar certos tipos de ataques baseados em injeção, dando aos desenvolvedores controle sobre os recursos carregados por seus aplicativos. Use este guia para entender como implantar a UserGuiding em um site que usa uma CSP.

TL;DR;

Abaixo está a lista completa das regras do CSP se você quiser usar todos os recursos da UserGuiding:
​

script-src: 'nonce-{SERVER-GENERATED-NONCE}'
connect-src: https://*.userguiding.com 
img-src: https://*.userguiding.com 
style-src: 'unsafe-inline'

Abaixo, você encontrará explicações e recursos relacionados da UserGuiding para cada uma das regras acima;

Ativação do snippet da UserGuiding

Com nonce

Para usar a UserGuiding em uma página com uma Política de Segurança de Conteúdo, a CSP deve permitir a execução do snippet da UserGuiding, que é um snippet JavaScript em linha que injeta o script do container. A maneira recomendada de fazer isso é com um nonce, que deve ser um valor aleatório indecifrável que o servidor gera individualmente para cada resposta. Forneça o valor do nonce na diretiva script-src da Política de Segurança de Conteúdo:
​

script-src 'nonce-{SERVER-GENERATED-NONCE}'

Em seguida, use a versão nonce-aware do snippet UserGuiding em linha, definindo o atributo nonce no elemento de script em linha com esse mesmo valor:
​

<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>

​

A UserGuiding propagará o nonce para todos os scripts que adicionar à página.

Sem nonce

Se a abordagem de nonce recomendada não for viável, é possível ativar o script inline da UserGuiding adicionando a diretiva 'unsafe-inline' à seção script-src da CSP.
​

script-src https://*.userguiding.com 'unsafe-inline'

Permitir o uso de componentes da UI da UserGuiding

Estamos usando styled-components como nossa biblioteca de renderização de UI. Infelizmente, o SC atualmente não oferece suporte ao nonce do lado do cliente e deve haver uma regra unsafe-inline da CSP fornecida na diretiva style-src.
​

style-src 'unsafe-inline'

Permitir o uso de imagens no material de onboarding

Para usar a UserGuiding em uma página com uma Política de Segurança de Conteúdo, a CSP deve permitir a execução do snippet UserGuiding, que é um snippet JavaScript em linha que injeta o script do container. Forneça os seguintes valores nas directivas img-src e connect-src da Política de Segurança de Conteúdo:
​

img-src: https://*.userguiding.com
connect-src: https://*.userguiding.com

Permitir o uso do serviço de identificação do usuário

Para usar o serviço de identificação de usuários da UserGuiding, a CSP deve permitir a conexão com o back-end de armazenamento de usuários persistentes da UserGuiding. Esse aplicativo atua como um mecanismo de regras e armazena as interações dos usuários com guias, hotspots e checklists. Forneça os seguintes valores na diretiva connect-src da Política de Segurança de Conteúdo:

connect-src: https://*.userguiding.com

Saiba mais sobre a Identificação do Usuário.