Скрытие cookie-баннеров на любом сайте — 5 готовых сниппетов
GDPR должен был дать нам контроль над cookie. Вместо этого мы получили всплывающие окна, которые закрывают 30% экрана на каждом втором сайте. В этой статье — пять способов избавиться от этой стены раз и навсегда: с помощью CSS, JavaScript и расширения JustZix.
Это законно?
Да. GDPR и директива ePrivacy налагают обязанности на владельца сайта (он должен спросить согласие до установки cookie). С твоей стороны — как пользователь — ты свободно можешь менять внешний вид сайта в своём браузере. Так же, как любой блокировщик рекламы или режим чтения в Safari. Важное уточнение: скрытие баннера обычно не равно согласию на cookie — большинство сайтов продолжают ставить только строго необходимые cookie, пока ты явно не нажмёшь «Принять».
Способ 1 — универсальный CSS по самым частым классам
Самый простой и безопасный. Ловит ~80% баннеров в сети:
/* Cookie-баннеры — самые частые классы и 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;
}
/* Многие баннеры блокируют прокрутку body до клика */
html, body {
overflow: auto !important;
position: static !important;
}Второй блок критически важен — многие баннеры выставляют overflow: hidden на <body>, чтобы заблокировать прокрутку, пока ты не примешь. Принудительный overflow: auto возвращает нормальное поведение.
Способ 2 — агрессивные селекторы атрибутов
Когда сайт использует динамические имена классов (Tailwind, CSS-in-JS) и базовый паттерн не совпадает, целься в атрибуты:
/* Ловит всё, у чего есть "cookie" или "consent" в классе / 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;
}Флаг i в селекторах атрибутов (например, [class*="cookie" i]) делает их нечувствительными к регистру. Без него .CookieBanner не совпал бы с "cookie".
Предупреждение: этот сниппет может захватить слишком много — например, статья о cookie (про закон!) тоже будет скрыта. Используй его с умом, в идеале — в папке правил, ограниченной конкретными доменами.
Способ 3 — селектор :has() (современный)
С Chrome 105 и Safari 15.4 можно использовать :has() — селектор, который целится в элемент, содержащий потомка, подходящего под паттерн. Идеально для cookie-баннеров, потому что у них всегда есть кнопка «Принять» внутри:
/* Практичная версия — целится в fixed/sticky контейнеры с кнопкой Accept */
div:has(> button[aria-label*="Accept" i]),
div:has(> button[aria-label*="cookie" i]),
aside:has(> button[aria-label*="consent" i]) {
display: none !important;
}CSS не поддерживает :contains() (это изобретение jQuery). Вместо этого мы целимся в атрибут aria-label — у хорошо спроектированных баннеров он всё равно есть для скринридеров.
Способ 4 — JavaScript автоматически нажимает «Принять»
Когда CSS недостаточно (баннер в Shadow DOM, блокировка всей страницы), JS нажимает за тебя. Быстрее, чем ты успеешь заметить:
// Автоматически нажимает кнопки "Принять" — работает даже в iframe
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 /^(принять все|принять всё|принять|согласен|разрешить все|accept all|accept)$/i
.test(text) || /accept|принять|разрешить/.test(aria);
});
if (target) {
target.click();
clearInterval(interval);
}
}, 500);Опрашивает каждые 500 мс в течение 10 секунд (20 попыток × 500 мс). Находит первую подходящую кнопку — нажимает и останавливается. На практике: ты даже не видишь баннер.
Этическое замечание: нажимая «Принять», ты соглашаешься на маркетинговые cookie. Если это тебя смущает — используй способы 1+2 (скрытие без согласия). Тогда сайт видит тебя как анонимного пользователя, который просто не ответил.
Способ 5 — Shadow DOM (крайние случаи)
OneTrust, Cookiebot, Usercentrics — самые распространённые SaaS для cookie-баннеров — часто рендерят свой UI внутри Shadow DOM. CSS вне shadow root не может до него дотянуться. Нужен JS:
// Находим host-элемент (по частым именам), заходим в его shadowRoot
function hideShadowBanners() {
const hosts = document.querySelectorAll(
'#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
);
hosts.forEach(host => {
host.style.display = 'none';
// Плюс shadow-содержимое (если используется shadow DOM)
if (host.shadowRoot) {
const style = document.createElement('style');
style.textContent = ':host { display: none !important; }';
host.shadowRoot.appendChild(style);
}
});
}
// Первый запуск + observer для поздних вставок
hideShadowBanners();
new MutationObserver(hideShadowBanners)
.observe(document.body, { childList: true, subtree: true });MutationObserver ловит и баннеры, которые вставляются после DOMContentLoaded — обычно скрипты трекинга загружаются асинхронно, и баннер появляется через 1-2 секунды после загрузки страницы.
Как подключить это к JustZix
- Установи расширение (страница загрузки — ZIP, 2 минуты).
- Нажми иконку JustZix → «Новое правило».
- URL-паттерн:
*(чтобы применять везде) илиhttps://example.com/*(один домен). - На вкладке CSS вставь способ 1 (универсальный) — оставь его активным.
- Если попадёшь на сайт, где ничего не скрывается — добавь способ 4 как JS-правило, ограниченное этим доменом.
- Синхронизируй свой ключ между устройствами — баннер исчезает на ноутбуке, на ПК и на рабочем компьютере одновременно.
Ловушки, которых стоит избегать
- Не выставляй
display: noneнаhtmlилиbody— ты скроешь всю страницу. - Загрузка страницы может слегка замедлиться — JS автопринятия, опрашивающий 20 раз, занимает event loop. На практике незаметно.
- Некоторые пейволы маскируются под cookie-баннеры (например, крупные новостные сайты) — скрытие баннера не разблокирует контент. Там поможет только отдельное правило для сайта.
- Баннер магазина может требоваться по закону (например, согласие при оформлении заказа). Не скрывай его на сайтах, где собираешься что-то покупать.
Что делать дальше
Тот же подход работает для других убийц UX: попапы рассылок, «включи уведомления», превью пейволов. Посмотри другие готовые сниппеты в разделе «Примеры» или реальные сценарии применения JustZix.
Установи JustZix и пиши свои правила. Первый сниппет из этой статьи, вставленный в расширение, = баннер исчезает на 80% сайтов. Остальное — просто итерация по проблемным доменам.
Оцени эту статью
Оценок пока нет — оцени первым.