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

Question

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

有没有办法传递nonce给自定义 HTML并允许自定义脚本，而无需使用unsafe-inline？

Answer 1

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

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

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

2. 在 GTM 中，创建一个将捕获随机数的新变量。使用DOM 元素类型，并选择 GTM 代码段的 ID。

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

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

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

脚本中的脚本

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

来源和免责声明：我是扩展 dev.to 指南的作者