javascript - Google analytics.js and Content Security Policy -

i have web app using default html5boilerplate content security policy.

however, have new google analytics.js snippet on page, being blocked csp.

i've been trying find example of csp , js include structure allow google analytics.js, haven't had luck.

the closest post google analytics , content-security-policy header, using older ga.js.

unfortunately google docs don't mention csp.

i've reached following solution though:

bottom of 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 - i'm unsure if have broken asyncronous nature of ga code, or caused other unintended consequence.

can advise correct way allow google analytics.js through content security policy?

author edit: in end used solution detailed in google analytics , content-security-policy header, reverting ga.js. i'd still know if it's possible use analytics.js in same way.

author edit 2: looks may possible using analytics.js direct google , same principles other 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 untested - i've not checked if google analytics receiving data, there no console or csp errors. fingers crossed.

using alternate way described on https://developers.google.com/analytics/devguides/collection/analyticsjs/ helped. op described in second edit, can either use custom inline script apply nonce on or outsource inline script content seperate script, op suggested. don't forget async attribute on script tag references analytics.js.

using method, there no errors/warnings no scripts injected html.

here relevant part link posted:

alternative async tracking snippet

while javascript tracking snippet described above ensures script loaded , executed asynchronously on browsers, has disadvantage of not allowing modern browsers preload script.

the alternative async tracking snippet below adds support preloading, provide small performance boost on modern browsers, can degrade synchronous loading , execution on ie 9 , older mobile browsers not recognize async script attribute. use tracking snippet if visitors use modern browsers access site.

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