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

Posted 2023-02-19

【中文标题】Google 跟踪代码管理器 - 将 CSP 随机数添加到自定义 HTML 代码段的任何可能方式？脚本属性被剥离

【英文标题】：Google Tag Manager - Any possible way of adding CSP nonce to Custom HTML snippets? Script attributes get stripped

【发布时间】：2021-06-08 06:06:33

【问题描述】：

我正在现有网站上实施 CSP，并且一直在关注 this article 将 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 更改为“unsafe-inline”并在控制台中看到正确的值输出来证明。

从那以后我一直在阅读 GTM strips attributes out of the tags 它内联注入。这很奇怪，因为这意味着上面的链接文章实际上永远不会起作用（它只有 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-...”）。

【问题讨论】：

"The issue is, CSP still blocks this" - 你能显示：1）。浏览器控制台中的违规消息； 2）。您确实使用的 CSP。

嗨@granty，我已经用这个信息更新了我的问题。随机数肯定会进入 GTM。

【参考方案1】：

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

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

无论出于何种原因，如果没有勾选，nonce 属性就会被剥离。勾选后（我猜是使用新的渲染方法），它不会被剥离。