Le code source d’un site web désigne l’ensemble des fichiers HTML, CSS et JavaScript que le navigateur reçoit et interprète pour afficher une page. Extraire ce code source peut servir à analyser la structure d’une page, auditer le SEO technique ou comprendre le fonctionnement d’un composant précis.
La méthode dépend de ce que l’on cherche : le HTML brut envoyé par le serveur, le DOM modifié par les scripts, ou les ressources associées comme les feuilles de style et les images.
Lire également : Comment améliorer le site web ?
Code source serveur et DOM final : deux réalités distinctes
Quand un navigateur charge une URL, il reçoit d’abord un document HTML initial depuis le serveur. C’est ce fichier qu’affiche la commande classique « Afficher le code source de la page » (raccourci Ctrl+U sur la plupart des navigateurs).
Sur un site statique, ce HTML correspond fidèlement à ce que le visiteur voit. Sur une application moderne construite avec un framework JavaScript, la situation change radicalement. Le HTML initial peut être quasi vide, le contenu réel étant injecté après coup par des scripts côté client.
A voir aussi : Combien dois-je payer pour la conception d’un site Web ?
Le DOM final, celui que l’on consulte via l’onglet « Éléments » des outils de développement, reflète l’état de la page après exécution de tous les scripts. Confondre les deux mène à des conclusions fausses lors d’un audit SEO : les robots d’exploration qui n’exécutent pas JavaScript ne voient que le HTML initial.
Extraire le code source HTML avec les outils du navigateur
Chaque navigateur intègre nativement les fonctions nécessaires pour lire le code source d’une page web. Aucun logiciel tiers n’est requis pour une inspection ponctuelle.
Afficher le code source brut
La méthode la plus directe consiste à préfixer l’URL par view-source: dans la barre d’adresse (par exemple view-source:https://exemple.fr). Le navigateur affiche alors le HTML tel qu’envoyé par le serveur, sans exécution JavaScript. Cette vue permet de vérifier les balises meta, la structure des titres Hn ou la présence de données structurées.
Inspecter le DOM avec les DevTools
Un clic droit puis « Inspecter » ouvre le panneau des outils de développement. L’onglet « Éléments » (ou « Inspecteur » sur Firefox) présente le DOM en temps réel. On peut y modifier temporairement le HTML ou le CSS pour tester un changement visuel sans toucher au serveur.
Deux autres panneaux méritent l’attention :
- Le panneau Network liste toutes les requêtes HTTP effectuées par la page (fichiers CSS, scripts, appels API, images). Il permet de repérer les ressources lourdes ou les requêtes vers des services tiers.
- Le panneau Sources donne accès aux fichiers JavaScript chargés par la page. Lorsque le site publie des source maps, ce panneau peut reconstituer le code original (TypeScript, JSX) à partir du JavaScript minifié.
- La console permet d’exécuter des commandes pour extraire un élément précis du DOM, par exemple
document.querySelectorAll('a')pour lister tous les liens.
Télécharger le code source complet d’un site web
Consulter le code page par page ne suffit pas toujours. Pour une analyse globale ou une sauvegarde, des outils permettent de télécharger l’ensemble des ressources accessibles depuis le navigateur.
Des services en ligne comme Website Downloader créent une archive contenant le HTML, le CSS, le JavaScript et les images d’un site à partir de son URL. L’outil reconstitue l’arborescence des dossiers et convertit les liens absolus en liens relatifs pour permettre une navigation locale hors ligne.
Cette approche ne récupère que les fichiers côté client. Le code serveur (PHP, Python, Ruby), les variables d’environnement, les clés d’API et la logique métier ne transitent jamais par le navigateur. Télécharger un site ne donne donc pas accès à son « vrai » code source au sens développeur du terme, uniquement à ce que le serveur accepte de transmettre publiquement.
Pour les outils en ligne de commande, wget avec l’option mirror ou httrack restent des références pour aspirer un site entier. Ils parcourent les liens internes et téléchargent récursivement chaque page et ses ressources.
Extraction automatisée et cadre légal en France
Automatiser l’extraction du code source ou des données d’un site web (web scraping) soulève des questions juridiques, même lorsque les pages sont publiques.
La CNIL précise que le moissonnage de pages web peut constituer un traitement de données personnelles dès lors que les informations collectées permettent d’identifier une personne. Le simple fait qu’une donnée soit accessible en ligne ne dispense pas du respect du RGPD.
Concrètement, plusieurs conditions encadrent une extraction conforme :
- Définir une finalité précise avant de lancer la collecte, et ne pas aspirer « au cas où ».
- Appliquer le principe de minimisation : ne collecter que les données strictement nécessaires à l’objectif visé.
- Supprimer les données personnelles inutiles dès que possible après extraction.
- Respecter le fichier robots.txt du site cible, qui indique les sections que l’éditeur souhaite exclure de l’exploration automatisée.
Au-delà du RGPD, les conditions générales d’utilisation du site peuvent interdire explicitement le scraping. Extraire du contenu protégé par le droit d’auteur pour le republier expose à des poursuites indépendantes de la question des données personnelles.
Source maps : lire le code original derrière la minification
Les fichiers JavaScript et CSS publiés en production sont généralement minifiés (noms de variables raccourcis, espaces supprimés, code fusionné). Cette optimisation rend le code quasi illisible pour un humain.
Les source maps sont des fichiers de correspondance (.map) qui relient chaque ligne du code minifié à sa position dans le code source original. Quand un site les publie, les DevTools du navigateur affichent automatiquement le code tel qu’il a été écrit, par exemple en TypeScript ou en SCSS.
Tous les sites ne publient pas leurs source maps en production. Certains les réservent à l’environnement de développement pour protéger leur propriété intellectuelle. L’absence de source maps ne bloque pas l’inspection du code minifié, mais la rend nettement plus laborieuse.
Extraire le code source d’un site reste une opération accessible à tout utilisateur disposant d’un navigateur. La difficulté réside moins dans la technique que dans la compréhension de ce que l’on obtient réellement : du HTML initial, un DOM transformé ou des ressources statiques, chaque couche livre une information différente.
