google-tag-manager - GTM 不会将随机数传播到自定义 HTML 标签

Question

为了实现Content-Security-Policy，我需要通过nonce到 GTM 以允许标记。
使用 临时感知 GTM 代码段的版本适用于所有标签类型，除了 自定义 HTML .
有没有办法通过nonce至 自定义 HTML 并允许自定义脚本，而不使用 unsafe-inline ?

Answer 1

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

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

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

在 GTM 中，创建一个将捕获随机数的新变量。
使用 DOM 元素 键入，然后选择 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 中允许此脚本使用的任何 Assets 。


脚本中的脚本
许多跟踪脚本在其自身内创建和触发额外的脚本。
这些也将作为内联脚本被阻止。
找出它们的创建位置和方式，然后添加 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}}";

同样，请注意并将现在被这个新允许的脚本阻止的所有必要 Assets 列入白名单。
就是这样 - 自定义 HTML 脚本现在完全支持 CSP。

来源和免责声明:我是 expanded dev.to guide 的作者