Google analytics.js 和内容安全政策答案

【问题标题】：Google analytics.js and Content Security PolicyGoogle analytics.js 和内容安全政策
【发布时间】：2015-09-05 12:50:34
【问题描述】：

我有一个使用默认 html5boilerplate 内容安全策略的 Web 应用程序。

但是，我们在页面上有新的 Google analytics.js sn-p，它被 CSP 阻止了。

我一直试图找到一个 CSP 和 JS 包含结构的示例，该结构将允许 Google analytics.js，但没有任何运气。

最近的 SO 帖子是 Google Analytics and Content-Security-Policy header，但这是使用较旧的 ga.js。

很遗憾，Google Docs 没有提到 CSP。

我已经达到了以下解决方案：

我的 html 文件的底部：

<script type="text/javascript" src="/js/analytics.js"></script>

analytics.js 的内容：

(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-XXXXXXXX-1', 'auto');
ga('send', 'pageview');

.htaccess CSP：

Header set Content-Security-Policy "script-src 'self' https://ssl.google-analytics.com http://www.google-analytics.com; object-src 'self'"

这行得通 - 但我不确定我是否会破坏 GA 代码的异步性质，或导致其他一些意想不到的后果。

有人可以建议通过内容安全策略允许 Google analytics.js 的正确方法吗？

作者编辑： 最后我使用了Google Analytics and Content-Security-Policy header 中详述的解决方案，恢复到 ga.js。但我仍然想知道是否可以以同样的方式使用 analytics.js。

作者编辑 2： 看起来可以直接使用来自 Google 的 analytics.js 以及与其他 SO 帖子相同的原则：

HTML 文件底部：

<script type="text/javascript" src="https://ssl.google-analytics.com/analytics.js"></script>
<script type="text/javascript" src="/js/analytics.js"></script>

analytics.js 的内容：

ga('create', 'UA-XXXX-Y', 'auto');
ga('send', 'pageview');

CSP：

Header set Content-Security-Policy "script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com; object-src 'self'"

这是未经测试的 - 我没有检查 Google 分析是否正在接收数据，但没有控制台或 CSP 错误。手指交叉。

【问题讨论】：

虽然我不能，从我的头顶，可以评论 CSP 我很确定在 HTML 文件的底部加载 GA 引导代码将使异步加载毫无意义因为它只在 DOM 加载后才开始。
我遇到了同样的问题，希望您能确认此解决方案仍然有效，或者发布您最终使用的解决方案？
还有必要接受ssl.google-analytics.com吗？ Analytics.js 似乎只使用 www 子域。对这种设置使用替代的 async sn-p 会更好，并为两个标签添加“async”属性。 developers.google.com/analytics/devguides/collection/…

标签： javascript google-analytics content-security-policy

【解决方案1】：

您的 .htaccess 解决方案应该是正确的。

为什么要阻止它的（客户端）异步性质？

在浏览器控制台中，您将看到对哪些主机的哪些请求被阻止，如果在浏览页面时有任何来自 gugl 的阻止请求，您可以将主机名添加到您的策略设置中

【讨论】：

【解决方案2】：

使用https://developers.google.com/analytics/devguides/collection/analyticsjs/ 中描述的替代方式会有所帮助。它与第二次编辑中描述的 OP 非常相似，您可以使用自定义内联脚本来应用随机数，也可以将内联脚本内容外包到单独的脚本中，如 OP 建议的那样。不要忘记引用 analytics.js 的脚本标签上的 async 属性。

使用此方法，不会出现错误/警告，因为没有脚本被注入到您的 html 中。

这是我发布的链接中的相关部分：

替代异步跟踪 sn-p

虽然上面描述的 JavaScript 跟踪 sn-p 确保脚本将在所有浏览器上异步加载和执行，它缺点是不允许现代浏览器预加载脚本。

下面的替代异步跟踪 sn-p 添加了对预加载，这将在现代上提供小的性能提升浏览器，但可以降级为 IE 9 上的同步加载和执行以及无法识别异步脚本的旧版移动浏览器属性。仅当您的访问者主要使用此跟踪 sn-p 使用现代浏览器访问您的网站。

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

【讨论】：

【解决方案3】：

您的网络应用上似乎设置了 CSP 标头， Google Analytics 域尚未列入白名单。客户端向外部域发出的所有请求都应明确列入白名单。（这是一个很好的参考：https://hacks.mozilla.org/2016/02/implementing-content-security-policy/）。

您在浏览器控制台上看到的 CSP 错误非常详细地描述了您的 CSP 标头中必须列入白名单的内容。

例如，对于这种情况，

拒绝加载图像“https://www.google.co.in/...”，因为它违反以下内容安全策略指令：“img-src ”。

这将解决错误：

img-src https://www.google.co.in <other-domains>

【讨论】：