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 la balise 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. Fournissez la valeur nonce dans la directive script-src-elem de la règle de sécurité du contenu en tant que nonce-{SERVER-GENERATED-NONCE}, et utilisez la version compatible avec le nonce du code de conteneur Tag Manager intégré. 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-elem de la CSP.

Le CSP doit autoriser les éléments suivants pour que vous puissiez utiliser cette approche :

Directive Contenu
script-src-elem https://www.googletagmanager.com 'unsafe-inline'
img-src https://www.googletagmanager.com
connect-src https://www.googletagmanager.com https://www.google.com

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.

Directive Contenu
script-src 'unsafe-eval'

Mode aperçu

Pour utiliser le mode Aperçu de Google Tag Manager, la CSP doit autoriser les éléments suivants :

Directive Contenu
script-src-elem https://www.googletagmanager.com https://tagmanager.google.com
style-src https://www.googletagmanager.com https://tagmanager.google.com https://fonts.googleapis.com
img-src https://www.googletagmanager.com https://ssl.gstatic.com https://www.gstatic.com
font-src https://fonts.gstatic.com data:

Google Analytics

Pour utiliser Google Analytics, la CSP doit autoriser les éléments suivants :

Directive Contenu
script-src-elem https://www.googletagmanager.com
img-src https://www.googletagmanager.com https://*.google-analytics.com https://*.google.com https://*.google.<TLD> https://*.g.doubleclick.net
connect-src https://www.googletagmanager.com https://*.google-analytics.com https://*.google.com https://*.google.<TLD> https://*.g.doubleclick.net https://pagead2.googlesyndication.com
frame-src https://www.googletagmanager.com

Pour utiliser Google Analytics sans aucune fonctionnalité Ads, la CSP doit autoriser les éléments suivants :

Directive Contenu
script-src-elem https://www.googletagmanager.com
img-src https://www.googletagmanager.com https://*.google-analytics.com
connect-src https://www.googletagmanager.com https://*.google-analytics.com https://*.google.com

Pour utiliser une balise de conversion, de remarketing ou Conversion Linker Google Ads, la CSP doit autoriser les éléments suivants :

Directive Contenu
script-src-elem https://www.googletagmanager.com https://www.googleadservices.com https://www.google.com
img-src https://www.googletagmanager.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://pagead2.googlesyndication.com https://www.google.com https://www.google.<TLD>
connect-src https://www.googletagmanager.com https://www.googleadservices.com https://googleads.g.doubleclick.net https://pagead2.googlesyndication.com https://www.google.com https://www.google.<TLD> https://ad.doubleclick.net
frame-src https://www.googletagmanager.com

Pour utiliser les balises de données utilisateur Google Ads dans des contextes sécurisés, la CSP doit autoriser les éléments suivants :

Directive Contenu
script-src-elem https://www.googletagmanager.com
connect-src https://www.google.com
frame-src https://www.googletagmanager.com

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

Pour utiliser Floodlight, le CSP doit autoriser les éléments suivants :

Directive Contenu
img-src https://www.googletagmanager.com https://ad.doubleclick.net https://ade.googlesyndication.com https://adservice.google.com
connect-src https://pagead2.googlesyndication.com https://www.google.com https://www.googleadservices.com https://ad.doubleclick.net
frame-src https://www.googletagmanager.com

Pour utiliser des scripts Floodlight personnalisés, la CSP doit également autoriser les éléments suivants (en plus de ceux mentionnés précédemment) :

Directive Contenu
frame-src https://*.fls.doubleclick.net

Merchant Center

Pour utiliser Merchant Center, le CSP doit autoriser les éléments suivants :

Directive Contenu
script-src-elem https://www.googletagmanager.com
img-src https://*.merchant-center-analytics.goog
connect-src https://*.merchant-center-analytics.goog

Service worker

Pour utiliser le service worker pour le ciblage amélioré, les balises de données utilisateur et les conversions Ads, la CSP doit autoriser les éléments suivants :

Directive Contenu
frame-src https://www.googletagmanager.com

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 affichera la liste des ressources bloquées par votre Content Security Policy.

  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 sur la page de Tag Assistant.

    Capture d'écran de Tag Assistant montrant un problème de CSP

  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. Capture d'écran de Tag Assistant montrant le curseur du problème lié à la CSP

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