title: Google analytics.js and Content Security Policy
body: <p>I have a web app using the default html5boilerplate Content Security Policy.</p>
  
  <p>However, we have the new Google analytics.js snippet on the page, which is being blocked by the CSP.</p>
  
  <p>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. </p>
  
  <p>The closest SO post is <a href="https://stackoverflow.com/questions/14592598/google-analytics-and-content-security-policy-header">Google Analytics and Content-Security-Policy header</a>, but this is using the older ga.js.</p>
  
  <p>Unfortunately the <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced" rel="noreferrer">Google Docs</a> don't mention CSP.</p>
  
  <p>I've reached the following solution though:</p>
  
  <p>Bottom of my html file:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/js/analytics.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Content of analytics.js:</p>
  
  <pre><code>(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');
  </code></pre>
  
  <p>.htaccess CSP:</p>
  
  <pre><code>Header set Content-Security-Policy "script-src 'self' https://ssl.google-analytics.com http://www.google-analytics.com; object-src 'self'"
  </code></pre>
  
  <p>This works - but I'm unsure if I will have broken the asyncronous nature of the GA code, or caused some other unintended consequence.</p>
  
  <p>Can someone advise the correct way to allow Google analytics.js through a Content Security Policy?</p>
  
  <p><strong>Author Edit:</strong>
  In the end I used the solution detailed in <a href="https://stackoverflow.com/questions/14592598/google-analytics-and-content-security-policy-header">Google Analytics and Content-Security-Policy header</a>, reverting back to ga.js. But I'd still like to know if it's possible to use analytics.js in the same way.</p>
  
  <p><strong>Author Edit 2:</strong>
  Looks like it may be possible using analytics.js direct from Google and the same principles as the other SO post:</p>
  
  <p>Bottom of HTML file:</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://ssl.google-analytics.com/analytics.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/analytics.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Contents of analytics.js:</p>
  
  <pre><code>ga('create', 'UA-XXXX-Y', 'auto');
  ga('send', 'pageview');
  </code></pre>
  
  <p>CSP:</p>
  
  <pre><code>Header set Content-Security-Policy "script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com; object-src 'self'"
  </code></pre>
  
  <p>This is untested - I've not checked if Google analytics is receiving data, but there are no console or CSP errors. Fingers crossed.</p>