Jak ukryć cookie bannery na każdej stronie — 5 gotowych snippetów
RODO miało dać nam kontrolę nad cookies. Dało nam pop-upy, które zasłaniają 30% ekranu na każdej drugiej stronie. Ten artykuł pokazuje pięć sposobów, żeby raz na zawsze pozbyć się tej zasłony — za pomocą CSS, JavaScript i wtyczki JustZix.
Czy to legalne?
Tak. RODO i ePrivacy Directive nakładają obowiązki na operatora strony (musi zapytać o zgodę przed ustawieniem cookies). Po Twojej stronie — jako użytkownika — wolno Ci modyfikować, jak strona wygląda w Twojej przeglądarce. To samo, co robi każdy adblock i tryb czytania w Safari. Ważne tylko: ukrywając banner zazwyczaj nie zgadzasz się automatycznie na cookies — większość witryn nadal ustawia tylko cookies niezbędne, a marketingowe wymagają explicit kliknięcia „Akceptuj".
Sposób 1 — uniwersalny CSS na popularne klasy
Najprostsze i bezpieczne podejście. Łapie ~80% banerów na większości stron:
/* Cookie banners — popularne klasy i ID */
.cookie-banner,
.cookie-notice,
.cookie-consent,
.gdpr-banner,
.consent-banner,
#cookie-notice,
#cookieConsent,
#onetrust-banner-sdk,
[class*="CookieConsent"],
[id*="cookie-bar"] {
display: none !important;
}
/* Często banner blokuje scroll body */
html, body {
overflow: auto !important;
position: static !important;
}Drugi blok jest kluczowy — wiele bannerów ustawia overflow: hidden na <body>, żeby zablokować scroll dopóki nie zaakceptujesz. Wymuszone overflow: auto przywraca normalne zachowanie.
Sposób 2 — agresywne selektory atrybutów
Gdy strona używa dynamicznych klas (np. Tailwind albo CSS-in-JS) i bazowy wzorzec nie pasuje, celuj w atrybuty:
/* Łap wszystko, co ma "cookie" lub "consent" w klasie / ID */
[class*="cookie" i],
[id*="cookie" i],
[class*="consent" i],
[id*="consent" i],
[class*="gdpr" i],
[role="dialog"][aria-label*="cookie" i] {
display: none !important;
}Flaga i w selektorze atrybutu (np. [class*="cookie" i]) sprawia, że pasuje case-insensitive. Bez niej .CookieBanner by nie matchował "cookie".
Ostrzeżenie: ten snippet może łapić więcej niż chcesz — np. strona o cookies (przepisach!) też dostanie display:none. Używaj świadomie, najlepiej w katalogu reguł ograniczonym do konkretnych domen.
Sposób 3 — selektor :has() (nowoczesny)
Od Chrome 105 i Safari 15.4 możesz używać :has() — selektor, który celuje w element posiadający dziecko pasujące do wzorca. Idealne na cookie bannery, bo zawsze mają w środku przycisk „Akceptuj":
/* Praktyczna wersja — łap fixed/sticky kontener z buttonem o aria-label */
div:has(> button[aria-label*="Akceptuj" i]),
div:has(> button[aria-label*="Accept" i]),
aside:has(> button[aria-label*="cookie" i]) {
display: none !important;
}CSS nie wspiera :contains() (to wynalazek jQuery). Celujemy więc w atrybut aria-label, który dobre bannery i tak mają — dla screen readerów.
Sposób 4 — JavaScript auto-klik „Akceptuj"
Gdy CSS-em się nie da (np. banner pojawia się w Shadow DOM albo blokuje stronę aż do kliknięcia), JS auto-klika za Ciebie. Działa szybciej niż się zorientujesz:
// Auto-klik na przyciski "Akceptuj" — działa też w iframe'ach z cookies
let attempts = 0;
const interval = setInterval(() => {
if (++attempts > 20) return clearInterval(interval);
const candidates = [
...document.querySelectorAll('button, a[role="button"], input[type="button"]')
];
const target = candidates.find(el => {
const text = (el.textContent || el.value || '').trim().toLowerCase();
const aria = (el.getAttribute('aria-label') || '').toLowerCase();
return /^(akceptuj|akceptuj wszystkie|zgadzam się|accept all|accept|allow all)$/i
.test(text) || /accept|akceptuj/.test(aria);
});
if (target) {
target.click();
clearInterval(interval);
}
}, 500);Polluje co 500ms przez 10 sekund (20 prób × 500ms). Po znalezieniu pierwszego pasującego przycisku — klika i kończy. Realna szybkość: użytkownik nawet nie zauważy bannera.
Uwaga etyczna: klikając „Akceptuj" zgadzasz się na cookies marketingowe. Jeśli Ci to przeszkadza — użyj raczej Sposób 1+2 (samo ukrycie bez akceptu). Wtedy strona widzi Cię jako anonimowego użytkownika, który po prostu nie odpowiedział.
Sposób 5 — Shadow DOM (ekstremalne przypadki)
OneTrust, Cookiebot, Usercentrics — najpopularniejsze SaaS-y cookie bannerów — często renderują UI wewnątrz Shadow DOM. CSS spoza shadow root nie ma tam dostępu. Trzeba JS:
// Znajdź element host (po popularnych nazwach), wejdź w jego shadowRoot
function hideShadowBanners() {
const hosts = document.querySelectorAll(
'#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
);
hosts.forEach(host => {
host.style.display = 'none';
// Plus shadow content (jeśli używa shadow DOM)
if (host.shadowRoot) {
const style = document.createElement('style');
style.textContent = ':host { display: none !important; }';
host.shadowRoot.appendChild(style);
}
});
}
// Pierwsze uruchomienie + observer na późne wstawienia
hideShadowBanners();
new MutationObserver(hideShadowBanners)
.observe(document.body, { childList: true, subtree: true });MutationObserver łapie też bannery, które wstawiają się po DOMContentLoaded — typowo skrypty trackerowe ładują się asynchronicznie i banner pojawia się 1-2 sekundy po wczytaniu strony.
Jak to wpiąć do JustZix
- Zainstaluj wtyczkę (strona pobierania — paczka ZIP, 2 minuty).
- Kliknij ikonę JustZix → „Nowa reguła".
- Wzorzec URL:
*(jeśli ma działać wszędzie) albohttps://example.com/*(jedna domena). - W zakładce CSS wklej Sposób 1 (uniwersalny) — zostaw aktywne.
- Jak natrafisz na stronę, gdzie ukrywanie nie zadziałało — dodaj Sposób 4 jako regułę JS, ograniczoną do tej domeny.
- Synchronizuj klucz między urządzeniami — banner znika na laptopie, PC i komputerze służbowym jednocześnie.
Pułapki, których warto unikać
- Nie ustawiaj
display: nonenahtmlanibody— schowasz całą stronę. - Wczytanie strony może być nieco wolniejsze — JS auto-akceptu pollujący 20× rusza event loop. W praktyce niezauważalne.
- Niektóre paywalle udają cookie banner (np. Onet) — schowanie bannera nie odblokuje treści. Tu pomaga tylko dedykowana reguła per strona.
- Banner sklepu może być wymagany prawnie (np. RODO consent na koszyku z towarem). Nie ukrywaj na stronach, gdzie planujesz coś kupić.
Co dalej
To samo podejście działa na innych UX-killerach: newsletter pop-upy, „włącz powiadomienia", paywall preview. Zobacz więcej gotowych snippetów w sekcji Przykłady, albo realne scenariusze użycia JustZix.
Zainstaluj JustZix i pisz własne reguły. Pierwszy snippet z tego artykułu wklejony do wtyczki = banner zniknie na 80% stron. Reszta — to iteracja per problematyczna domena.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.