Content Security Policy

Allow the tracking script when your site sends a Content-Security-Policy header.

A Content Security Policy (CSP) is a header that tells the browser which scripts a page can load and where it can send data. If your website has one, it must allow Dodolytics. If it does not, the browser blocks the script and no visits are recorded.

Find out if a CSP blocks the script

  1. Open your website in a browser.
  2. Open the developer tools (F12, or right-click and Inspect) and click the Console tab.
  3. Reload the page. Look for an error that names "Content Security Policy" and dodolytics.com, for example "Refused to load the script" or "Refused to connect".

No error of this kind means that your policy is not the problem. See No data shows for other causes.

The change

The script needs two rules. script-src lets the page load the script. connect-src lets the script send the visit. Add https://dodolytics.com to both, and keep the sources that your policy has now:

script-src  'self' https://dodolytics.com;
connect-src 'self' https://dodolytics.com;
  • If your policy has no script-src or no connect-src, the browser uses default-src for it. Add the two rules, or add the address to default-src.
  • The script loads nothing else: no images, styles, or frames. You do not need other rules.

Where the policy is set

Change the policy in the place where your site sets it now. Common places:

  • nginx: an add_header Content-Security-Policy "..."; line in the server configuration.
  • Apache: a Header set Content-Security-Policy "..." line in the configuration or in .htaccess.
  • A meta tag: <meta http-equiv="Content-Security-Policy" content="..."> in the <head> of your pages.
  • Your app or framework: for example the headers() of next.config.js, or a middleware.
  • Your host or CDN: some hosts and security plugins add a policy in their settings.

Policies with a nonce or 'strict-dynamic'

If your script-src has 'strict-dynamic', the browser ignores the addresses in it. Then the script tag needs the same nonce as your other scripts:

<script defer nonce="YOUR_PAGE_NONCE" src="https://dodolytics.com/tracker.js" data-website-id="site_xxxxxxxxxxxxxxxx"></script>

Your server makes a new nonce for each page. Use the value that your site puts in its other script tags. A script that a trusted script adds is also allowed, so the Google Tag Manager way works when Tag Manager itself is trusted. connect-src still needs the address.

Check the change

  1. Reload your website with the developer tools open.
  2. The Console shows no "Content Security Policy" error for dodolytics.com.
  3. On the Network tab, a request to collect has the status 204.
  4. Open Real-time in Dodolytics. Your visit shows there.

Related articles

Still need help? Ask on our feedback board or see all topics.