Cómo usar Tag Manager con una Política de Seguridad del Contenido

La Política de Seguridad del Contenido (CSP) es un estándar de seguridad web ampliamente compatible que tiene como objetivo evitar ciertos tipos de ataques basados en inyección, ya que les brinda a los desarrolladores el control sobre los recursos que cargan sus aplicaciones. Usa esta guía para comprender cómo implementar Google Tag Manager en sitios que usan una CSP.

Habilita la etiqueta de contenedor para usar la CSP

Para usar Google Tag Manager en una página con una CSP, la CSP debe permitir la ejecución del código del contenedor de Tag Manager. Este código se compila como código JavaScript intercalado que inserta la secuencia de comandos gtm.js. Existen varias formas de hacerlo, como usar un nonce o un hash. El método recomendado es usar un nonce, que debe ser un valor aleatorio indescifrable que el servidor genera de forma individual para cada respuesta. Proporciona el valor nonce en la directiva script-src de la política de seguridad del contenido:

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

Luego, utiliza la versión compatible con nonce del código del contenedor de Tag Manager intercalado. Configura el atributo nonce en el elemento de la secuencia de comandos intercalada con este mismo 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 -->

Luego, Tag Manager propagará el nonce a cualquier secuencia de comandos que agregue a la página.

Existen otros enfoques para habilitar la ejecución de una secuencia de comandos intercalada, como el suministro del hash de la secuencia de comandos intercalada en la CSP.

Si no es posible usar los enfoques recomendados de nonce o hash, es posible habilitar la secuencia de comandos intercalada de Tag Manager agregando la directiva 'unsafe-inline' a la sección script-src de la CSP.

Las siguientes directivas son necesarias en la CSP para usar este enfoque:

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

Variables personalizadas de JavaScript

Debido a la forma en que se implementan las variables de JavaScript personalizadas, se evaluarán como undefined en presencia de una CSP, a menos que se proporcione la directiva 'unsafe-eval' en 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 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

Para las implementaciones de Google Analytics 4 (Google Analytics) que usan indicadores de Google, 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:

Para 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

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

Para 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 https://td.doubleclick.net

Para 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 td.doubleclick.net

Floodlight

Los usuarios de Floodlight pueden habilitar los CSP con los siguientes parámetros de configuración. Reemplaza los valores de <FLOODLIGHT-CONFIG-ID> por un ID de anunciante de Floodlight específico o * para permitir cualquier ID de anunciante:

Para todos los usuarios:

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

Para los píxeles contadores de "secuencias de comandos personalizadas" en 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, haz lo siguiente:

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