Embedding external JavaScript into the application

Owned by Felix Bauer
Last updated: Oct 12, 2023 by Kyna Finch
2 min read

To connect certain 3rd party tools, a custom JavaScript must be executed in the browsers of the visitors of the 3YOURMIND application.

Examples are:

  • Google Analytics or other tracking tools

  • A cookie banner

  • A support widget

  • A chatbot

Steps

Two steps are necessary to embed an external JavaScript into the application:

  1. Add external domains to the CSP Header

  2. Add the script to the admin panel

Add external domains to the CSP Header

3YOURMIND has a Content Security Policy in place that protects against certain forms of cybersecurity attacks. Its default settings disallow loading content from any domain that is not part of the policy.

If you skip this step then you will see the following error in the browser's JavaScript console:

Refused to load the script '[domain]' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' google.com *.amazonaws.com *.gstatic.com *.stripe.com *.stripe.network pagecdn.io". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

To add a domain to the list of allowed domains, you must add the following content to the values.yaml configuration file. For SaaS installations this can only be done by our Technical Support Team:

serviceConfig: revproxy: extraCspSources: "[List of domains, seperated by whitespace]"

Google Analytics

Due to different versions of Google Analytics (+ combinations with the Tag Manager), it is complicated to add the right domains - expect some trial & error.

Review this resource:

https://developers.google.com/tag-platform/tag-manager/web/csp

Here is a working example of a Google Tag Manager setting:

extraCspSources: "'unsafe-inline' https://www.googletagmanager.com"

If Google Analytics 4 is used, use the following domains”

Add the script to the admin panel

  • Go to the admin panel (by adding /admin to the domain).

  • There, go to: Organizations > Your Organization

  • Add the script wrapped in a <script> tag into the Extra Script box

  • Click on Save

Example: