Installing our Cookie Banner with a Content Security Policy (CSP)

If your site sends a Content Security Policy header that uses a nonce, add that same nonce to all three GetTerms tags in your install code. With the nonce in place, your policy permits the banner without you having to weaken it.

This only applies to sites that use a nonce-based CSP. You can tell by checking whether the header contains style-src 'nonce-…' or script-src 'nonce-…' . If your site sends no CSP, or its CSP does not use a nonce, install the standard GetTerms code unchanged and skip this guide. Editing CSP headers and template code is a developer task, so pass this guide to whoever maintains your site code if that is not you.

Is this guide for you?

You only need to follow this guide if you're using a CSP header that uses a nonce.

What is a Content Security Policy (CSP)?

A Content Security Policy is a browser security feature that controls which scripts and styles a page is allowed to run.

What is a nonce?

a nonce is a random, single-use value your server generates fresh for each page load.

Steps

Find the nonce value your server generates for the CSP header. It is the string that appears after nonce- in your style-src or script-src directive (the part of a CSP that lists the allowed sources for one type of content, such as scripts or styles).
Open your GetTerms install code. It contains three tags: one <link rel="preload"> tag (the tag that tells the browser to start downloading a file early) and two <script> tags.
Replace YOUR_NONCE in each of the three tags with that nonce, using the same mechanism that sets the nonce in your CSP header. In practice this means letting your server template insert the value as each page is built, rather than pasting a fixed string into static HTML. Every page load must carry the same nonce in the header and in all three tags, and that value must be new on each load. If the tags do not match the header, the browser blocks the banner.
Add the code where your site-wide tags belong, normally inside the page <head> (the part of a page that holds setup information the browser reads before showing anything to the visitor), so the banner loads on every page. Then publish.
Open a published page and confirm the banner appears. If it does not, check the browser developer console (a built-in panel that shows errors and messages for the current page) for a CSP message naming a GetTerms tag. That message usually means the nonce in the tag does not match the nonce in the header.

The address and ID in the code below belong to one GetTerms account. Use the install code from your own GetTerms account and add the nonce to that, rather than copying the IDs shown here.

<!-- GetTerms CMP --> <link rel="preload" nonce="YOUR_NONCE" href="https://staging.gettermscmp.com/cookie-consent/blocker/36de95b8-9f01-4db9-9f7f-9e6a9a475267/en-us?auto=true" as="script"> <script type="text/javascript" nonce="YOUR_NONCE" src="https://staging.gettermscmp.com/cookie-consent/blocker/36de95b8-9f01-4db9-9f7f-9e6a9a475267/en-us?auto=true"></script> <script async type="text/javascript" nonce="YOUR_NONCE" src="https://staging.gettermscmp.com/cookie-consent/widget/36de95b8-9f01-4db9-9f7f-9e6a9a475267/en-us?auto=true"></script> <!-- End GetTerms CMP -->

Why all three tags need the nonce

The two <script> tags run the banner's code, so they must carry the nonce to be allowed under a nonce-based script policy. Once it is running, the widget reads its own nonce and applies it to every style it injects into the page, so your style-src policy permits the banner without 'unsafe-inline' (a CSP setting that allows all inline scripts and styles, which removes much of the protection a nonce provides).

The <link rel="preload"> tag needs the nonce for a different reason. If your CSP uses 'strict-dynamic' (a CSP setting that trusts scripts loaded by an already-trusted script and ignores your list of allowed domains), domain allowlisting is switched off, so a preload without a matching nonce is refused even though it points at a GetTerms address. Adding the nonce keeps the preload working.