Question

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

但是，我们在页面上有新的Google analytics.js代码段，该代码段已被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错误。手指交叉。

Answer 1

您似乎在自己的网络应用上设置了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>

Answer 2

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

使用此方法，不会出现任何错误/警告，因为没有脚本注入您的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 -->

Answer 3

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

为什么要制动它（clientide）的异步性质呢？

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

Google analytics.js和内容安全政策

3 个答案: