CSP Implementation | Cookie Information Support Center

To use the Cookie Information library on pages with a Content Security Policy (CSP), the CSP must allow the execution of inline scripts and styles that are injected by our library (the library injects the pop-up styles and its JavaScript code) and the execution of the library script itself which is necessary for the correct working of the Consent pop-up. There are several ways to do this, but our recommendation is to use a nonce (number used once) which should be easily guessable, and generated randomly during every server response. It is used to indicate "trusted" scripts to let CSP know which inline scripts and styles should not be blocked.

Step 1. Add nonce to the CSP script-src directive:

Content-Security-Policy: script-src 'nonce-{GENERATED-NONCE}'

Step 2 (optional). Add nonce to the CSP style-src directive if needed:

Content-Security-Policy: style-src 'nonce-{GENERATED-NONCE}'

Step 3. Add the nonce attribute to the main script of our library:

<script src="<https://policy.app.cookieinformation.com/uc.js>" data-culture="EN" type="text/javascript" nonce=”{GENERATED-NONCE}”></script>

Our library will add a nonce to every inline script it injects, allowing CSP to execute them.

Using nonce in the script-src directive also forces adjustments to the pop-up template. If your pop-up template contains inline event listeners (for example on buttons) CSP will block them if you don't put the 'unsafe-inline' value in the script-src directive. To make your template still work with nonce you have to move event listener declarations to js code.

Example from our Overlay v2 template:

One of the existing elements with an inline event listener is the renew consent button

<button tabindex="1" aria-label="renew consent" title="renew consent" id="Coi-Renew" onclick="javascript:CookieConsent.renew();" onkeypress="javascript:CookieConsent.renew();">

First, we need to remove all inline event listeners:

<button tabindex="1" aria-label="renew consent" title="renew consent" id="Coi-Renew">

Next, we need to create a function that will add an event listener to this element and place this function at the bottom of the javascript banner code, we will use its ID to indicate our button:

function setupListeners() { 
 var renewButton = document.getElementById( 
 "Coi-Renew" ); 
 renewButton.addEventListener('click', function(){ 
 CookieConsent.renew(); 
 } 
 renewButton.addEventListener('keypress', function(){ 
 CookieConsent.renew(); 
 } //other interactive elements and their event listeners (accept, decline and save settings buttons)
}

You will need to add the function declaration at the end of the popup template js code, which is done by adding:

setupListeners();

In this way, our function that sets the event listeners will be called as soon as the code is injected into the page.

This change will need to be done for the following inline vent listeners:
CookieInformation.declineAllCategories()
CookieInformation.submitConsent()

CookieInformation.submitAllCategories()

CookieConsent.renew()

If you have any questions regarding the information provided in this guide, please don't hesitate to reach out to us at support@cookieinformation.com, or using the chat feature in the bottom right-hand corner.