javascript - 如何让 Google Tag Manager 和 Content-Security-Policy 共存？

Question

Content-Security-Policy (CSP) header 旨在保护您的应用程序免受网络应用程序中的恶意资源注入(inject)。为简单起见，您为所有图像、脚本、样式等提供允许域来源的白名单。

与此同时，营销团队正在使用 Google Tag Manager (GTM)管理标签。原理是从页面收集信息，将它们发送到 GTM 并将这些数据用作变量来生成标签，这是模板化 JS/HTML 和这些变量的混合。

问题是这些标签中的大多数都包含 javascript，用于将非常具体的数据发送到跟踪器、广告服务器或任何合作伙伴。假设我的营销团队了解安全风险并且不会包含恶意脚本。

有没有办法知道 GTM 导入了哪些域，以便将它们自动添加到我的 CSP 上？

Answer 1

这是个大问题，令我惊讶的是关于这方面的信息如此之少。当心任何建议在您的 CSP 中设置 unsafe-inline 的解决方案，因为这会使策略变得非常脆弱，几乎毫无用处。

要回答您的直接问题，无法知道 GTM 以编程方式使用了哪些域。我建议将 CSP 设置为仅报告模式，并使用错误作为创建白名单的指南。

要回答如何使它们共存的更广泛问题，主要解决方案是使用 nonce 值和 Google 此处所述的可感知 nonce 的 GTM 脚本 https://developers.google.com/tag-manager/web/csp .

简而言之:

1. 生成随机数 - 这需要在每次页面加载时完成才能有效
2. 在您的 CSP 中将 nonce 列入白名单
3. 将其应用于任何包含 GTM 的内联脚本
4. 将 GTM 加载的资源使用的任何主机列入白名单

但是，这个解决方案是不完整的，因为 GTM 似乎没有将 nonce 传播到任何自定义 HTML 标记。为此，您必须:

1. 向 GTM 脚本标签的 nonce 感知版本添加一个 id，例如“gtm_script”——这将用于定位元素并捕获 nonce
2. 添加一个数据属性来存储 nonce 值，例如data-nonce="[你的 nonce 值在这里]"
3. 在 GTM 中，创建一个新变量来捕获随机数。使用 DOM 元素类型，并选择 GTM 片段的 ID(本指南中的 gtm_script)，然后从数据属性中获取随机数值
4. 在 GTM 中，将 nonce 值添加到任何自定义 HTML 脚本
5. 在 GTM 中，使用复选框启用 Support document.write

有关更详尽的指南，包括 GTM 的屏幕截图，请参阅这篇文章 https://rbultitudezone.medium.com/tag-manager-services-and-website-security-using-gtm-with-csp-5749a610c600