Resolving Google Analytics 4 Content Security Policy Issues

When dealing with web security, we often encounter a variety of complex issues. One such challenge that developers commonly face is configuring the Content Security Policy (CSP) correctly, particularly when integrating with services like Google Tag Manager (GTM).

The Problem

The problem arises when the browser refuses to load certain resources, such as scripts or images, due to a violation of the CSP directives. This can occur when you’re using GTM, as it requires specific permissions in the CSP to function correctly.

For instance, the following error message might appear in your console:

gtm.js:9 Refused to load the script 'https://www.googletagmanager.com/gtm.js?id=GTM-WXFN77V&l=ceDataLayer' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

The Solution

To solve this problem, you need to modify the Content Security Policy in your application to allow the resources required by GTM. The following code shows the necessary modifications to the CSP:

<meta http-equiv="Content-Security-Policy" content="
      default-src 'self' https://www.google-analytics.com;
     script-src 'self' 'unsafe-eval' 'unsafe-inline'  https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/;
     style-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://www.google-analytics.com https://tagmanager.google.com/ https://www.googletagmanager.com/ https://fonts.googleapis.com/;
     img-src 'self' 'unsafe-inline' https://www.google-analytics.com https://ssl.gstatic.com/ data:;
     font-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://fonts.gstatic.com/ data:;
" />

Add it to the `head` of you index.html file.

If you don’t have access to the index file, you can do it with htaccess file in apache:

<IfModule mod_headers.c>
  Header set Content-Security-Policy "default-src 'self' https://www.google-analytics.com;
  script-src 'unsafe-eval' 'unsafe-inline' 'self' https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/;
  style-src 'unsafe-inline' 'self' https://pro.fontawesome.com/ https://www.google-analytics.com https://tagmanager.google.com/ https://www.googletagmanager.com/ https://fonts.googleapis.com/ ;
  img-src 'unsafe-inline' 'self' https://www.google-analytics.com https://ssl.gstatic.com/ data:;
  font-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://fonts.gstatic.com/ data:;"
</IfModule>

Here, 'self' allows resources from the current domain, while 'unsafe-inline' and 'unsafe-eval' permit inline scripts and styles. The domains listed after these keywords are additional sources from which resources can be loaded.

Conclusion

Working with CSP can be tricky, but understanding how to configure it correctly can solve many web security issues. With the right modifications, you can ensure your application works seamlessly with services like Google Tag Manager, improving both functionality and security.

Remember, web security is an ongoing process, and staying updated with the latest practices is key to maintaining a secure web environment.

If you liked this short tutorial, consider following me on other platform. I post about Tech, AI, entrepreneurship and marketing:

Twitter: https://twitter.com/hhezi
Blog: https://successhowto.com