Utiliser Tag Manager avec une Content Security Policy

La Content Security Policy (CSP) est une norme de sécurité Web largement acceptée qui vise à empêcher 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 les sites qui utilisent une CSP.

Remarque : Pour vous assurer que la CSP se comporte comme prévu, il est préférable d'utiliser les directives report-to pour obtenir des rapports sur les cas de non-respect des règles.

Activer la balise de conteneur pour utiliser la 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 créé en tant que 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 impossible à deviner, générée par le serveur individuellement pour chaque réponse. Indiquez la valeur du nonce dans la directive Content-Security-Policy script-src-elem en tant que nonce-{SERVER-GENERATED-NONCE}, puis utilisez la version compatible avec le nonce du code du 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 activer l'exécution d'un script intégré, par exemple en fournissant le hachage du script intégré dans la CSP.

Si les approches recommandées de nonce ou de 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.

L'utilisation de 'unsafe-inline' est déconseillée. Avant d'utiliser cette approche, vous devez examiner attentivement les conséquences de l'ajout de cette directive à la CSP en termes de sécurité.

Pour utiliser cette approche, la CSP doit autoriser les éléments suivants :

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

Remarque : Certaines balises chargent du contenu ou envoient des requêtes à d'autres origines. Elles nécessitent donc l'utilisation de directives CSP supplémentaires pour fonctionner correctement.

Variables JavaScript personnalisées

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

Pour éviter d'éventuelles failles de sécurité, n'utilisez 'unsafe-eval' que lorsque cela est absolument nécessaire.

Directive	Contenu
script-src	'unsafe-eval'

Remarque : Les modèles personnalisés sont l'alternative recommandée aux variables JavaScript personnalisées. Elles peuvent être utilisées pour créer des balises et des variables personnalisées qui ne nécessitent pas l'utilisation de '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

Remarque : Chaque domaine de premier niveau (TLD) Google doit être spécifié individuellement, car la syntaxe CSP n'autorise pas l'utilisation de caractères génériques à droite du nom d'hôte. La liste de tous les TLD Google compatibles est disponible à l'adresse suivante : https://www.google.com/supported_domains.

Remarque : Les éléments précédents incluent les points de terminaison spécifiquement requis pour les fonctionnalités publicitaires utilisées par les propriétés associées à Google Ads. Nous vous recommandons de les inclure lors de la configuration initiale afin que la CSP n'ait pas besoin d'être mise à jour si vous associez Google Ads ultérieurement.

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

Google Ads

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

Données utilisateur Google Ads

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, la 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 des éléments précédents) :

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

Merchant Center

Pour utiliser Merchant Center, la 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

Google tag gateway pour les annonceurs

Lorsque vous utilisez Google tag gateway pour les annonceurs, la balise Google est chargée depuis un chemin de mesure sur votre site Web (par exemple, https://www.example.com/metrics) et lui envoie des données. Certaines balises envoient toujours des requêtes aux domaines Google. Conservez donc les directives listées pour chaque produit et autorisez également les éléments suivants :

Directive	Contenu	Objectif
script-src-elem	'self'	Chargement de la balise Google à partir de votre chemin de mesure
img-src	'self'	Requêtes de mesure
connect-src	'self'	Requêtes de mesure
worker-src	'self'	Service worker

Assurez-vous que votre CDN ou votre serveur Web n'ajoute pas l'en-tête Content-Security-Policy de votre site Web aux réponses de votre chemin de mesure. Sinon, le navigateur peut bloquer le service worker.

Taggage côté serveur

Lorsque la balise Google envoie des données à un conteneur serveur, la CSP doit également autoriser votre serveur de taggage. Ces directives ne remplacent pas celles listées pour chaque produit, comme https://www.googletagmanager.com. Ce que vous ajoutez dépend de l'emplacement d'hébergement de votre serveur de taggage :

Directive	Configuration de même origine	Configuration du sous-domaine	Objectif
img-src	'self'	https://TAGGING_SERVER_DOMAIN	Requêtes de mesure
connect-src	'self'	https://TAGGING_SERVER_DOMAIN	Requêtes de mesure
frame-src	'self'	https://TAGGING_SERVER_DOMAIN	Service worker
worker-src	'self'	Pas nécessaire	Service worker
script-src-elem	'self'	https://TAGGING_SERVER_DOMAIN	Uniquement si vous chargez la balise Google depuis votre serveur de taggage

Dans une configuration de même origine, le serveur de taggage est diffusé à partir d'un chemin d'accès sur votre site Web (par exemple, https://www.example.com/metrics). Dans une configuration de sous-domaine, remplacez TAGGING_SERVER_DOMAIN par le domaine de votre serveur de taggage (par exemple, sgtm.example.com).

Dans une configuration de même origine, assurez-vous que votre CDN ou votre serveur Web n'ajoute pas l'en-tête Content-Security-Policy de votre site Web aux réponses du chemin de taggage. Sinon, le navigateur peut bloquer le service worker.

Service worker

La balise Google n'utilise un service worker que si vous utilisez Google tag gateway pour les annonceurs ou le taggage côté serveur. Pour connaître les directives nécessaires à chaque configuration, consultez Google tag gateway pour les annonceurs et Taggage côté serveur. Si vous utilisez les deux, la CSP doit les autoriser tous les deux.

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 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 Content Security Policy 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 de CSP pour afficher la liste de toutes les ressources bloquées sur votre page.

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