Google Analytics.js 和内容安全政策 [英] Google analytics.js and Content Security Policy

问题描述

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

但是，我们在页面上有新的 Google Analytics.js 代码段，该代码段已被 CSP 阻止.

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

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

不幸的是，Google 文档没有提到 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('创建', 'UA-XXXXXXXX-1', '自动');ga('发送', '浏览量');

.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 和 Content-Security-Policy 标头中详述的解决方案，恢复到 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('发送', '浏览量');

通信服务提供商:

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

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

解决方案

您似乎在您的 Web 应用程序上设置了 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>

I have a web app using the default html5boilerplate Content Security Policy.

However, we have the new Google analytics.js snippet on the page, which is being blocked by the CSP.

I've been trying to find an example of a CSP and JS include structure that will allow Google analytics.js, but haven't had any luck.

The closest SO post is Google Analytics and Content-Security-Policy header, but this is using the older ga.js.

Unfortunately the Google Docs don't mention CSP.

I've reached the following solution though:

Bottom of my html file:

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

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

This works - but I'm unsure if I will have broken the asyncronous nature of the GA code, or caused some other unintended consequence.

Can someone advise the correct way to allow Google analytics.js through a Content Security Policy?

Author Edit: In the end I used the solution detailed in Google Analytics and Content-Security-Policy header, reverting back to ga.js. But I'd still like to know if it's possible to use analytics.js in the same way.

Author Edit 2: Looks like it may be possible using analytics.js direct from Google and the same principles as the other SO post:

Bottom of HTML file:

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

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

This is untested - I've not checked if Google analytics is receiving data, but there are no console or CSP errors. Fingers crossed.

解决方案

You seem to have CSP headers setup on your web app, where Google Analytics domains are not white-listed yet. All the requests that the client makes to external domains should be explicitly white-listed. (This is a good reference: https://hacks.mozilla.org/2016/02/implementing-content-security-policy/).

The CSP errors you see on the browser console are quite descriptive about what has to be white-listed in your CSP header.

For example, for this case,

Refused to load the image 'https://www.google.co.in/...' because it violates the following Content Security Policy directive: "img-src ".

this would solve the error:

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

这篇关于Google Analytics.js 和内容安全政策的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！