GTM 不会将 nonce 传播到自定义 HTML 标签

Question

为了实施 Content-Security-Policy，我需要将 nonce 传递给 GTM 以允许标记。使用 nonce-aware 版本的 GTM 代码段适用于所有标签类型，除了 Custom HTML.

有没有办法在不使用 unsafe-inline 的情况下将 nonce 传递给 自定义 HTML 并允许自定义脚本？

Answer 1

为了将 nonce 属性添加到自定义 HTML 脚本，必须首先将其定义为 GTM 变量：

将 id="gtmScript" 添加到 GTM 代码段的 nonce-aware 版本 - 这将用于定位元素并捕获 nonce.

<script id="gtmScript" nonce="{GENERATED_NONCE}">
  // GTM function
</script>

在 GTM 中，创建一个将捕获随机数的新变量。使用 DOM 元素 类型和 select GTM 片段的 ID。

既然 nonce 变量在 GTM 中可用，请将其添加到自定义 HTML 脚本中。

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

如果代码未触发，请检查支持document.write。这可能是单页应用程序中的关键步骤。 GTM 自定义 HTML 脚本现在是 nonce-allowed 并按预期触发。当然，此脚本使用的任何资产现在都需要在 CSP header.

中被允许

脚本中的脚本

许多跟踪脚本在其内部创建和触发其他脚本。这些也将被阻止为 inline-scripts。找出它们的创建位置和方式，并向它们添加 nonce。

通常，代码看起来类似于：

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);

编辑这部分代码并以相同的方式插入 nonce 变量以及其他属性。

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

再次注意并将所有必要的资产列入白名单，这些资产现在被这个新允许的脚本阻止了。

就是这样 - 自定义 HTML 脚本现在完全 CSP-allowed。

来源和免责声明：我是 expanded dev.to guide

的作者

GTM 不会将 nonce 传播到自定义 HTML 标签

GTM not propagating nonce to Custom HTML tags

content-security-policy

google-tag-manager

脚本中的脚本