Blog

The exact CSP changes for an sGTM custom domain

Three directives need updates. Skipping any one of them silently breaks tagging on browsers that enforce CSP strictly.

Content Security Policy (CSP) headers tell the browser which hostnames it is allowed to load resources from. When you switch to a custom tagging domain, you have to update CSP to allow that domain. Three directives matter; missing any one is a silent failure on browsers that enforce CSP strictly.

script-src

Controls which hostnames can serve JavaScript. Your custom tagging domain serves gtm.js from this hostname, so it must be allowed.

script-src 'self' https://data.example.com;

If your existing policy includes https://www.googletagmanager.com, you can leave that in or remove it depending on whether you still load any scripts from there.

connect-src

Controls which hostnames can be the destination of fetch and XHR requests. Every event your client GTM sends to your tagging server is a fetch request, so the hostname must be allowed.

connect-src 'self' https://data.example.com;

img-src

Controls which hostnames can serve images. Some legacy GTM tags fire pixel-based requests as image loads rather than fetches, and these need img-src to permit the destination.

img-src 'self' data: https://data.example.com;

The combined directive

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://data.example.com;
  connect-src 'self' https://data.example.com;
  img-src 'self' data: https://data.example.com;
  style-src 'self' 'unsafe-inline';

Test in report-only mode first

Before enforcing the new CSP, deploy it as Content-Security-Policy-Report-Only with a report-uri pointing to your logging endpoint. Browsers will report violations without blocking. Watch for a few days. When you see no relevant violations, switch to the enforced header.

If CSP is set in HTML rather than HTTP

Some sites set CSP via a meta tag in HTML rather than an HTTP header. Both work, but the HTML version is set later in the page lifecycle and may not catch some early loads. Prefer the HTTP header. If you must use the meta tag, place it as the first child of the head element.

CSP issues are the second most common cause of "the loader does not load" after CORS issues. If your CORS check passes and the loader still fails, check CSP next.