GTM not propagating nonce to Custom HTML tags

by

In order to add the nonce attribute to the Custom HTML scripts, it must be first defined as a GTM variable:

  1. Add id="gtmScript" to the nonce-aware version of GTM snippet – this will be used to target the element and capture nonce.
<script id="gtmScript" nonce="{GENERATED_NONCE}">
  // GTM function
</script>
  1. In GTM, create a new variable that will capture the nonce.
    Use DOM Element type, and select the ID of the GTM snippet.

GTM Variable configuration for nonce

Now that the nonce variable is available in the GTM, add it to the Custom HTML script.

<script nonce="{{nonce}}">
  console.log("CSP-allowed script with nonce:", "{{nonce}}");
</script>

If the tag is not firing, check the Support document.write. This can be a key step in Single Page Applications.
The GTM Custom HTML script is now nonce-allowed and fires as expected.
Of course, any assets used by this script will now need to be allowed in the CSP header.

GTM Custom HTML configuration

Script within a script

Many tracking scripts are creating and firing additional script within themselves.
These will also be blocked as inline-scripts.
Find out where and how they are created, and add nonce to them as well.

Usually, the code looks similar to this:

var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "https://tracking.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s);

Edit this part of the code and insert the nonce variable, in the same manner along with other attributes.

script.nonce = "{{nonce}}";

Again, pay attention and whitelist any necessary assets that are now being blocked from this newly allowed script.

That’s it – Custom HTML script is now fully CSP-allowed.

Source and disclaimer: I’m the author of expanded dev.to guide

More Related Contents:

  1. The Chrome extension popup is not working, click events are not handled
  2. How does Content Security Policy (CSP) work?
  3. Trouble with content security policy
  4. Refused to load the script because it violates the following Content Security Policy directive
  5. Injecting iframe into page with restrictive Content Security Policy
  6. Content Security Policy: The page’s settings blocked the loading of a resource
  7. What is happening when I have two CSP (Content Security Policies) policies – header & meta?
  8. Console shows error about Content Security policy and lots of failed GET requests
  9. What’s the purpose of the HTML “nonce” attribute for script and style elements?
  10. How to override content security policy while including script in browser JS console?
  11. Content-Security-Policy error in google chrome extension making
  12. Get JSON in a Chrome extension
  13. Why is script-src-elem not using values from script-src as a fallback?
  14. Using attr to set css variable inline that work with CSP
  15. Jenkins Content Security Policy
  16. Allow All Content Security Policy?
  17. Extension refuses to load the script due to Content Security Policy directive
  18. Chrome version 18+: How to allow inline scripting with a Content Security Policy?
  19. Content Security Policy “data” not working for base64 Images in Chrome 28
  20. Cordova – refuse to execute inline event handler because it violates the following content Security policy
  21. How can I allow Mixed contents (http with https) using content-security-policy meta tag?
  22. Content Security Policy: “img-src ‘self’ data:”
  23. Google Adwords CSP (content security policy) img-src
  24. How to fix chrome-extension inline JavaScript invocation error?

Leave a Comment