The Invoca Tag is not loaded because it violates Content Security Policy (CSP) (EU)

[Jacaselon]

Symptoms

The tag is deployed via Google Tag Manager but it's not loaded on the website. There is an error message in Console of Chrome Dev tool saying 'refused to load the script 'https://solutions.eu.invocacdn.com/js/invoca-latest.min.js.

Resolution

To test whether the issue can be resolved by disabling the Content Security Policy, you can use a Chrome extension called "Disable Content Security Policy." You can install and enable it by following these steps:

1. Visit the Chrome Web Store by clicking on the following link: https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden
   
   
2.  Install the extension.
   
   
3. Enable the extension:
   
   After installing the extension, click on its icon in the Chrome toolbar to enable it.

Once the extension is enabled, visit the website again to verify if the tag is successfully loaded without the Content Security Policy restrictions.

If the tag is successfully loaded, it indicates that the issue may be related to the Content Security Policy. In that case, you can proceed to whitelist the Invoca script source in the CSP.

Sources to allow are:

• solutions.eu.invocacdn.com (Invoca Tag script)
• pnapi.eu.invoca.net (For number swap request)

The files located in different paths but under the same domain will be subject to the same CSP restrictions.

Customers have two options to modify the CSP:

1. Update the CSP header in the server configuration: Customers can modify the server configuration to include the script source in the Content-Security-Policy header.
   
   
2. Update the <meta> tag in HTML to include the script source. For example:
   <meta http-equiv="Content-Security-Policy" content="script-src 'self' solutions.eu.invocacdn.com pnapi.eu.invoca.net">.

This ensures that the script from the specified source ('self' or solutions.eu.invocacdn.com pnapi.eu.invoca.net ) is allowed.

Cause

The Content Security Policy is used to protect web applications from various types of attack such as cross-site scripting or data injection. CSP allows web developers to define policies that specify which resources can be loaded and executed. This can help websites prevent unauthorized code from running on the page.