Making Cookie Banners Stick: Bypassing Common Cookie Banner Blocker Browser Extensions

In this article, I’ll attempt to explain how to prevent cookie banner blocker browser extensions from hiding or blocking your Cookie Banner from rendering.

Photo by Vyshnavi Bisani on Unsplash

Preface

Recently, we faced an odd user-reported issue: our web app seemed inaccessible, almost as if an invisible barrier blocked interactions. The culprit? Our custom cookie banner has an invisible overlay behind it, preventing user interaction until consent is provided.

Ironically, several different Cookie Banner Blocker extensions (e.g. “I don’t care about cookies”, “Accept all cookies” etc), hid this very banner, leaving users unable to agree to our cookie terms and stuck behind the invisible overlay.

Due to Cookie Banners being a GDPR requirement in Europe, I had to figure out a way to reverse-engineer how they work and prevent our banner from being dismissed. Users by law need to be presented by our cookie policy when entering our website, but they need not consent and can decline all cookies too.

How these extensions work

If the extensions simply opted out of cookies, that would have been the end of it. Instead, they hide banners with different techniques using CSS and JS causing unpredicted user experiences.

CSS Method

They inject stylesheets into the document that target certain CSS selectors, e.g. attribute selectors such as

[class*="cookieBanner"]

to and apply styles like these:

display: none !important;
height: 0px !important;
z-index: -99999 !important;
visibility: hidden !important;
width: 0px !important;
overflow: hidden !important;

They utilize an intensive combination of classes, IDs and attributes, even specifically targeting custom class names from major cookie banner providers/plugins.

These browser extensions are designed to ensure their styles override your local page styles, by using:

1. Using highly specific selectors
2. Employing the !important declaration to force a style to apply.
3. Injecting stylesheets after the page has loaded (making them come “last” in the order).

This results in their styles having a higher specificity than your styles and being applied.

JavaScript Method

Some of these extensions also add custom CSS selectors (classes, IDs & data-attributes) to your cookie banner via javascript after the DOM has loaded, alongside injecting CSS styles, resulting in higher specificity.

They use several methods to detect cookie banners such as reading text content inside HTML elements and traversing the DOM tree to find the parent container.

I had some of these extensions loaded whilst writing this article and as soon as I mentioned “cookie policy” it would add a style attribute to the p tag and hiding it!

Preventing these browser extensions from hiding your cookie banner

CSS

There is a rather easy fix for the extensions that use this method.

Simply ensure your cookie banner’s CSS selectors (classes, ids & data-attributes) don’t contain references to “cookies”, “cookie banners” etc. Simply use another obfuscated name instead.

JS

This is a bit harder to override with your own styles & selectors due to the attributes being unknown & ever-changing as the extensions are updated.

This can be undone by using the Mutation Observer API, which monitors changes to DOM elements, such as attributes being added. Using this API one can monitor any attributes (classes, styles etc) added to your DOM element by these extensions and remove them again. Just make sure you don’t remove your own!

Final Thoughts

I’ll advise developers to frequently test their sites with and without popular extensions, as these extensions are frequently updated.

Good luck in the fight!