Content Security Policy - CSP

Une Content Security Policy (CSP) ou stratégie de sécurité du contenu permet d'améliorer la sécurité des sites web en permettant de détecter et réduire certains types d'attaques, dont les attaques XSS (Cross Site Scripting) et les injections de contenu.

Pour autoriser Eulerian à fonctionner dans le contexte d'une CSP, il vous faut:
    ajouter un jeton “nonce” aux appels scripts de votre document html. Ce jeton est généré de manière aléatoire par votre serveur à chaque appel et injecté dans le contenu retourné. Dans notre exemple, le jeton est inséré en lieu et place de “{TOKEN_NONCE}”.
    ajouter dans votre Meta ou Header HTTP “Content-Security-Policy” le domaine de collecte et le “nonce” en script-src


CSP Template

Meta ou Entête HTTP du CSP

script-src mon.domainedetracking.com 'nonce-{TOKEN_NONCE}'

Appels scripts

<script nonce="{TOKEN_NONCE}">
    (function(e,a){var i=e.length,y=5381,k='script',s=window,v=document,o=v.createElement(k);for(;i;){i-=1;y=(y*33)^e.charCodeAt(i)}y='_EA_'+(y>>>=0);(function(e,a,s,y){s[a]=s[a]||function(){(s[y]=s[y]||[]).push(arguments);s[y].eah=e;};}(e,a,s,y));i=new Date/1E7|0;o.ea=y;y=i%26;o.async=1;o.src='//'+e+'/'+String.fromCharCode(97+y,122-y,65+y)+(i%1E3)+'.js?2';s=v.getElementsByTagName(k)[0];s.parentNode.insertBefore(o,s);})
    ('mon.domainedetracking.com','EA_push');
</script>
 
<script nonce="{TOKEN_NONCE}">
 EA_push();
</script>


CSP avec jeton d'exemple: 3zs4IFgbAL

Meta ou Entête HTTP du CSP

script-src mon.domainedetracking.com 'nonce-3zs4IFgbAL'

Appels scripts

<script nonce="3zs4IFgbAL">
    (function(e,a){var i=e.length,y=5381,k='script',s=window,v=document,o=v.createElement(k);for(;i;){i-=1;y=(y*33)^e.charCodeAt(i)}y='_EA_'+(y>>>=0);(function(e,a,s,y){s[a]=s[a]||function(){(s[y]=s[y]||[]).push(arguments);s[y].eah=e;};}(e,a,s,y));i=new Date/1E7|0;o.ea=y;y=i%26;o.async=1;o.src='//'+e+'/'+String.fromCharCode(97+y,122-y,65+y)+(i%1E3)+'.js?2';s=v.getElementsByTagName(k)[0];s.parentNode.insertBefore(o,s);})
    ('mon.domainedetracking.com','EA_push');
</script>
 
<script nonce="3zs4IFgbAL">
 EA_push();
</script>


CSP exemples fonctionnels

CSP: script-src 'self' foo.bar.com;
  • Valide:
<script src="//foo.bar.com/file.js" />
  • Bloque:
<script>
 console.log('Hello');
 </script>
CSP: script-src 'self' foo.bar.com 'nonce=xxxx';
  • Valide:
<script src="//foo.bar.com/file.js" />
<script nonce="xxxx">
 console.log('Hello');
 </script>
CSP: script-src 'self' foo.bar.com 'unsafe-inline';
  • Valide:
<script src="//foo.bar.com/file.js" />
<script>
 console.log('Hello');
 </script>

Si vous souhaitez pouvoir utiliser le LiveTagging (ce qui est fortement recommandé, notamment pour le support client), il vous faudra aussi ajouter l'autorisation sur le style-src de votre CSP. En effet, des fichiers
CSS gérant l'affichage de la fenêtre de LiveTagging doivent être autorisés au chargement.
La méthode 'nonce' nous permet de rétrocéder le jeton 'nonce' en Tag Management. Pour plus de compatibilité, il est recommandé d'ajouter également les domaines des tags tiers à votre CSP. Il n'est pas garanti, dans le cas de tag “adhoc”, que le “nonce” soit correctement implémenté.