Utiliser Tag Manager avec une Content Security Policy

La Content Security Policy (CSP) est une norme de sécurité Web largement acceptée. Elle vise à prévenir certains types d'attaques par injection en permettant aux développeurs de contrôler les ressources chargées par leurs applications. Ce guide vous explique comment déployer Google Tag Manager sur des sites qui utilisent une CSP.

Activer le tag de conteneur pour utiliser CSP

Pour utiliser Google Tag Manager sur une page avec une CSP, celle-ci doit autoriser l'exécution du code de votre conteneur Tag Manager. Ce code est conçu comme un code JavaScript intégré qui injecte le script gtm.js. Il existe plusieurs façons de procéder, par exemple en utilisant un nonce ou un hachage. La méthode recommandée consiste à utiliser un nonce, qui doit être une valeur aléatoire et impossible à deviner que le serveur génère individuellement pour chaque réponse. Indiquez la valeur nonce dans la directive Content-Security-Policy script-src :

Content-Security-Policy:
script-src 'nonce-{SERVER-GENERATED-NONCE}';
img-src www.googletagmanager.com;
connect-src www.googletagmanager.com www.google.com

Utilisez ensuite la version du code de conteneur Tag Manager intégré compatible avec les valeurs nonce. Définissez l'attribut nonce de l'élément de script intégré sur cette même valeur :

<!-- Google Tag Manager -->
<script nonce='{SERVER-GENERATED-NONCE}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Tag Manager propagera ensuite le nonce à tous les scripts qu'il ajoute à la page.

Il existe d'autres approches pour permettre l'exécution d'un script intégré, comme fournir le hachage du script intégré dans la CSP.

Si les approches recommandées avec nonce ou hachage ne sont pas réalisables, il est possible d'activer le script intégré Tag Manager en ajoutant la directive 'unsafe-inline' à la section script-src de la CSP.

Les directives suivantes sont nécessaires dans la CSP pour utiliser cette approche :

Variables JavaScript personnalisées

En raison de la façon dont les variables JavaScript personnalisées sont implémentées, elles seront évaluées à undefined en présence d'une CSP, sauf si la directive 'unsafe-eval' est indiquée dans la section script-src de la CSP.

Mode aperçu

Pour utiliser le mode Aperçu de Google Tag Manager, le CSP doit inclure les directives suivantes :

Google Analytics 4 (Google Analytics)

Pour utiliser la balise Google Analytics 4 (Google Analytics), la CSP doit inclure les directives suivantes :

Pour les déploiements Google Analytics 4 (Google Analytics) utilisant les signaux Google, le CSP doit inclure les directives suivantes :

Google Ads

Pour utiliser une balise de conversion, de remarketing ou Conversion Linker Google Ads, le CSP doit inclure les directives suivantes :

Beacon de données utilisateur Google Ads

Pour utiliser les balises de données utilisateur Google Ads dans des contextes sécurisés, la CSP doit inclure les directives suivantes :

La balise de données utilisateur Google Ads ne s'exécute pas dans des contextes non sécurisés. La configuration CSP n'est donc pas applicable dans ces cas.

Floodlight

Les utilisateurs de Floodlight peuvent activer les CSP à l'aide des configurations suivantes. Remplacez les valeurs <FLOODLIGHT-CONFIG-ID> par un ID d'annonceur Floodlight spécifique ou par * pour autoriser n'importe quel ID d'annonceur :

Pour tous les utilisateurs :

Pour les balises "scripts personnalisés" :

Pour les tags d'image :

Service worker

Pour utiliser le service worker pour l'amélioration des correspondances, les balises de données utilisateur et les conversions Ads, le CSP doit inclure les directives suivantes :

Résoudre les problèmes avec Tag Assistant

Pour résoudre les problèmes liés à la Content Security Policy (CSP), utilisez Tag Assistant. Tag Assistant affiche la liste des ressources bloquées par votre stratégie de sécurité du contenu.

1. Ouvrez Tag Assistant et saisissez l'URL de votre site Web. Un nouvel onglet s'affiche, avec votre site Web.

2. Si la stratégie Content Security Policy (CSP) de votre page bloque une ressource, un problème de CSP s'affiche dans la section Problèmes liés à la page de Tag Assistant.

   

3. Sélectionnez Afficher le problème à côté du problème lié à la CSP pour afficher la liste de toutes les ressources bloquées sur votre page.

4. Ajoutez toutes les ressources bloquées à votre stratégie Content Security Policy.