Improve DSGVO compliance of bs Cookie Settings

[DanielStegemann]

Hi,

I have a concern regarding bs Cookie Settings. This already does a good job out-of-the-box and actually offers everything you need.

However, in order to make it compliant with the GDPR, one feature is missing: If the banner is visible (because the user has not made a selection before), the page behind it should be blocked and, most importantly, the user should be prevented from navigating further through the website (see Requirements for Cookie Consent Banner at https://datenschutzbeauftragter-muensterland.de/cookiebanner/).

This blocking should ideally be done with an overlay like Bootstrap's Offcanvas / Modal (see https://getbootstrap.com/docs/5.2/components/offcanvas/#static-backdrop). The cookieconsent plugin by Orest Bida, on which bS Cookie Settings is based, offers the switch "force_consent" for this purpose and can thus be used in a DSGVO-compliant way.

I would be happy to see such a feature in bs Cookie Settings. What do you think?

[justinkruit]

As you said, the cookieconsent plugin it's based on has the force_consent boolean, which you can add to the cc.run part of the Init instructions on the BS Cookie Settings plugin. No need to make any more changes than that 😁

[DanielStegemann]

@justinkruit Thanks, you are right, the plugin sets the required classes to html tag when force_consent is set to true.

Unfortunately, the plugin's stylesheet does not include the styling for that use case. Can you maybe provide the necessary styles?

[justinkruit]

It doesn't? That seems like a bug. I've created an issue over on the plugin repo. bootscore/bs-cookie-settings#8

[DanielStegemann]

Thanks.

Got it working with the following styling added:

/* Show overlay */
.force--consent .cc_div {
	transition: opacity .25s linear;
	opacity: 0;
}
.force--consent.show--consent .cc_div {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    width: 100vw;
    transition: opacity .25s linear;
	z-index: 1080;
	background-color: rgba(0,0,0,.5);
	opacity: 1;
}

.show--consent #bs-cookie-bar {
    transform: none;
    transition-delay: .25s;
}

.force--consent.show--consent{
    overflow-y: hidden!important;
}

.force--consent.show--consent,
.force--consent.show--consent body{
    height: auto!important;
    overflow-x: hidden!important;
}

[crftwrk]

Unfortunately, the plugin's stylesheet does not include the styling for that use case.

Yes, all custom styles has been removed and uses nearly straight Bootstrap classes instead.

First of all, modifying the banner to a BS modal is a big deal and I'm not sure if this is the right way. There is a cookie script by shaack which does it in a nice way https://github.com/shaack/bootstrap-cookie-consent-settings. But it is hard to implement. Demo: https://shaack.com/projekte/bootstrap-cookie-consent-settings/examples/cookie-banner-example.html

You can create quickly a backdrop in your child without using force_consent: true,. Snippet goes to _bscore_custom.scss:

// Create backdrop
.show--consent {
  body::after {
    content: "";
    background-color: $black;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    opacity: .5;
    visibility: visible;
    transition: opacity .3s;
  }

  // Hide backdrop if modal is open
  &.show--settings body::after {
    opacity: 0;
    visibility: hidden;
  }

  // Lock body scroll
  body {
    overflow: hidden;
  }
}

However, imprint and privacy policy must be clickable and readable. Means that both must be linked in the cookie init. So you can hide init widget on both sites by using Widget Context plugin https://wordpress.org/plugins/widget-options/, but then you can not open the cookie settings anymore.

Better to hide banner and backdrop vie inline-styles on this sites in a Gutenberg block:

<style>
  .show--consent body::after,
  .show--consent #bs-cookie-bar {
    display: none !important;
  }

  .show--consent body {
    overflow: scroll;
  }
</style>

Demo banner: https://dev.bootscore.me/
Demo hidden banner: https://dev.bootscore.me/2012/01/07/template-sticky/

Make sure that cookie bs_cookie_settings has been deleted.

Just a rough sketch, improvements are always welcome.

[DanielStegemann]

However, imprint and privacy policy must be clickable and readable.

Yes, good point. But both - imprint and privacy policy - could be displayed in an additional modal (see implementation with klaro! plugin here: https://www.abakus24.de/), so page navigation would not be required and users would not have to leave the context of consent.

Would really like see this solved with the components and styling that Bootstrap provides, just as it is bootScore's approach.

[crftwrk]

But both - imprint and privacy policy - could be displayed in an additional modal

Think this goes behind the scope. All items are pure JS generated, there is no HTML or PHP. Showing both in an additional modal will make the usage of the plugin much more complicated.

However, if somebody want to play around to turn the banner into a modal, here is the source https://github.com/bootscore/bs-cookie-settings/blob/main/src/js/cookie-settings.js. The banner starts in line 341.