javascript - 如何在遵守不允许内联脚本的 CSP 的同时动态设置 Google Universal Analytics 的跟踪代码？

Question

我有一个网站解决方案，可以部署到多个不同的 URL，每个 URL 都针对不同的客户进行标记。部署过程在 web.config、数据库等中设置各种特定于客户端的配置数据。相同的网站代码用于所有客户端，但不同的配置数据意味着站点的外观和行为对于每个客户端都不同。

我想为每个客户设置的其中一件事是 Google Universal Analytics 跟踪代码。这是出现在添加到每个页面的脚本 block 中的代码(下例中的“UA-12345678-1”):

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-12345678-1', 'auto');
  ga('send', 'pageview');

</script> 

我在 ViewBag 中有跟踪代码，所以如果我准备将此脚本 block 直接放在我的 HTML 页面(或我的主布局)中，那么插入跟踪代码将非常容易:

ga('create', '@ViewBag.GoogleTrackingCode', 'auto');

但是，我正在使用 Content Security Policy (CSP) 功能来锁定网站，作为其中的一部分，我已经禁用了内联脚本:所有脚本都必须从 .js 文件加载。

所以，我创建了一个 JavaScript 文件，其中包含上面脚本 block 的修改版本，我从我的 HTML 页面中引用了它:

(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', ga_token, 'auto');
ga('send', 'pageview');

我的计划是在这段脚本运行之前设置 ga_token 变量的值。我想我应该将变量值存储在 HTML 中的某处(在 data-* 属性中):

<div id="ga-token-data" data-ga-token="@ViewBag.GoogleAnalyticsToken">

...并使用一些 JavaScript(当然是在 .js 文件中)获取该值:

$(document).ready(function () {
    ga_token = $("#ga-token-data").data("ga-token");
})

但是，由于执行顺序，这被证明是棘手的。根据谷歌的文档，脚本 block 应该放在 HTML 页面中结束 <\head> 标记之前，虽然有一些花哨的东西在发生，以便它在页面加载之前不会尝试实际做任何事情，但 ga('create', ... 调用跟踪代码实际上会立即执行。因此，ga_token 的值在使用前并未设置。

理论上，我可以将设置 ga_token 值的代码移动到 Google 脚本 block 的正上方，但这样做会在加载 DOM 之前执行该代码 - 在这种情况下，我可能无法获取我需要的值(value)。 (而且我当然不能使用 jQuery，因为我直到后来才加载 jQuery 库)。

还有其他方法吗？

Answer 1

在完全加载之前读取 DOM 是可以的，操作节点是有风险的。所以你的解决方案可能是这样的:

您生成的 HTML 页面

<form id="serverData">
    <input type="hidden" name="gaToken" value="@ViewBag.GoogleAnalyticsToken" />
</form>

您修改后的分析加载程序

<script>
var ga_token = document.getElementById("serverData").gaToken.value;
(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', ga_token, 'auto');
ga('send', 'pageview');
</script>