Google Tag Manager

Hi @jasnicole

The use of nonces is hard to achieve with the plugin, because the nonce must be a random value that change on each request.

Instead of this you can use a hash.
This tool will helps you to generate and configure a CSP hash:
https://zinoui.com/tools/csp-hash

@zinoui thank you for your advice. I’m not so sure if I can use hash for Google tag manager. Do you think that this could work?

I will read more about hash via the link that you sent.

Thank you

Sure, it would works.

According the link you’ve sent:

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.

So, if this is your script inclusion code:

<!-- Google Tag Manager -->
<script>(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 -->

you need to set the following header:
Content-Security-Policy: script-src 'sha256-3eU4RLrhTz2w1fRbcpodH7uJHoukn1a8sGOQ7WufMLY=';

Thank you @zinoui for your tip I’m going to try to test it.

@zinoui just a quick question. Followed the guidelines of

Used same code as an example

(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}');

This is giving me this sha256 code: 'sha256-yxJ+6O4WYEOcLHNYtirVna7O6JSocAVYCftB5aidQQw='

I just want to confirm if you used the same code above.
Thank you for your help it’s much appreciated!

• This reply was modified 4 years, 6 months ago by jasnicole.

I just test it again, and gives me the same hash:
sha256-3eU4RLrhTz2w1fRbcpodH7uJHoukn1a8sGOQ7WufMLY=

Please note that code used to calcuate the hash must match exactly the code of google tag manager, e.g. everything between <script> and </script> tags.

This is strange or maybe I’m doing something wrong!
I use https://report-uri.com/home/hash

and exactly what you sent as an example:

(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}');

Could you please tell me where do you generate hashes?

Thank you for your help.

• This reply was modified 4 years, 6 months ago by jasnicole.

I use my own tool to generate hashes, where I found a bug caused by new line characters. However, now it’s fixed. Thanks!

So, you’re right. The correct hash is:
sha256-yxJ+6O4WYEOcLHNYtirVna7O6JSocAVYCftB5aidQQw=

@zinoui this is great now we know we the solution. Thanks for your valuable help.

• This reply was modified 4 years, 6 months ago by jasnicole.