Bloquer les requêtes de suivi/tracking des utilisateurs
Ce projet est open source et accessible depuis GitHub GL-Browser.
Cet article est le 4ème d'une série d'articles concernant la création d'un navigateur internet incluant par défaut des fonctionnalités que l'on retrouve habituellement sous forme d'extensions dans Chrome ou Firefox.
Exemples de fonctionnalités :
Nous souhaitons :
Nous utilisons Electron qui mixe le navigateur open source Chromium avec la richesse du framework Node.js.
Dans ce 4ème article, nous réaliserons le filtrage/blocage des requêtes internet dans le but de supprimer les trackers, les outils d'analyses, ...
L'architecture du navigateur ressemble à ceci :
Nous allons bloquer les requêtes d'analyses envoyées à partir de la page d'accueil du site Le Monde vers des sociétés tierces.
Après analyse de son trafic réseau à l'aide, par exemple, de l'outil de développement Chrome DevTools, les URL suspectes sont :
http://radar.cedexis.com/01-10013-radar10.min.js
http://ping.chartbeat.net/ping?h=lemonde.fr
http://s1.lemde.fr/hgn/www/partials/layout/tracking/
http://s1.lemde.fr/min/medias/web/...
Article 1 : initialisation du projet avec Electron.
Article 2 : injection du CSS et du JavaScript dans la page de Google.
Article 3 : injection de scripts JavaScript et de styles CSS suivant l'URL.
Pour récupérer directement les sources du 3ème article :
git clone https://github.com/emmanuelroecker/GL-Browser
git checkout article3
Le processus principal main.js exécuté par Electron supporte l'évènement onBeforeRequest.
L'évènement onBeforeRequest est déclenché à chaque requête réseau dont l'URL est compatible avec l'un des match patterns défini lors de l'initialisation.
Comme dans le précédent article, le format YAML est utilisé pour le fichier filter.yml qui contient les règles de filtrage sous forme de match patterns :
- "*://*.lemde.fr/*tracking*"
- "*://*.lemde.fr/*xiti*"
- "*://*.lemde.fr/*metrics*"
- "*://*.visualrevenue.com/*"
- "*://*.kameleoon.com/*"
- "*://*.cedexis.com/*"
L'arborescence du projet est désormais :
│ .gitignore
│ config.yml
│ filter.yml
│ index.html
│ LICENSE
│ main.js
│ package.json
│ README.md
│
├───cfg
│ google.css
│ google.js
│ pinterest.css
│ pinterest.js
│ twitter.css
│ twitter.js
│
└───node_modules
Ajouter au fichier main.js :
let path = require('path');
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL(path.join('file://', __dirname, '/index.html'));
let filter = yaml.safeLoad(fs.readFileSync('filter.yml', 'utf8')); //lit la liste des match patterns
let ses = mainWindow.webContents.session;
ses.webRequest.onBeforeRequest({urls: filter}, function(details, callback) { //enregistrement de l'écouteur d'évènements
callback({cancel : true}); //annule la requête
});
git add -A
git commit -m "article 4"
git push
Le prochain article traitera de l'amélioration de l'interface utilisateur à l'aide de Bootstrap.