Bloquer les scripts tiers avec quelques lignes de Javascript

Comment empêcher les scripts tiers de collecter des données, d'envoyer des analyses, etc. sans le consentement de l'utilisateur.

Clause de non-responsabilité: cet article concerne le blocage de scripts réputés sûrs, comme les outils d'analyse, c'est-à-dire les scripts de services tiers que vous incluez vous-même. Pour bloquer les scripts tiers malveillants et indésirables ou prévenir les attaques de type Cross Site Scripting, vous devez toujours envisager d’utiliser d’autres solutions, telles que l’ajout d’un en-tête Content-Security-Policy!
Demander le consentement de l'utilisateur - sans suivi préalable.

Le contexte

Chez Snips, nous prenons la confidentialité très au sérieux. Maintenant que le RPGD est en vigueur, nous avons décidé que nos sites Web en propriété ne devraient jamais collecter d’analyses sur les utilisateurs visiteurs - à moins que ceux-ci ne choisissent de participer volontairement.

Malheureusement, le blocage des analyses tierces peut être un peu délicat. Le problème est que ces services sont conçus pour démarrer immédiatement et qu'ils reposent sur de petits extraits de code et des balises de script minifiés. Vous pouvez essayer de modifier le code minifié vous-même, mais cela devient un peu salissant et difficile à maintenir, surtout si vous utilisez plusieurs bibliothèques.

Donc, afin de mieux gérer cela - automatiquement -, nous avons créé une petite bibliothèque open source appelée Yett (signification intéressante) qui se charge de bloquer l'exécution de scripts d'analyse. La bibliothèque vous permet également de débloquer ces scripts ultérieurement, une fois que l'utilisateur s'est connecté.

Bloquer automatiquement les scripts peut sembler trivial - mais il n’est pas si facile de bloquer les balises de script en ligne!

Ainsi, tout en approfondissant le sujet, nous avons découvert certaines subtilités techniques que nous pensions pouvoir partager avec la communauté.

Le but

Voici les exigences:

  • Le code doit être chargé et exécuté de manière synchrone, avant tout autre script.
  • À ce stade, vous ne savez pas à quoi ressemblera le code HTML final, car le document n'a pas encore été chargé;
  • Les scripts bloqués ne doivent en aucun cas être altérés (l'objectif est de les empêcher de s'exécuter sans toucher à leur propre code);
  • Nous devrions pouvoir (éventuellement) débloquer les scripts par programmation ultérieurement.

Ci-dessous, nous énumérons quelques techniques qui fonctionneront réellement.

Groundwork - Utilisation d'un MutationObserver pour observer l'insertion d'éléments de script

MutationObserver est utile dans ce cas, car vous pouvez enregistrer l'observateur sur l'élément de document à l'avance et être averti chaque fois que des noeuds DOM sont insérés, en particulier des noeuds de script.

Cela ne suffira pas, bien sûr, mais ce sera le premier pas vers notre objectif.

Empêcher une balise