Google analytics.js and Content Security Policy

Question

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

Answer 1

Using the alternate way described on https://developers.google.com/analytics/devguides/collection/analyticsjs/ helped. It is much like OP described in the second edit, you can either use a custom inline script that you apply a nonce on or outsource the inline script content into a seperate script, like OP suggested. Don't forget the async attribute on the script tag that references analytics.js.

Using this method, there will be no errors/warnings as no scripts are injected to your html.

Here is the relevant part from the link I posted:

Alternative async tracking snippet

While the JavaScript tracking snippet described above ensures the script will be loaded and executed asynchronously on all browsers, it has the disadvantage of not allowing modern browsers to preload the script.

The alternative async tracking snippet below adds support for preloading, which will provide a small performance boost on modern browsers, but can degrade to synchronous loading and execution on IE 9 and older mobile browsers that do not recognize the async script attribute. Only use this tracking snippet if your visitors primarily use modern browsers to access your site.