Using the Invoca Tag With a Content Security Policy (CSP)

[Jacaselon]

Contents of this Article

• General Overview
• CSP Directives
• Invoca Sources
• Implementation Methods

General Overview

To make sure the Invoca Tag can run properly without being blocked by a Content Security Policy (CSP), you need to modify the CSP configurations for your website. This involves adjusting the ‘Content-Security-Policy’ HTTP header for your web server, or the ‘<meta>’ tag in your webpage’s HTML.  The modification needs to include the location with the JS Library and JS Tag, and the Invoca endpoint that the Tag needs to connect to for collecting attribution and swapping phone numbers.

CSP Directives

The CSP uses directives to define what sources of content are allowed. The directives we are concerned with are:

• connect-src: allowed sources for API requests (e.g., XMLHttpRequest, WebSocket, and EventSource).
  
• script-src: allowed sources forJavaScript.

Each directive can have multiple sources, separated by white spaces. For example:

None
connect-src mysource.example.com mysource2.example.com mysource3.example.com ...;

Invoca Sources

For the US:

• solutions.invocacdn.com
  • Add it to ‘connect-src’
    
    
• pnapi.invoca.net
• Add it to both ‘connect-src’ and ‘script-src’

For the EU:

• solutions.eu.invocacdn.com
• Add it to ‘connect-src’
  
  
• pnapi.eu.invoca.net
• Add it to both ‘connect-src’ and ‘script-src’

Examples

For US networks:

None
Content-Security-Policy: script-src 'self' solutions.invocacdn.com pnapi.invoca.net; connect-src 'self' pnapi.invoca.net;

• 'self': Allows connections to your own domain.
• ‘solutions.invocacdn.com’: Allows loading of Invoca JS and Tag scripts.
• ‘pnapi.invoca.net’: Allows connections to Invoca domain for number swapping.

For EU networks:

None
Content-Security-Policy: script-src 'self' solutions.eu.invocacdn.com pnapi.eu.invoca.net; connect-src 'self' pnapi.eu.invoca.net;

Implementation Methods

HTTP Header

The most common way to implement CSP is by setting the `Content-Security-Policy` HTTP header on your web server:

HTML Meta Tag

You can also use a `<meta>` tag in your HTML:

connect-src

None
<meta http-equiv="Content-Security-Policy" content="script-src 'self' solutions.invocacdn.com pnapi.invoca.net; connect-src 'self' pnapi.invoca.net;">