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 / javascriptsrc =/ js / analytics.js>< / script> 
  

analytics.js的内容：

 （功能（I，S，O，G，R，A，M）{I [ 'GoogleAnalyticsObject'] = R; I [R] = I [R] ||（）的函数
 {（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）
} ）（窗口，文件， '脚本'， '// www.google-analytics.com/analytics.js','ga'）; 
 ga（'create'，'UA-XXXXXXXX-1'，'auto'）; 
 ga（'send'，'pageview'）; 
  

.htaccess CSP：

  Header set Content-Security-Policyscript-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。

b看起来好像有可能直接使用来自Google的analytics.js以及与其他SO帖子相同的原则：

HTML文件底部：

 < script type =text / javascriptsrc =https://ssl.google-analytics.com/analytics.js><<<< ; /脚本> 
< script type =text / javascriptsrc =/ js / analytics.js>< / script> 
  

analytics.js的内容：

  ga（'create'，'UA-XXXX-Y'，'auto'）; 
 ga（'send'，'pageview'）; 
  

CSP：

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

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

解决方案

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

您在浏览器控制台上看到的CSP错误相当例如，对于这种情况，

>

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

这可以解决错误：

  img-src https://www.google.co.in <其他结构域> 
  

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屋！