4

I have a simple localhost website to test out Google Analytics, but every time I go to the site and look at the log, I see the JavaScript code is being blocked by CSP.

Here's the script:

<script type="text/javascript">

    (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', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-12345678-1', 'auto', { 'siteSpeedSampleRate': 100 });
    ga('send', 'pageview');

    ga('create', 'UA-87654321-1', 'auto', 'clientTracker', { 'siteSpeedSampleRate': 100 });
    ga('clientTracker.send', 'pageview');

</script>

And here's the CSP content:

  <httpProtocol>
      <customHeaders>
        <add name="Content-Security-Policy" value="default-src 'self'; script-src 'self' https://www.google-analytics.com https://ssl.google-analytics.com; style-src 'self' 'unsafe-inline'; img-src 'self' http://www.google-analytics.com https://ssl.google-analytics.com; object-src 'none'; media-src 'none'; frame-src 'none' "/>
      </customHeaders>
  </httpProtocol>

Finally here's the screen shot of the errors: enter image description here

note: I did come across with a few posts (here and here), while I found some similarities in them, I don't find the solution worked for me (or maybe I did something wrong, if so, please point out).

Community
  • 1
  • 1
Kyle
  • 406
  • 7
  • 20

2 Answers2

0

Change the https://www.google…/etc to //www.google… I believe your issue is your localhost is insecure and causing the issue.

removing the protocol (starting with //) allows your browser to determine which protocol (http|https) itself based on the requesting site.

S.Kiers
  • 4,086
  • 3
  • 32
  • 38
  • I updated the JavaScript but still no luck. Although I am pretty sure, but might be I put CSP header in the wrong place inside web.config? I currently put it under System.webServer, right place? – Kyle Apr 12 '16 at 22:05
  • Is the error message the same after the update? I am not sure about the System.webServer being the right or wrong place, I was hypothesising based on the error messages you received. – S.Kiers Apr 13 '16 at 18:48
  • Yes, same exact error. The URL in the script now is changed to '//www.google-analytics.com/analytics.js'. – Kyle Apr 14 '16 at 15:37
  • So taking out the "http://" part, instead of taking it out from the script, I took it out from the CSP content and it worked on Chrome (49). Still no luck on FireFox 45.0.1 though. – Kyle Apr 14 '16 at 17:49
  • Here's the updated CSP content: – Kyle Apr 14 '16 at 17:56
-5

Finally got it working. CSP content:

<add name="Content-Security-Policy" value="default-src 'self'; script-src 'self' 'unsafe-inline' www.google-analytics.com; style-src 'self' 'unsafe-inline'; img-src * data:; object-src 'none'; media-src 'none'; frame-src 'none' "/>
Kyle
  • 406
  • 7
  • 20
  • Hey - I'm having the same issue... CSP is blocking GA from getting http info... can you confirm this solution still works? and you have your CSP policy in your htaccess? – Brock Vond Jun 19 '16 at 01:06
  • @BrockVond, yeah. still works. I am using ASP.net instead of Apache so I have the policy in web.config file. Confirmed it by checking on Firebug and the real-time tab under google analytics. – Kyle Jun 21 '16 at 14:58
  • 16
    by having "unsafe-inline" in your policy, you are defeating the purpose of CSP – Corey Jul 11 '17 at 17:20
  • @Corey, true. I did remove it locally shortly after this was posted. – Kyle Jul 12 '17 at 17:48
  • @Kyle - I moved by GA code into it's own .js file and just linked to it in my section. It seems to be working fine that way. – Corey Jul 13 '17 at 18:35