ChangeDetection.io : un outil de veille pour surveiller les changements sur les pages web

I. Présentation

ChangeDetection.io est une solution open source permettant de surveiller automatiquement les modifications apportées à des pages web et de recevoir des alertes (notifications) en cas de changement.

La solution ChangeDetection s'appuie sur l'approche suivante : il "visite" les sites à votre place à des intervalles définis, compare la version actuelle avec la précédente, et vous notifie en cas de différence (ajout, suppression ou modification de texte). Il détecte les changements, comme son nom l'indique.

Avant de passer à la technique, nous allons évoquer des scénarios où l'outil ChangeDetection.io se révèle pertinent. Il peut couvrir des besoins variés, que ce soit à titre personnel ou professionnel, y compris pour réaliser une veille IT.

• Surveillance d'un site web (Defacement) : pour un webmaster, être alerté dès que le contenu de sa page d'accueil change de manière inattendue peut être le signe d'une compromission (défiguration / defacement). ChangeDetection permet d'agir rapidement en cas d'intrusion visible. Cela peut être utile pour votre blog, le site de votre entreprise ou encore le site de vos clients si on se place dans le cas d'une agence web.
• Suivi de versions logicielles : de nombreux éditeurs publient leurs mises à jour sur des pages statiques ou des dépôts GitHub. Cela vous permet de suivre facilement la sortie d'une nouvelle version d'un logiciel, d'un OS, d'un firmware ou encore d'un pilote.
• Conformité et Légal : les entreprises peuvent surveiller les modifications des Conditions Générales d'Utilisation (CGU) ou des politiques de confidentialité de leurs partenaires ou concurrents.
• Veille concurrentielle et commerciale (ou pour vos achats perso) : suivre l'évolution des prix sur un site e-commerce, ou être notifié du retour en stock d'un matériel informatique spécifique (mémoire vive, serveurs, accessoires, etc.).
• Veille générale : suivre la mise à jour de n'importe quelle page sur le web (la mise à jour d'un article, l'ajout d'un article sur un blog, etc.).

ChangeDetection offre un bon complément aux flux RSS, notamment lorsque vous devez surveiller une page où il n'y a pas ce type de mécanisme. Surtout, il offre plus de précision et de flexibilité dans le suivi des modifications, tout en intégrant cette notion d'historique.

III. Installation de ChangeDetection avec Docker

Pour ce tutoriel, nous utiliserons Docker et Docker Compose. Pour installer ChangeDetection, vous pouvez utiliser 1 ou 2 conteneurs. Je m'explique.

Avec un seul conteneur Docker, ChangeDetection sera capable d'analyser les pages web de façon basique (code brut). Avec deux conteneurs, nous pouvons greffer un navigateur "Playwright" (ici via le service sockpuppetbrowser), ce qui permet de simuler l'exécution d'un navigateur et donc d'interagir avec les pages web de façon automatique (très utile pour les sites dynamiques).

A. Créer le dossier du projet

Comme à chaque fois, nous allons créer un dossier dédié à ce projet dans le répertoire /opt/docker-compose/. Connectez-vous à votre serveur en SSH et exécutez la commande suivante pour créer l'arborescence :

mkdir -p /opt/docker-compose/changedetection/data

Cette commande crée le dossier parent ainsi que le sous-dossier data qui accueillera les données persistantes de l'application (son "datastore").

B. Le fichier Docker Compose

Maintenant, nous allons créer le fichier Docker Compose pour déclarer les conteneurs et personnaliser leur configuration.

Placez-vous dans le répertoire racine du projet :

cd /opt/docker-compose/changedetection

Créez ensuite le fichier docker-compose.yml :

nano docker-compose.yml

Insérez le code suivant, qui définit les deux services nécessaires : l'application principale et le navigateur.

services:
  changedetection:
    image: ghcr.io/dgtlmoon/changedetection.io
    container_name: changedetection
    hostname: changedetection
    volumes:
      - ./data:/datastore
    ports:
      - 5000:5000
    environment:
      - PLAYWRIGHT_DRIVER_URL=ws://changedetection-browser:3000
      - PLAYWRIGHT_CONNECT_TIMEOUT=120000
      - PLAYWRIGHT_NAVIGATION_TIMEOUT=120000
      - PLAYWRIGHT_SKIP_BROWSER_INITIALIZATION=true
      - BASE_URL=https://changedetection.it-connectlab.fr
      - HIDE_REFERER=true
      - MINIMUM_SECONDS_RECHECK_TIME=3
      - TZ=Europe/Paris
    restart: unless-stopped
    depends_on:
      changedetection-browser:
        condition: service_started

  changedetection-browser:
    hostname: changedetection-browser
    container_name: changedetection-browser
    image: dgtlmoon/sockpuppetbrowser:latest
    restart: unless-stopped
    environment:
      - SCREEN_WIDTH=1920
      - SCREEN_HEIGHT=1024
      - SCREEN_DEPTH=16
      - MAX_CONCURRENT_CHROME_PROCESSES=6

Ce fichier définit deux conteneurs qui communiquent entre eux. Voici des explications techniques pour vous aider à mieux appréhender le contenu de ce fichier. Sur le principe, vous pouvez effectuer une seule modification : la BASE_URL, en spécifiant l'URL vers votre application (il sera repris pour les notifications).

• Service changedetection : c'est le cœur de l'application
  • volumes : nous montons le dossier local ./data (créé précédemment) vers /datastore dans le conteneur. C'est ici que sont stockées vos définitions de surveillance et l'historique des données.
  • PLAYWRIGHT_DRIVER_URL : cette variable indique à ChangeDetection d'utiliser le service changedetection-browser pour charger les pages en mode interactif.
  • TZ=Europe/Paris : définit le fuseau horaire pour que les journaux et les planifications correspondent à votre heure locale.
  • ports : l'application sera accessible sur le port 5000 de l'hôte Docker.
• Service changedetection-browser : c'est une instance de navigateur Chrome pilotable par ChangeDetection.
  • image: dgtlmoon/sockpuppetbrowser : une image Docker optimisée contenant un navigateur Chromium prêt à être piloté par Playwright.
  • MAX_CONCURRENT_CHROME_PROCESSES : limite le nombre d'onglets ouverts simultanément pour éviter de saturer la RAM de votre serveur. En effet, le mode Playwright est gourmand en ressources, mais il présente un réel intérêt pour être plus pertinent dans la détection des changements.

Pour rédiger ce fichier Docker Compose, je me suis appuyé sur le modèle disponible sur le GitHub du projet. Pour l'intégration du navigateur, j'ai aussi tenté avec une autre image, celle de BrowserLess (browserless/chrome), mais j'ai eu beaucoup de bugs et d'instabilités.

Quand c'est bon pour vous, sauvegardez.

C. Lancer le projet

Une fois le fichier sauvegardé, initiez le téléchargement des images et le démarrage des conteneurs avec la commande suivante :

docker compose up -d

Docker va télécharger les images nécessaires (cela peut prendre quelques instants selon votre connexion) et démarrer les services en arrière-plan.

D. Accéder à l'interface

Une fois les conteneurs exécutés, vous pouvez désormais accéder à l'interface web de ChangeDetection via votre navigateur : http://<IP hôte Docker>:5000.

Si cela ne fonctionne pas, vérifiez que les conteneurs sont bien en cours d'exécution et consultez les journaux de ces derniers.

docker ps

docker logs changedetection -f --tail 100
docker logs changedetection-browser -f --tail 100

E. Découverte de l'interface

Vous devriez arriver sur l'interface visible ci-dessous. Par défaut, il y a déjà deux éléments dans la liste des trackings. Pour ajouter une nouvelle surveillance, vous n'avez qu'à coller l'URL dans la zone de saisie blanche, puis cliquez sur "Watch" ou "Edit > Watch" pour personnaliser le tracking (souvent nécessaire pour affiner).

Plusieurs boutons disponibles dans le menu :

• GROUPS : vos groupes / tags pour organiser vos surveillances,
• SETTINGS : les paramètres globaux de l'application,
• IMPORT : pour importer en masse des URL, y compris via un fichier Excel,
• BACKUPS : pour créer une sauvegarde de la configuration.

Vous pouvez commencer par sélectionner les deux entrées intégrées par défaut pour les supprimer (bouton "Delete"). L'occasion de constater qu'il est possible d'effectuer des actions en masse sur vos éléments. À tout moment, vous pouvez mettre en pause la surveillance sur un ou plusieurs éléments, ou simplement arrêter les notifications tout en poursuivant le tracking.

Vous l'avez probablement constaté : l'accès à l'interface de ChangeDetection n'est pas protégé par mot de passe. Pour protéger votre instance, vous pouvez accéder aux paramètres pour définir un mot de passe dans l'onglet "General". Il sera demandé à chaque accès à l'outil. Sinon, vous pouvez imaginer une authentification en frontal avec une solution comme Authentik ou Tinyauth.

Sur cette même page, il y a un autre paramètre intéressant nommé "Time Between Check". Il détermine l'intervalle de vérification par défaut pour tous vos éléments. Ici, j'ai spécifié 1 heure, cela veut dire que toutes les heures, ChangeDetection va requêter les URL surveillées pour voir s'il y a eu un changement.

IV. Configuration d'une première surveillance

L'interface de ChangeDetection est épurée, mais il y a tout de même beaucoup de paramètres. Pour commencer à surveiller une page, c'est simple, mais parfois, il faut apporter des ajustements à la configuration. Il est important de comprendre que du point de vue des sites visités, nous pouvons être vus comme un bot, donc il faut essayer de se comporter comme un bot respectueux (donc sur un site tiers, on ne check pas toutes les minutes, par exemple). Cela veut dire que, parfois, il faut ajuster la configuration pour tenter de se faire passer pour un visiteur normal.

Note : il y a des sites où la surveillance est très difficile à cause des contrôles anti-bots, comme par exemple Amazon.

Pour cet exemple, nous allons surveiller la publication de nouveaux pilotes pour un serveur Dell PowerEdge R630. Cela signifie que nous allons cibler cette page : www.dell.com/support/product-details/fr-fr/product/poweredge-r360/drivers. Via cette URL, nous arrivons directement sur la liste des pilotes : il n'y a pas de pop-up à fermer ou d'étapes supplémentaires à effectuer (parfois un clic sur un élément est nécessaire et l'URL ne change pas pour autant, ce qui implique des étapes supplémentaires).

Sur la page d'accueil de ChangeDetection, un champ de saisie vous invite à entrer une URL. Saisissez l'adresse du site précisée ci-dessus, puis cliquez sur "Edit > Watch" pour personnaliser l'ajout. Vous pouvez aussi ajouter et personnaliser dans un second temps, et même à tout moment.

On remarque deux options :

• Re-stock & Price detection for pages with a SINGLE product : c'est l'option à utiliser si vous souhaitez traquer les changements de prix sur un produit ou suivre le retour en stock d'un produit dont vous attendez la disponibilité.
• Webpage Text/HTML, JSON and PDF changes : pour les changements généraux sur les pages web et documents accessibles via le Web.

Dans l'onglet "General" de l'édition d'une surveillance, vous pouvez définir plusieurs paramètres :

• Group tag : un nom de groupe, que vous pouvez associer à plusieurs pages surveillées pour les regrouper (navigation par onglets dans la page d'accueil).
• Title : le nom de l'élément dans la liste de vos URL surveillées (par défaut, si c'est laissé vide, le titre de la page web est repris).
• Time Between Check : vous pouvez personnaliser l'intervalle de vérification de cette page. Nous avons mis 1 heure dans les paramètres généraux de l'application, mais ici une vérification quotidienne unique peut suffire. Si un intervalle est précisé au niveau de l'élément, ce sera prioritaire.

Basculez ensuite sur l'onglet "Request". Par défaut, chaque élément aura la valeur "System settings default", soit la valeur définie dans la configuration globale. Autrement dit, par défaut le mode sans Playwright, donc "Basic fast Plaintext/HTTP Client". Sur les pages dynamiques, il vaut mieux utiliser le mode "Playwright Chromium/JavaScript", via notre conteneur dédié. C'est plus efficace, mais aussi plus gourmand en ressources. Pour utiliser ce mode par défaut, modifiez dans les paramètres de l'application.

Cliquez ensuite sur le bouton "Show advanced options".

Vous pouvez exécuter du code JavaScript en amont, et même ajuster les en-têtes (headers) HTTP de la requête. Vous pouvez jouer notamment sur le User-Agent pour tenter de vous faire passer par un navigateur lambda. Ici, j'ai repris le User-Agent de Google Chrome sur Windows. Recherchez simplement my user-agent sur Google et vous aurez votre valeur. L'ajout de ces instructions m'a permis de contourner certains contrôles anti-bot.

Vous pouvez parcourir les autres onglets, rien que par curiosité. Cliquez ensuite sur "Save". Change Detection va commencer la surveillance.

Sur la page d'accueil, il y a 2 colonnes importantes :

• Last checked : de quand date la dernière vérification,
• Last changed : de quand date la dernière modification

Si un changement a été détecté, vous pouvez recevoir les détails par notifications (un e-mail, par exemple) ou directement via la page web, avec le bouton "History".

Change Detection met en évidence les changements : en rouge, ce qui a été supprimé, et en vert, ce qui a été ajouté. Ci-dessous, un exemple. On voit que Dell a ajouté 2 pilotes sur cette page ! Sans cet outil ou un équivalent, difficile de s'en apercevoir de façon aussi réactive (à moins de s'ennuyer énormément).

L'onglet "Screenshot" montre une photo de la page au moment du dernier changement détecté. Pour le moment, cet onglet ne met pas en évidence les changements, puisque la comparaison est au niveau texte.

V. Browser Steps

Parfois, cibler une URL ne suffit pas pour surveiller une information bien précise. Il peut y avoir une pop-up à fermer, ou encore un bouton sur lequel il faut cliquer, sans que cela change l'URL. C'est là qu'entre en action la fonction "Browser Steps" de Change Detection.

Vous pouvez simuler des actions, comme cliquer sur un bouton, attendre qu'un texte spécifique soit visible (utile pour attendre le chargement complet d'une page) ou encore cliquer sur un élément spécifique de la page. L'idée : atteindre l'état attendu pour que Change Detection effectue le suivi.

Voici un exemple de tableau de bord Change Detection avec un ensemble de vérifications diverses et variées (y compris des suivis de prix). Quand il y a le logo de "Chrome", c'est que le mode Playwright est utilisé, et quand il y a un chemin en zigzag, c'est que le mode "Browser Steps" est actif.

Ici, on peut constater un échec sur une vérification Amazon : c'est très compliqué de cibler Amazon, tout est fait pour que cela ne fonctionne pas (Timeout, ici). L'autre erreur, c'est un accès refusé sur une page du ministère de l'Intérieur dédiée au communiqué de presse que je désirais suivre dans le cadre de ma veille : elle doit me détecter comme un bot, pourtant sur une autre instance que j'utilise, cela passe bien.

L'intérêt de l'outil réside dans sa capacité à vous prévenir sans que vous ayez à consulter le tableau de bord. ChangeDetection intègre la bibliothèque Apprise, qui supporte près de 80 services de notification (Discord, Slack, Email, Telegram, Microsoft Teams, SMS, etc.). Vous pouvez configurer les notifications au niveau global ou au sein de chaque URL.

Si vous envisagez d'utiliser les notifications par e-mail via Gmail (Google) et un mot de passe d'application, voici un exemple :

mailtos://[email protected]&[email protected]&pass=MOT DE PASSE APP

Le format des notifications est personnalisable. Par défaut, vous aurez l'URL concernée et un aperçu de la modification, par exemple :

Enfin, dans la section "Fetcher" des paramètres, vous avez une option très intéressante : "Random jitter seconds ± check". Si vous avez 50 vérifications à effectuer, toutes les heures, votre serveur risque de s'écrouler : le jitter permet d'ajouter une part d'aléatoire, de plus ou moins X secondes. Ainsi, toutes les vérifications ne seront pas lancées en même temps.

VI. Conclusion

Que ce soit pour des besoins personnels ou dans un contexte professionnel, ChangeDetection est une solution pertinente pour automatiser la veille au sens large. Ce type de fonctionnalité, que l'on pourrait qualifier de Tracking Web, est également proposé par certains lecteurs de flux RSS premiums, comme Inoreader.

Comme nous l'avons vu, ChangeDetection est compatible avec l'auto-hébergement, bien qu'une offre SaaS soit aussi proposée par les développeurs de la solution. Pour aller plus loin, vous pouvez aussi explorer l'API de ChangeDetection et je vous invite à regarder ma vidéo pour avoir des exemples et explications supplémentaires.

FAQ sur ChangeDetection