Updated content security policy to allow script and style from google analytics

src/supermarket/app/views/application/_analytics.html.erb

@@ -1,22 +1,20 @@
 <% if ENV['SEGMENT_WRITE_KEY'] %>
-  <script>
+  <%= javascript_tag nonce: content_security_policy_nonce do %>
     !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
     analytics.load("<%= ENV["SEGMENT_WRITE_KEY"] %>");
     analytics.page();
     }}();
-  </script>
+  <% end %>
 <% end %>
 
 <% if ENV['GOOGLE_ANALYTICS_ID'] %>
-  <script>
-    (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');
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=<%= ENV['GOOGLE_ANALYTICS_ID'] %>"></script>
+  <%= javascript_tag nonce: content_security_policy_nonce do %>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){window.dataLayer.push(arguments);}
+    gtag('js', new Date());
 
-    ga('create', '<%= ENV["GOOGLE_ANALYTICS_ID"] %>', 'auto');
-    ga('require', 'linkid', 'linkid.js');
-    ga('require', 'displayfeatures');
-    ga('send', 'pageview');
-  </script>
-<% end %>
+    gtag('config', '<%= ENV['GOOGLE_ANALYTICS_ID'] %>');
+  <% end %>
+<% end %>

src/supermarket/config/initializers/content_security_policy.rb

@@ -6,20 +6,26 @@
 
 Rails.application.config.content_security_policy do |policy|
   policy.default_src :self, :https
-  policy.font_src    :self, :https, :data
-  policy.img_src     :self, :https, :data
-  policy.object_src  :none
-  policy.script_src  :self, :https, "https://www.googletagmanager.com", "https://www.google-analytics.com"
-  policy.style_src   :self, :https, :unsafe_inline
+  policy.font_src :self, :https, :data
+  policy.img_src :self, :https, :data
+  policy.object_src :none
+  policy.script_src :self, :https, "https://www.googletagmanager.com", "https://www.google-analytics.com"
+  policy.script_src_elem :self, "http://www.google-analytics.com", "http://cdn.segment.com"
+  # Need to keep the unsafe_inline for style-src directive as
+  # there is an inline css embedded in the application.js file.
+  # Without unsafe_inline it will block the style tag.
+  # Style tags are not considered that much unsafe as externally injected script through xss attack.
+  policy.style_src :self, :unsafe_inline, :https, "http://fonts.googleapis.com"
 
   # Specify URI for violation reports
   # policy.report_uri "/csp-violation-report-endpoint"
 end
 
 # If you are using UJS then enable automatic nonce generation
-# Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }
+Rails.application.config.content_security_policy_nonce_generator = ->(request) { SecureRandom.base64(16) }
+Rails.application.config.content_security_policy_nonce_directives = %w{ script-src }
 
 # Report CSP violations to a specified URI
 # For further information see the following documentation:
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
-# Rails.application.config.content_security_policy_report_only = true
+# Rails.application.config.content_security_policy_report_only = true