谷歌分析.js和内容安全政策

Google analytics.js and Content Security Policy

本文关键字：安全 js 谷歌      更新时间：2023-09-26

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

但是，我们在页面上有新的谷歌分析.js片段，该片段被CSP阻止。

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

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

不幸的是，谷歌文档没有提到CSP。

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

我的 html 文件的底部：

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

分析内容.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 代码的异步性质，或造成其他一些意想不到的后果。

有人可以通过内容安全政策建议允许谷歌分析的正确方法.js吗？

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

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

：

HTML文件底部：

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

分析内容.js：

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

光热：

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

这是未经测试的 - 我没有检查谷歌分析是否正在接收数据，但没有控制台或CSP错误。祈祷。

您的 Web 应用程序似乎设置了 CSP 标头， 谷歌分析域名尚未列入白名单。客户端向外部域发出的所有请求都应明确列入白名单。（这是一个很好的参考：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>

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

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

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

备用异步跟踪代码段

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

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

<!-- 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 -->

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

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

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

相关文章：