Google 跟踪代码管理器 - 是否有任何可能的方法将 CSP 随机数添加到自定义 HTML 代码段？脚本属性被剥离

Question

我正在现有网站上实现 CSP，并一直在关注这篇文章，将 CSP 随机数传递给 GTM 并将其用作 GTM 中的自定义变量。

<script nonce="9CZ9vGge7C9At2iwrPtSNG7Ev10=" id="gtmScript">
<!-- Google Tag Manager -->
(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-MYID');
<!-- End Google Tag Manager -->
</script>

变量被添加为 DOM 元素变量。然后我将变量值添加到我的自定义脚本中。这是一个演示脚本。它是 GTM 中的整个自定义 HTML 标记。

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

问题是，CSP 仍然阻止这一点。它与 {{nonce}} 变量无关 - 通过将 CSP 更改为“不安全内联”并在控制台中查看正确的值输出来证明。

从那以后我一直在读到GTM 会从它内联注入的标签中剥离属性。这很奇怪，因为这意味着上面链接的文章实际上永远不会起作用（这只是一篇 3 个月前的文章）。但这是否意味着实际上不可能让自定义 HTML GTM 标记中的脚本与 CSP 一起运行？上面链接中的解决方案是不可能的，因为脚本总是会被 CSP 阻止。

更新：这是我的 CSP

<meta http-equiv="Content-Security-Policy" content="
            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'">

和控制台错误

gtm.js?id=GTM-MYID:782 拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self' 'nonce-mQoPSCSszFQ8loJF5jii6quCHeY=' *.googletagmanager.com”。启用内联执行需要“unsafe-inline”关键字、哈希值（“sha256-3kt898DvY8z+SqQyfz8g06pUzzBokMjvzcQ5uN50wTs=”）或随机数（“nonce-...”）。

Answer 1

好的，我在这里找到了原因。我将保留这个问题，以防将来有人偶然发现这个问题。

当您在 GTM 中创建自定义 HTML 标记时，代码窗口下方会出现一个名为“支持 document.write”的复选框。它旁边的工具提示除了允许您通过“新渲染引擎”在脚本中使用 document.write() 之外没有提及太多。

无论出于何种原因，如果未勾选此选项，则随机数属性将被删除。勾选它（我猜使用新的渲染方法），它不会被剥离。