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 à prévenir certains types d'attaques par injection en donnant aux développeurs le contrôle des ressources chargées par leurs applications. Ce guide explique comment déployer Google Tag Manager sur des 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-uri et/ou report-to afin d'obtenir des rapports sur les violations de règles.

Autoriser la balise conteneur à 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 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 impossible à deviner que le serveur génère individuellement pour chaque réponse. Fournissez la valeur du nonce dans la directive script-src de la Content-Security-Policy :

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 compatible avec le nonce du code de conteneur Tag Manager intégré. Définissez l'attribut nonce sur 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é, tel que la fourniture du hachage du script intégré dans la CSP.

Si les approches recommandées avec nonce ou hachage ne sont pas réalisables, vous pouvez activer le script intégré Tag Manager en ajoutant la 'unsafe-inline' directive à la section script-src 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é.

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

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

**Remarque** : Certaines balises chargent du contenu à partir d'autres origines ou leur envoient des requêtes. 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 seront évaluées sur undefined en présence d'une CSP, sauf si la 'unsafe-eval' directive est fournie dans la section script-src de la CSP.

Pour éviter les failles de sécurité potentielles, n'utilisez 'unsafe-eval' qu'en cas d'absolue nécessité.

Directive	Contenu
script-src	'unsafe-eval'

Remarque : Les modèles personnalisés sont l'alternative recommandée aux variables JavaScript personnalisées. Ils peuvent être utilisés 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 inclure les directives suivantes :

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

Google Analytics 4

Pour utiliser la balise Google Analytics 4, la CSP doit inclure les directives suivantes. Les points de terminaison marqués d'un ¹ sont spécifiquement destinés aux fonctionnalités publicitaires, mais nous vous recommandons de les inclure lors de la configuration initiale afin de ne pas avoir à mettre à jour votre CSP si vous associez Google Ads ultérieurement.

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

¹ Points de terminaison publicitaires : ces domaines ne sont activement requis que pour les déploiements GA4 associés à Google Ads ou utilisant des Fonctionnalités de publicité.

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. Vous trouverez la liste de tous les TLD Google compatibles sur la page : https://www.google.com/supported_domains.

Google Ads

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

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

Beacon de données utilisateur Google Ads

Pour utiliser les beacons de données utilisateur Google Ads lors de l'exécution dans des contextes sécurisés, la CSP doit inclure les directives suivantes :

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

Le beacon de données utilisateur Google Ads ne s'exécute pas dans des contextes non sécurisés. La configuration de la 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 * pour autoriser n'importe quel ID d'annonceur :

Pour tous les utilisateurs :

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

Pour les beacons "scripts personnalisés" :

Directive	Contenu
frame-src	https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

Pour les tags d'image :

Directive	Contenu
img-src	https://ad.doubleclick.net https://ade.googlesyndication.com

Service worker

Pour utiliser le service worker pour la correspondance améliorée, les beacons de données utilisateur et les conversions Ads, la CSP doit inclure les directives suivantes :

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