Masquer les bannières cookies sur chaque site — 5 snippets prêts à coller

15 mai 2026 · par JustZix Team

Le RGPD devait nous donner le contrôle sur les cookies. Il nous a donné des pop-ups qui bloquent 30% de l'écran sur un site sur deux. Cet article montre cinq façons de se débarrasser de ce mur une fois pour toutes — avec du CSS, du JavaScript et l'extension JustZix.

Est-ce légal ?

Oui. Le RGPD et la directive ePrivacy imposent des obligations à l'opérateur du site (il doit demander le consentement avant de poser des cookies). De votre côté — en tant qu'utilisateur — vous êtes libre de modifier l'apparence d'un site dans votre navigateur. Comme n'importe quel bloqueur de pub ou le mode Lecture de Safari. Une réserve importante : masquer la bannière ne vaut généralement pas consentement aux cookies — la plupart des sites ne posent que les cookies strictement nécessaires tant que vous ne cliquez pas explicitement sur « Accepter ».

Méthode 1 — CSS universel ciblant les classes courantes

Le plus simple et le plus sûr. Attrape ~80% des bannières sur le web :

/* Bannières cookies — classes et ID courants */
.cookie-banner,
.cookie-notice,
.cookie-consent,
.gdpr-banner,
.consent-banner,
#cookie-notice,
#cookieConsent,
#onetrust-banner-sdk,
[class*="CookieConsent"],
[id*="cookie-bar"] {
  display: none !important;
}

/* Beaucoup de bannières bloquent le scroll du body jusqu'au clic */
html, body {
  overflow: auto !important;
  position: static !important;
}

Le deuxième bloc est crucial — beaucoup de bannières posent overflow: hidden sur <body> pour bloquer le défilement tant que vous n'acceptez pas. Forcer overflow: auto rétablit le comportement normal.

Méthode 2 — sélecteurs d'attributs agressifs

Quand un site utilise des noms de classes dynamiques (Tailwind, CSS-in-JS) et que le motif de base ne correspond pas, ciblez les attributs :

/* Attrape tout ce qui a "cookie" ou "consent" dans la classe / l'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;
}

Le drapeau i dans les sélecteurs d'attributs (p. ex. [class*="cookie" i]) les rend insensibles à la casse. Sans lui, .CookieBanner ne correspondrait pas à "cookie".

Avertissement : ce snippet peut trop attraper — p. ex. un article sur les cookies (la loi !) sera masqué aussi. Utilisez-le avec discernement, idéalement dans un dossier de règles limité à des domaines précis.

Méthode 3 — sélecteur `:has()` (moderne)

Depuis Chrome 105 et Safari 15.4, vous pouvez utiliser :has() — un sélecteur qui cible un élément contenant un enfant correspondant à un motif. Parfait pour les bannières cookies, car elles ont toujours un bouton « Accepter » à l'intérieur :

/* Version pratique — cibler les conteneurs fixed/sticky avec un bouton 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 ne supporte pas :contains() (c'est une invention de jQuery). Nous ciblons plutôt l'attribut aria-label — les bannières bien conçues en ont un de toute façon pour les lecteurs d'écran.

Méthode 4 — JavaScript clique « Accepter » automatiquement

Quand le CSS ne suffit pas (bannière dans le Shadow DOM, bloqueur pleine page), le JS clique pour vous. Plus vite que vous ne le remarquez :

// Clique automatiquement les boutons "Accepter" — fonctionne aussi dans les iframes
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 /^(tout accepter|accepter|j'accepte|autoriser tout|accept all|accept)$/i
      .test(text) || /accept|accepter|autoriser/.test(aria);
  });

  if (target) {
    target.click();
    clearInterval(interval);
  }
}, 500);

Il sonde toutes les 500ms pendant 10 secondes (20 tentatives × 500ms). Trouve le premier bouton correspondant — clique et s'arrête. En pratique : vous ne voyez même pas la bannière.

Note éthique : en cliquant « Accepter » vous consentez aux cookies marketing. Si cela vous dérange — utilisez les méthodes 1+2 (masquer sans accepter). Le site vous voit alors comme un utilisateur anonyme qui n'a simplement pas répondu.

Méthode 5 — Shadow DOM (cas extrêmes)

OneTrust, Cookiebot, Usercentrics — les SaaS de bannières cookies les plus populaires — affichent souvent leur interface dans le Shadow DOM. Le CSS extérieur au shadow root ne peut pas l'atteindre. Il faut du JS :

// Trouver l'élément hôte (par noms courants), entrer dans son shadowRoot
function hideShadowBanners() {
  const hosts = document.querySelectorAll(
    '#onetrust-consent-sdk, #usercentrics-root, #CybotCookiebotDialog'
  );

  hosts.forEach(host => {
    host.style.display = 'none';
    // Plus le contenu shadow (s'il utilise le shadow DOM)
    if (host.shadowRoot) {
      const style = document.createElement('style');
      style.textContent = ':host { display: none !important; }';
      host.shadowRoot.appendChild(style);
    }
  });
}

// Premier passage + observer pour les insertions tardives
hideShadowBanners();
new MutationObserver(hideShadowBanners)
  .observe(document.body, { childList: true, subtree: true });

Le MutationObserver attrape aussi les bannières qui s'insèrent après DOMContentLoaded — typiquement les scripts de tracking chargent en asynchrone et la bannière apparaît 1-2 secondes après le chargement de la page.

Comment brancher cela dans JustZix

Installez l'extension (page de téléchargement — ZIP, 2 minutes).
Cliquez sur l'icône JustZix → « Nouvelle règle ».
Motif d'URL : * (pour appliquer partout) ou https://example.com/* (un domaine).
Dans l'onglet CSS, collez la Méthode 1 (universelle) — laissez-la active.
Si vous tombez sur un site où rien n'est masqué — ajoutez la Méthode 4 comme règle JS, limitée à ce domaine.
Synchronisez votre clé entre appareils — la bannière disparaît sur votre portable, votre PC et votre ordinateur de travail simultanément.

Pièges à éviter

Ne mettez pas display: none sur html ou body — vous masqueriez la page entière.
Le chargement de la page peut ralentir légèrement — le JS d'auto-acceptation qui sonde 20 fois sollicite l'event loop. En pratique imperceptible.
Certains paywalls se déguisent en bannières cookies (p. ex. les grands sites d'actualité) — masquer la bannière ne débloque pas le contenu. Seule une règle dédiée par site aide là.
La bannière d'une boutique peut être légalement requise (p. ex. le consentement au paiement). Ne la masquez pas sur les sites où vous comptez acheter.

Et ensuite

La même approche fonctionne pour les autres tueurs d'UX : pop-ups de newsletter, « activer les notifications », aperçus de paywall. Voyez d'autres snippets prêts à coller dans la section Exemples, ou des cas d'usage réels pour JustZix.

Installez JustZix et écrivez vos propres règles. Le premier snippet de cet article collé dans l'extension = la bannière disparaît sur 80% des sites. Le reste n'est qu'une itération par domaine problématique.

Notez cet article

Aucune note — soyez le premier.

Masquer les bannières cookies sur chaque site — 5 snippets prêts à coller

Est-ce légal ?

Méthode 1 — CSS universel ciblant les classes courantes

Méthode 2 — sélecteurs d'attributs agressifs

Méthode 3 — sélecteur :has() (moderne)

Méthode 4 — JavaScript clique « Accepter » automatiquement

Méthode 5 — Shadow DOM (cas extrêmes)

Comment brancher cela dans JustZix

Pièges à éviter

Et ensuite

Notez cet article

Voir aussi

Ajustements Booksy : un calendrier plus clair et un mode focus

Ajustements Allegro : plus calme, plus dense et sans annonces sponsorisées

Ajustements Canva — un éditeur plus grand et moins de bruit

Essayez vous-même

Méthode 3 — sélecteur `:has()` (moderne)