title: Google Tag Manager - Any possible way of adding CSP nonce to Custom HTML snippets? Script attributes get stripped
body: <p>I'm implementing CSP on an existing website and have been following along with <a href="https://dev.to/matijamrkaic/using-google-tag-manager-with-a-content-security-policy-9ai" rel="nofollow noreferrer">this article</a> on passing a CSP nonce to GTM and using it as a Custom Variable in GTM.</p>
  <pre><code>&lt;script nonce=&quot;9CZ9vGge7C9At2iwrPtSNG7Ev10=&quot; id=&quot;gtmScript&quot;&gt;
  &lt;!-- Google Tag Manager --&gt;
  (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'?'&amp;l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
  n&amp;&amp;j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-MYID');
  &lt;!-- End Google Tag Manager --&gt;
  &lt;/script&gt;
  </code></pre>
  <p>Variable gets added as a DOM Element Variable. Then I add the variable value to my custom script. Here is a demo script. It is the entirety of a Custom HTML tag in GTM.</p>
  <pre><code>&lt;script nonce=&quot;{{nonce}}&quot;&gt;
    console.log(&quot;CSP-allowed script with nonce:&quot;, &quot;{{nonce}}&quot;);
  &lt;/script&gt;
  </code></pre>
  <p>The issue is, CSP still blocks this. And it has nothing to do with the {{nonce}} variable - proven by changing CSP to 'unsafe-inline' and seeing the correct value output in console.</p>
  <p>I have since been reading that <a href="https://stackoverflow.com/questions/60215533/is-there-a-way-to-include-data-as-a-script-attribute-in-custom-google-tag-mana">GTM strips attributes out of the  tags</a> it injects inline. Which would be odd, as it would mean the linked article above actually never would have worked (it's only a 3 month old article). But does this mean that it's physically impossible to get scripts in Custom HTML GTM tags to function with CSP? The solution in the above link is impossible because the script will always be blocked by CSP.</p>
  <p><strong>UPDATE: Here is my CSP</strong></p>
  <pre><code>&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;
              default-src 'none' ;frame-src 'self';
              script-src 'self' 'nonce-$CSPNonce' *.googletagmanager.com;
              style-src 'self' 'nonce-$CSPNonce';
              font-src 'self';
              img-src 'self' 'nonce-$CSPNonce' data:;
              connect-src 'self'&quot;&gt;
  </code></pre>
  <p>And the console error</p>
  <blockquote>
  <p>gtm.js?id=GTM-MYID:782 Refused to execute inline script because it violates the following Content Security Policy directive: &quot;script-src 'self' 'nonce-mQoPSCSszFQ8loJF5jii6quCHeY=' *.googletagmanager.com&quot;. Either the 'unsafe-inline' keyword, a hash ('sha256-3kt898DvY8z+SqQyfz8g06pUzzBokMjvzcQ5uN50wTs='), or a nonce ('nonce-...') is required to enable inline execution.</p>
  </blockquote>