Using Google Tag Manager with a Content Security Policy

Introduction

Content Security Policy (CSP) is a widely supported Web security standard intended to prevent certain types of injection-based attacks by giving developers control over the resources loaded by their applications. Use this guide to understand how to deploy Google Tag Manager on a site that uses a CSP.

Note: To ensure CSPs behave as expected, it is best to use the report-uri and/or report-to directives to get reports of policy violations.

Enabling the Google Tag Manager snippet

To use Google Tag Manager on a page with a Content Security Policy, the CSP must allow for the execution of the Google Tag Manager snippet, which is an inline JavaScript snippet that injects the gtm.js script. There are several ways to do this, such as the use of a nonce or a hash. The recommended way to do this is with a nonce, which should be an unguessable, random value that the server generates individually for each response. Supply the nonce value in the Content-Security-Policy script-src directive:

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

Then use the nonce-aware version of the inline Google Tag Manager snippet, setting the nonce attribute on the inline script element to this same value:

<!-- 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-{YOUR-CONTAINER-ID}');</script>
<!-- End Google Tag Manager -->

Google Tag Manager will then propagate the nonce to any scripts that it adds to the page.

There are other approaches to enabling the execution of an inline script, such as supplying the hash of the inline script in the CSP. Please consult CSP documentation for more details.

If the recommmended nonce or hash approaches are not feasible, it is possible to enable the Google Tag Manager inline script by adding the 'unsafe-inline' directive to the CSP's script-src section.

The use of 'unsafe-inline' is discouraged, and one must carefully consider the security ramifications of adding this directive to the CSP before using this approach.

The following directives are needed in the CSP to use this approach:

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

Note: Certain tags load content from or make requests to other origins, so they require the use of additional CSP directives to function properly.

Custom JavaScript Variables

Due to how Custom JavaScript variables are implemented, they will evaluate to undefined in the presence of a CSP unless the 'unsafe-eval' directive is given in the script-src section of the CSP.

To avoid potential security vulnerabilities, use 'unsafe-eval' only when absolutely necessary.

script-src: 'unsafe-eval'

Note: Custom Templates are the recommended alternative to Custom JavaScript variables. They can be used to create custom tags and variables that do not require the use of 'unsafe-eval'.

Preview Mode

In order to use Google Tag Manager's Preview Mode, the CSP must include the following directives:

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

Note: If the page is served over a non-secure connection, the script-src directive should instead include the non-secure http://tagmanager.google.com URL.

Universal Analytics (Google Analytics)

To use the Universal Analytics (Google Analytics) tag, the CSP must include the following directives:

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

Note: If the page is served over a non-secure connection, the script-src directive does not need to include https://ssl.google-analytics.com.

Google Optimize

To use a Google Optimize tag, the CSP must include the following directives:

script-src: https://www.google-analytics.com

Google Ads conversions

To use a Google Ads conversion tag, the CSP must include the following directives:

For secure connections:

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

For non-secure connections:

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

Google Ads remarketing

To use a Google Ads remarketing tag, the CSP must include the following directives:

For secure connections:

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

For non-secure connections:

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