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 admitido que tiene como objetivo evitar ciertos tipos de ataques basados en la inserción, ya que les brinda a los desarrolladores control sobre los recursos que cargan sus aplicaciones. Usa esta guía para comprender cómo implementar Google Tag Manager en sitios que usan un CSP.

Habilita la etiqueta del contenedor para usar CSP

Para usar Google Tag Manager en una página con un CSP, este debe permitir la ejecución del código de tu 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 el uso de un nonce o un hash. El método recomendado es usar un nonce, que debe ser un valor aleatorio imposible de adivinar que el servidor genera de forma individual para cada respuesta. Proporciona el valor de nonce en la directiva script-src de Content-Security-Policy:

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

Luego, utiliza la versión con reconocimiento de nonce del código del contenedor intercalado de Tag Manager. Establece el atributo nonce en el elemento de 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 proporcionar el hash de la secuencia de comandos intercalada en la CSP.

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

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

script-src 'unsafe-inline' https://www.googletagmanager.com
img-src www.googletagmanager.com
connect-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 un CSP, a menos que se proporcione la directiva 'unsafe-eval' en la sección script-src del CSP.

script-src 'unsafe-eval'

Modo de vista previa

Para usar el modo de vista previa de Google Tag Manager, el 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), el 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 el caso de las implementaciones de Google Analytics 4 (Google Analytics) que usan los indicadores de Google, el 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>
frame-src   https://td.doubleclick.net

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

Para conexiones seguras, haz lo siguiente:

script-src https://www.googleadservices.com https://www.google.com https://www.googletagmanager.com
img-src https://googleads.g.doubleclick.net https://www.google.com https://google.com https://pagead2.googlesyndication.com
frame-src https://www.googletagmanager.com https://td.doubleclick.net
connect-src https://pagead2.googlesyndication.com

Para conexiones no seguras:

script-src www.googleadservices.com www.google.com www.googletagmanager.com
img-src googleads.g.doubleclick.net www.google.com google.com pagead2.googlesyndication.com
connect-src pagead2.googlesyndication.com

Para usar una etiqueta de remarketing de Google Ads, el CSP debe incluir las siguientes directivas.

Para conexiones seguras, haz lo siguiente:

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

Para conexiones no seguras, haz lo siguiente:

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

Para utilizar los píxeles contadores de datos del usuario de Google Ads en contextos seguros, el CSP debe incluir las siguientes directivas:

script-src https://www.googletagmanager.com
frame-src https://www.googletagmanager.com

El píxel contador de datos del usuario de Google Ads no se ejecuta en contextos no seguros, por lo que la configuración del CSP en esos casos no es aplicable.

Floodlight

Los usuarios de Floodlight pueden habilitar los CSP con la siguiente configuración. Reemplaza los valores de <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
frame-src https://td.doubleclick.net

Para píxeles contadores de "secuencias de comandos personalizadas" en Tag Manager:

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

Para las etiquetas de imagen:

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

Para el modo de consentimiento:

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