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 not 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. The same can be done with the decline 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)


// Get the element with the ID "declineButton" and store it in the variable "declineAllButton"
var declineAllButton = document.getElementById("declineButton");

// Add an event listener to the "declineAllButton" element that listens for a 'click' event
declineAllButton.addEventListener('click', function() {
    // When the 'click' event occurs, execute the following function:

    // Call the "declineAllCategories" method of the "CookieInformation" object
    CookieInformation.declineAllCategories();
});


setupListeners();

Note that some of the elements where the inline event listeners reside, don't have an ID so these IDs will have to be added and then used to indicate the element.

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 event listeners:
CookieInformation.declineAllCategories()
CookieInformation.submitConsent()

CookieInformation.submitAllCategories()

CookieConsent.renew()

CookieInformation.changeCategoryConsentDecision()

javascript:TogglePage(this, 'coiPage-3')*

toggleDetails(this.id)

toggleCookieDetails(this,'description-container-{{this.cookie_type_label}}')

*The <a> tag in the coi-banner__policy class has a href attribute which contains a JavaScript code snippet, which is an inline event listener. It invokes the TogglePage function and passes the current element (this) and the string 'coiPage-3' as arguments.

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.