Skip to content
Docs
Getting started

Content Security Policy

The one extra step the tag needs on a site that sends a Content-Security-Policy header.

On this page 3

A Content Security Policy is a header your site can send that tells the browser which scripts and styles it may run. Most sites do not send one. If yours does, the tag will not work until you add a nonce to it.

A nonce is a short random string your server puts on a script tag and in the header, and changes on every page load. Anything written straight into the page, rather than loaded from a file, is refused unless it carries one.

Three things we use are written straight into the page: the tag you pasted, and any custom CSS or JavaScript you add to a variation. The white cover that hides the page for a moment needs nothing, because a browser does not apply the policy to it.

How to set one up

  1. Check whether your site sends a policy. Open any page, look in your browser's network tab at the first request, and search its response headers for content-security-policy. If it is not there, stop: there is nothing to do.
  2. Put your nonce on the tag you pasted:
html
<script nonce="{{ $nonce }}">
    ...the tag you copied...
</script>
  1. Allow our file to load, and our requests to be sent, in the policy itself:
code
script-src  'nonce-{{ $nonce }}' https://sdk.example.com;
style-src   'nonce-{{ $nonce }}';
connect-src https://sdk.example.com;

Replace https://sdk.example.com with the address the tag loads its script from. You can read it in the tag you copied.

That is all. We read the nonce off the tag and put it on everything we create after that, so you do not have to list anything else.

Good to know

  • Use a nonce, not a hash. A hash has to be worked out in advance from the exact text being allowed, and your custom CSS and JavaScript are whatever you typed into the editor this morning.
  • style-src is only needed for custom CSS on a variation. Without it, the rest of the tag still works.
  • The nonce has to be a new one on every page load, set by your server. A fixed value written into your template protects nothing.