Comment bloquer les scripts tiers jusqu'au consentement

Pour bloquer les scripts tiers jusqu’au consentement, livrez-les sous une forme que le navigateur n’exécutera pas, comme une balise <script> avec type="text/plain", et ne les activez qu’une fois que le visiteur a accepté la catégorie correspondante. Appliquez la même règle aux snippets en ligne, aux iframes, aux pixels de suivi et aux balises des gestionnaires de balises, puis vérifiez le résultat dans un navigateur vierge avant de cliquer sur quoi que ce soit.

Pourquoi les scripts tiers doivent-ils attendre le consentement ?

Parce que la plupart d’entre eux stockent ou lisent des informations sur le terminal du visiteur dès qu’ils s’exécutent, et que cela exige un consentement préalable dans l’UE. L’article 5(3) de la directive ePrivacy impose un consentement pour le stockage d’informations sur un terminal ou l’accès à celles-ci, sauf si cela est strictement nécessaire à un service expressément demandé par l’utilisateur.

Les scripts de mesure d’audience, de publicité, de réseaux sociaux et de nombreux contenus intégrés déposent des cookies, lisent le stockage du navigateur ou collectent les caractéristiques de l’appareil dès leur exécution. Dans l’arrêt Planet49 (C-673/17), la Cour de justice de l’Union européenne a confirmé que la règle s’applique, que les informations soient ou non des données personnelles, et que les cases précochées ne constituent pas un consentement valable. Un bandeau qui s’affiche alors que des traceurs sont déjà actifs ne répond pas à cette exigence.

Les scripts réellement nécessaires au service, comme le paiement, la prévention de la fraude ou l’outil de consentement lui-même, peuvent se charger normalement ; voir ce qui relève d’un cookie strictement nécessaire.

Comment bloquer les scripts avant le consentement ?

Modifiez leur type. Les navigateurs ne téléchargent et n’exécutent que les scripts dont le type est un type JavaScript ou module ; un script marqué text/plain est traité comme une donnée inerte. Conservez les attributs d’origine et ajoutez une catégorie pour que votre code de consentement sache quoi activer.

<!-- Inactifs : le navigateur ne les télécharge pas et ne les exécute pas -->
<script type="text/plain" data-consent="analytics"
        src="https://analytics.example.com/script.js"></script>

<script type="text/plain" data-consent="marketing">
  window.adPixel = window.adPixel || [];
  window.adPixel.push(['init', 'PIXEL_ID']);
</script>

<!-- Contenus intégrés : conserver l'URL réelle dans data-src jusqu'au consentement -->
<iframe data-consent="marketing"
        data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="Démonstration du produit" width="560" height="315"></iframe>

Supprimez les images de repli <noscript> incluses dans de nombreux snippets de fournisseurs. Elles déclenchent une requête lorsque JavaScript est désactivé, c’est-à-dire précisément quand votre bandeau ne peut pas s’afficher : il n’existe donc aucun moyen de les conditionner.

Comment activer les scripts bloqués après le consentement ?

Remplacez chaque script inactif par un nouvel élément <script>. Modifier l’attribut type d’un élément existant ne pousse pas le navigateur à l’exécuter, et les scripts ajoutés via innerHTML ne s’exécutent jamais : il vous faut un nouvel élément créé avec document.createElement.

function activate(category) {
  document
    .querySelectorAll(`script[type="text/plain"][data-consent="${category}"]`)
    .forEach((inert) => {
      const live = document.createElement('script');
      for (const { name, value } of inert.attributes) {
        if (name !== 'type') live.setAttribute(name, value);
      }
      if (!inert.hasAttribute('async')) live.async = false; // conserver l'ordre d'insertion
      live.text = inert.text; // code en ligne, le cas échéant
      inert.replaceWith(live);
    });

  document
    .querySelectorAll(`iframe[data-consent="${category}"][data-src]`)
    .forEach((frame) => { frame.src = frame.dataset.src; });
}

// Appliquer le choix enregistré au chargement ; rappeler activate() depuis les gestionnaires du bandeau.
for (const [category, granted] of Object.entries(readStoredConsent())) {
  if (granted) activate(category);
}

Trois détails posent souvent problème :

• L’ordre. Les scripts externes insérés en JavaScript s’exécutent par défaut de manière asynchrone, dans l’ordre où leur téléchargement se termine. Régler async = false les fait s’exécuter dans l’ordre d’insertion, ce qui compte lorsqu’une bibliothèque dépend d’une autre.
• Les snippets en ligne s’exécutent immédiatement. Un script en ligne s’exécute dès son insertion, sans attendre les scripts externes. La plupart des snippets de fournisseurs mettent leurs appels en file d’attente jusqu’au chargement de la bibliothèque, mais vérifiez tout code personnalisé qui suppose qu’une bibliothèque est déjà présente.
• document.write(). Les anciens snippets qui l’appellent ne fonctionneront plus une fois la page chargée. Remplacez-les par le snippet asynchrone du fournisseur.

Quelle méthode de blocage choisir ?

La plupart des sites combinent plusieurs méthodes, choisies en fonction de l’emplacement de chaque balise.

Méthode	Idéale pour	Points de vigilance
Balises text/plain inactives	Les balises codées en dur dans les templates	Chaque balise doit être modifiée ; ordre d’exécution
Chargeur tenant compte du consentement dans votre propre code	Les SPA et les SDK installés depuis npm	Les SDK qui s’initialisent dès leur import
Paramètres de consentement du gestionnaire de balises	Les équipes qui gèrent leurs balises dans un gestionnaire de balises	Chaque balise doit avoir la bonne exigence de consentement
Blocage automatique	Les grands sites historiques comportant de nombreuses balises codées en dur	Doit se charger en premier, de manière synchrone ; peut manquer ou casser des scripts
Espaces réservés pour les iframes	Les vidéos, cartes et contenus intégrés de réseaux sociaux	L’espace réservé doit expliquer ce qu’implique le chargement

Les bibliothèques installées depuis npm n’apparaissent jamais sous forme de balises script : c’est donc votre propre code qui sert de verrou. N’appelez la méthode init() du SDK qu’après le consentement, et chargez-le avec un import() dynamique pour qu’il ne soit même pas téléchargé avant. Ce mécanisme, ainsi que la gestion des choix qui changent en cours de session, est détaillé dans gérer le consentement dans les applications monopages.

Les balises Google disposent d’une option supplémentaire. Avec Google Consent Mode, les balises peuvent se charger avant le consentement et adapter leur comportement aux signaux de consentement au lieu d’être bloquées. Savoir si cette configuration correspond à votre appétence au risque est une décision distincte ; voir mode de base ou mode avancé de Consent Mode.

Comment vérifier que le blocage fonctionne ?

Testez comme un nouveau visiteur, et vérifiez ce qui se passe réellement sur le réseau et dans le stockage :

1. Ouvrez le site dans une nouvelle fenêtre de navigation privée, depuis une région où votre bandeau s’affiche.
2. Avant de cliquer sur quoi que ce soit, ouvrez les DevTools et consultez le panneau Réseau. Aucune requête ne doit partir vers des domaines de mesure d’audience ou de publicité, sauf si vous avez délibérément choisi une configuration qui en envoie.
3. Dans le panneau Application, vérifiez les cookies, le stockage local et le stockage de session. Seules les entrées strictement nécessaires doivent exister.
4. Cliquez sur « Tout refuser » et vérifiez que rien de nouveau ne se charge ni n’est stocké.
5. Dans une nouvelle session, acceptez une catégorie à la fois et vérifiez que seuls ses scripts et contenus intégrés se chargent.
6. Recommencez après chaque mise en production qui ajoute une balise, et réalisez régulièrement un audit des cookies pour repérer les balises ajoutées en dehors de votre processus de mise en production.

En résumé

Le blocage porte sur l’exécution, pas seulement sur les cookies : dès qu’un script non essentiel s’exécute, il peut stocker ou lire des données avant que quiconque ait donné son accord. Livrez les balises inactives, activez-les par catégorie après un opt-in, conditionnez de la même manière les contenus intégrés et les SDK, et testez dans un navigateur vierge. Des outils comme Cookiesh peuvent automatiser l’étape d’activation, en n’exécutant les scripts balisés type="text/plain" data-cookiesh="analytics" qu’après que le visiteur a accepté cette catégorie.

Cet article est fourni à titre d’information générale et ne constitue pas un avis juridique. Pour toute décision concernant votre situation, consultez un professionnel qualifié de la protection des données.