Javascript Google analytics.js和内容安全策略

我有一个使用默认HTML5样板文件内容安全策略的web应用程序

然而，我们在页面上有一个新的Google analytics.js代码段，该代码段被CSP阻止

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

最接近的SO post是，但它使用的是较旧的ga.js

不幸的是，我们没有提到CSP

不过，我得出了以下解决方案：

我的html文件的底部：

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

.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的正确方法吗

作者编辑： 最后，我使用了中详述的解决方案，返回到ga.js。但我仍然想知道是否有可能以同样的方式使用analytics.js

作者编辑2: 看起来可以直接使用谷歌的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>

顾客服务提供商：

---

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

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

为什么要停止它的（客户端）异步特性

---

在浏览器控制台中，您将看到哪些主机的请求被阻止，如果在浏览页面时gugl有任何被阻止的请求，您可以使用帮助中描述的替代方法将主机名添加到策略设置中。这很像第二次编辑中描述的OP，您可以使用自定义的内联脚本，对其应用nonce，也可以将内联脚本内容外包到单独的脚本中，如OP建议的那样。不要忘记引用analytics.js的脚本标记上的async属性

使用此方法，不会出现错误/警告，因为不会向html中注入任何脚本

以下是我发布的链接的相关部分：

替代异步跟踪代码段

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

下面的可选异步跟踪代码段添加了对 预加载，这将在现代系统上提供一个小的性能提升 浏览器，但可以降级为在IE9上同步加载和执行 以及不识别异步脚本的旧移动浏览器 属性仅当访问者主要是 使用现代浏览器访问您的站点

window.ga=window.ga | |函数（）{（ga.q=ga.q | |[]）.push（参数）}；ga.l=+新日期；
ga（“创建”、“UA-XXXXX-Y”、“自动”）；
ga（‘发送’、‘页面浏览’）；

您的web应用程序上似乎设置了CSP标题， 谷歌分析领域尚未列入白名单。客户机向外部域发出的所有请求都应明确列在白名单中。 （这是一个很好的参考：）

您在浏览器控制台上看到的CSP错误对于CSP标题中必须白列的内容非常具有描述性

比如说这个案子,

拒绝加载图像“…”，因为它 违反以下内容安全策略指令：“img src “

这将解决错误：

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

imgsrchttps://www.google.co.in  

虽然我不能，但从我的头顶，可以在CSP上发表评论我很确定在HTML文件的底部加载GA引导代码会使异步加载变得毫无意义，因为它只有在加载DOM之后才会启动。我也有同样的问题，希望你能确认这个解决方案仍然有效，或者发布你最终使用的解决方案。有没有还有什么需要接受的吗？Analytics.js似乎只使用www子域。在这种设置中使用可选的异步代码段会更好，并将“async”属性添加到两个标记中。

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'"

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

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