Usar Google Tag Manager con una política de seguridad de contenido

Una política de seguridad de contenido (CSP) es un estándar de seguridad web muy utilizado, cuyo objetivo es prevenir determinados tipos de ataques de inyección de datos permitiendo a los desarrolladores controlar los recursos que cargan sus aplicaciones. En esta guía se explica cómo implementar Google Tag Manager en un sitio donde se use una CSP.

Habilitar la etiqueta de contenedor para usar la CSP

Si quieres usar Google Tag Manager en una página con una CSP, dicha política debe permitir que se ejecute tu código de contenedor de Tag Manager. Este código se compila como código JavaScript insertado que inyecta la secuencia de comandos gtm.js. Hay varias maneras de hacerlo. Una de ellas es usar un nonce o un hash. El método recomendado es usar un nonce, que debe ser un valor aleatorio e impredecible que el servidor genera únicamente para cada respuesta. Añade el valor nonce a la directiva script-src de la política de seguridad de contenido:

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

A continuación, usa la versión del código de contenedor de Tag Manager insertado que reconoce el nonce. Para ello, en el elemento de secuencia de comandos insertado, asigna al atributo nonce este valor:

<!-- 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 -->

Google Tag Manager aplicará el nonce en todas las secuencias de comandos que añada a la página.

Hay otros métodos para habilitar la ejecución de una secuencia de comandos insertada, como añadir el hash de la secuencia de comandos insertada a la CSP.

Si no puedes usar un nonce ni un hash, habilita la secuencia de comandos insertada de Tag Manager añadiendo la directiva 'unsafe-inline' a la sección script-src de la CSP.

Para aplicar este método, se necesitan las siguientes directivas en la CSP:

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com

Variables de JavaScript personalizadas

Debido a la forma en que se implementan las variables de JavaScript personalizadas, estas tendrán el valor undefined en caso de que haya una CSP, a menos que se añada la directiva 'unsafe-eval' a la sección script-src de la CSP.

script-src: 'unsafe-eval'

Modo de vista previa

Para usar el modo de vista previa de Google Tag Manager, la CSP debe incluir las siguientes directivas:

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 (Google Analytics)

Para usar la etiqueta de Google Analytics 4 (Google Analytics), la CSP debe incluir las siguientes directivas:

script-src:  https://*.googletagmanager.com
img-src:     https://*.google-analytics.com https://*.googletagmanager.com
connect-src: https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com

En las implementaciones de Google Analytics 4 (Google Analytics) que utilizan Google signals, la CSP debe incluir las siguientes directivas:

script-src:  https://*.googletagmanager.com
img-src:     https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com
             https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>
connect-src: https://*.google-analytics.com https://*.analytics.google.com
             https://*.googletagmanager.com https://*.g.doubleclick.net https://*.google.com https://*.google.<TLD>

Universal Analytics (Google Analytics)

Para usar la etiqueta de Universal Analytics (Google Analytics), la CSP debe incluir las siguientes directivas:

script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com

Para usar una etiqueta de conversión de Google Ads, la CSP debe incluir las siguientes directivas:

Con conexiones seguras:

script-src: https://www.googleadservices.com https://www.google.com
img-src: https://googleads.g.doubleclick.net https://www.google.com https://google.com

Con conexiones no seguras:

script-src: www.googleadservices.com www.google.com
img-src: googleads.g.doubleclick.net www.google.com google.com

Para usar una etiqueta de remarketing de Google Ads, la CSP debe incluir las siguientes directivas:

Con conexiones seguras:

script-src: https://www.googleadservices.com https://googleads.g.doubleclick.net https://www.google.com
img-src: https://www.google.com https://google.com
frame-src: https://bid.g.doubleclick.net

Con conexiones no seguras:

script-src: www.googleadservices.com googleads.g.doubleclick.net www.google.com
img-src: www.google.com google.com
frame-src: bid.g.doubleclick.net

Floodlight

Los usuarios de Floodlight pueden habilitar CSPs usando las configuraciones que se indican abajo. Sustituye los valores <FLOODLIGHT-CONFIG-ID> por un ID de anunciante de Floodlight específico, o por * para permitir cualquier ID de anunciante:

Para todos los usuarios:

img-src: https://<FLOODLIGHT-CONFIG-ID>.fls.doubleclick.net

Para balizas de secuencias de comandos personalizadas de Tag Manager:

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

Para etiquetas de imagen:

img-src: https://ad.doubleclick.net

Para el modo de consentimiento:

img-src: https://ade.googlesyndication.com