Set up Content Security Policy for the consent popup

Content Security Policy (CSP) is a feature that helps safeguard your website from various security threats, such as cross-site scripting attacks or clickjacking. 

The Cookie Information script:

• Loads the main Cookie Information library.
• Creates the consent popup.
• Injects styles into the page.
• Injects additional JavaScript required for popup functionality.

To use the Cookie Information library on sites with a CSP, the CSP must allow the execution of inline scripts and styles. 

In this article, we’ll show you how to do it. 

Before you start 

Here are a few things to know before you start:

• The safest way to let the popup work is to use a nonce. Add the nonce to your CSP policy and to the Cookie Information script.
• You need to make changes to the cookie policy code embedded in the consent popup template. 

Set up Content Security Policy for the consent popup

To set up Content Security Policy for the consent popup, follow these steps:

1. Add the nonce attribute to the CSP script-src directive.

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

2. Add the required directives to your CSP policy:

frame-src 'self' https://policy.app.cookieinformation.com/;
connect-src 'self' https://policy.app.cookieinformation.com/ https://consent.app.cookieinformation.com/;

3. Add strict-dynamic or the Cookie Information domain to script-src. This lets the Cookie Information libraries work correctly.

Use one of these options:

script-src 'self' 'strict-dynamic' 'nonce-r4nd0mV4lu3';

Or

script-src 'self' https://policy.app.cookieinformation.com/ 'nonce-r4nd0mV4lu3';

4. (Optional). Add the nonce attribute to the CSP style-src directive:

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

5. 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=”r4nd0mV4lu3”></script>

6. Find and remove the inline scripts and styles. Check your template for inline scripts and styles.

In the Overlay 2 template, the code might look like this:

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

7. Remove the inline event listener from the button:

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

8. Add the following code to the JavaScript in your Overlay 2 template: 

function setupListeners() {
   var renewButton = document.getElementById("Coi-Renew");
   renewButton.addEventListener('click', function() {
       CookieConsent.renew();
   });


   var declineAllButton = document.getElementById("declineButton");
   declineAllButton.addEventListener('click', function() {
       CookieInformation.declineAllCategories();
   });


   var submitConsentButton = document.getElementById('updateButton');
   submitConsentButton.addEventListener('click', function() {
       CookieInformation.submitConsent();
   });


   var agreeToAllButtons = document.querySelectorAll('.coi-banner__accept');
   agreeToAllButtons.forEach(function (button) {
       button.addEventListener('click', function() {
           CookieInformation.submitAllCategories();
       });
   });


   var detailsToggle = document.getElementById('coi-details-toggle');
   detailsToggle.addEventListener('click', function() {
       toggleDetails()
   });


   var privacyPolicyButton = document.querySelector('.coi-banner__privacy-policy');
   privacyPolicyButton.addEventListener('click', function(event) {
       TogglePage(event.currentTarget, 'coiPage-3');
   });


   var returnButton = document.querySelector('.coi-banner__lastpage');
   returnButton.addEventListener('click', function(event) {
       TogglePage(event.currentTarget, 'coiPage-1');
   });


   var returnButton2 = document.querySelector('.coi-banner__privacy-policy-return');
   returnButton2.addEventListener('click', function(event) {
       TogglePage(event.currentTarget, 'coiPage-1');
   });


   document.addEventListener('click', function (event) {
       var renewButton = event.target.closest('.coi-renew-link');


       if (!renewButton) {
           return;
       }
       event.preventDefault();
       CookieConsent.renew();
   });
  
   var coiCheckboxes = document.querySelectorAll('.coi__checkbox');
   coiCheckboxes.forEach(function (checkbox) {
       checkbox.addEventListener('click', function() {
           CookieInformation.changeCategoryConsentDecision(checkbox.id);
       });
   });


  var consentDetailsToggles = document.querySelectorAll('.coi-consent-banner__category-name');
   consentDetailsToggles.forEach(function (toggle) {
       toggle.addEventListener('click', function(event) {
           toggleCookieDetails(event.currentTarget, toggle.getAttribute('aria-controls'));
       });
   });
}
setupListeners();

9. Remove inline JavaScript from the cookie policy copy. Go to Consent solutions > Copy and translations > Edit copy and remove these inline JavaScript attributes from the cookie policy:

href=”javascript:CookieConsent.renew();”

onclick=”javascript:TogglePage(this, ‘coiPage-1’);”

10. Done.