Créer un navigateur personnalisé - 4ème partie

Bloquer les requêtes de suivi/tracking des utilisateurs

Introduction

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 :

• modifier le comportement d'une page internet : Greasemonkey et Stylish
• supprimer les publicités : Adblock ou uBlock
• télécharger des vidéos
• ...

Nous souhaitons :

• une intégration plus cohérente de l'ensemble de ces fonctionnalités à l'instar de Torch
• une interaction simplifiée et plus naturelle entre l'utilisateur et le navigateur à l'instar du projet Ubiquity

Nous utilisons Electron qui mixe le navigateur open source Chromium avec la richesse du framework Node.js.

Objectifs

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/...
• etc

Résumé des articles précédents

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

Filtres

L'évènement onBeforeRequest

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.

Le format YAML

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/*"

Répertoire du projet

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

Le code

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
});

Résultat

Envoyer sur GitHub

git add -A
git commit -m "article 4"
git push

Prochain article

Le prochain article traitera de l'amélioration de l'interface utilisateur à l'aide de Bootstrap.