Les outils de développement sont une fonctionnalité intégrée dans tous les navigateurs principaux, sans nécessiter l'installation d'extensions. Il suffit d'appuyer sur F12 ou de faire un clic droit sur la page et de sélectionner 'Inspecter' pour les ouvrir. À l'origine, il s'agit d'outils conçus pour les développeurs web, mais ils offrent également une perspective d'observation très directe à quiconque souhaite comprendre ce qui se passe derrière les pages web.
Panneau Elements : voir la vraie structure de la page
Lorsque l'outil de développement est ouvert, le panneau Elements est généralement affiché par défaut, montrant la structure HTML de la page. Chaque élément que vous voyez sur la page, texte, images, boutons, formulaires, correspond à une section de code HTML ici. En cliquant sur l'icône du pointeur dans le coin supérieur gauche du panneau et en survolant n'importe quel élément sur la page, l'outil de développement sautera automatiquement à la position HTML correspondante. Cette fonctionnalité a plusieurs utilisations pratiques : Voir les éléments de page cachés Certains sites cachent certains contenus, comme des textes explicatifs repliés, des champs de formulaire cachés, ou des messages qui n'apparaissent que sous certaines conditions. Ces contenus peuvent être vus dans le panneau Elements, même s'ils ne sont pas visibles sur la page. Vérifier le véritable lien cible En trouvant le code HTML correspondant à un bouton ou un lien dans le panneau Elements, vous pouvez voir l'URL vers laquelle il pointe réellement, confirmant si elle correspond au texte affiché. Ceci est très utile pour juger des liens suspects.
Panneau Network : surveiller les serveurs vers lesquels la page envoie des données
Le panneau Network est l'une des parties les plus précieuses de l'outil de développement pour l'analyse de cybersécurité. Après avoir ouvert le panneau Network et rechargé la page, il affichera toutes les requêtes réseau émises par la page pendant le chargement, y compris l'URL cible des requêtes, le contenu des données envoyées, la réponse du serveur, et le temps pris pour chaque requête. À quoi ça peut servir : Vérifier quels noms de domaine tiers un site a contactés pour confirmer s'il y a des cibles de transfert de données inattendues. Un site d'actualités ordinaire peut faire des demandes à des dizaines de serveurs de publicité et de suivi, totalement invisibles pendant la navigation normale. Confirmer la cible pour la soumission de formulaires. Lorsque vous remplissez un formulaire sur une page et appuyez sur envoyer, le panneau Network montrera où ces données ont réellement été envoyées, ce qui peut être utilisé pour vérifier si un site prétendument officiel envoi vraiment des données vers son serveur.
Panneau Console : observer les erreurs et messages d'exécution de la page
Le panneau Console affiche l'historique d'exécution JavaScript de la page, y compris les messages d'erreur, les avertissements, et les sorties de débogage que le développeur a écrites dans le code. Pour un utilisateur ordinaire, l'utilisation la plus directe de la Console est d'observer si la page présente des erreurs anormales et s'il y a des scripts externes inconnus en cours d'exécution. Dans la ligne d'entrée de la Console, il est possible d'entrer des directives JavaScript à exécuter directement sur la page actuelle. Cette fonctionnalité permet aux développeurs de tester rapidement leur code, mais c'est également un point d'entrée pour des attaques d'ingénierie sociale. Certaines escroqueries demandent aux utilisateurs de copier et coller un certain code dans la Console, prétendant que cela peut accomplir une tâche, mais il s'agit en réalité d'exécuter des commandes malveillantes. Dans tous les cas, il ne faut jamais coller de code fourni par une source inconnue dans la Console.
Panneau Application : voir les données que le site stocke sur votre appareil
Le panneau Application affiche les données que le site stocke dans votre navigateur, y compris les cookies, LocalStorage et SessionStorage. Vérification des Cookies Dans le menu de gauche du panneau Application, trouvez Cookies, sélectionnez le domaine du site actuel et vous pourrez voir tous les cookies que ce site a définis dans votre navigateur, y compris leur nom, contenu, durée de validité, et s'ils ont la marque HttpOnly ou Secure. Cela vous permet de voir directement quels cookies sont utilisés à des fins de suivi, lesquels sont des identifiants fonctionnels, et la durée de validité de ces cookies.
Utiliser les outils de développement pour déterminer si un site est suspect
Les outils de développement F12 peuvent servir d’outil d'évaluation de la crédibilité d'un site. Voici quelques points d'observation à considérer : Vérifier la cible de soumission des formulaires Sur une page de connexion suspecte, entrez des données d'essai et observez l'URL cible de la soumission du formulaire dans le panneau Network. Si un site prétendant être la page de connexion de Google ou Facebook a une cible de soumission de formulaire qui n’est pas accounts.google.com ou facebook.com, c’est un indicateur clair d’une page de phishing. Vérifier les sources des ressources externes chargées sur la page Dans le panneau Network, vérifiez si les principales ressources chargées sur la page proviennent toutes des domaines officiels revendiqués, ou s'il existe de nombreux domaines tiers non liés. Vérifier les informations du certificat SSL En cliquant sur l'icône de cadenas à côté de la barre d'URL, vous pouvez obtenir des informations sur le certificat SSL de ce site, y compris l'organisme qui l'a délivré, ainsi que la date d'expiration et les informations de domaine. Un véritable site officiel aura typiquement un certificat EV correspondant au nom de
Questions les plus fréquentes sur les outils de développement F12
Est-il légal de voir le code source d'un site avec F12 ?
Consulter le code source frontend de la page web, c'est-à-dire le HTML, CSS et JavaScript que le navigateur a déjà téléchargés sur votre appareil pour rendre la page, est tout à fait légal. Les navigateurs doivent télécharger ces codes pour afficher la page, et F12 vous permet de voir le contenu déjà sur votre appareil. Il est à noter que les tentatives de contourner les restrictions d'accès d'un site à l'aide d'outils de développement, de modifier des requêtes pour obtenir des données non autorisées, ou de tester des sites, peuvent impliquer des problèmes juridiques si elles sont réalisées sans autorisation. Simplement voir et observer ne constitue aucun problème légal.
L'exécution de commandes dans la Console affecte-t-elle le serveur du site ?
Non, cela n'affecte pas directement. Les commandes JavaScript exécutées dans la Console fonctionnent dans votre propre environnement de navigateur, sans effet direct sur le serveur du site. Elles modifient l'état de rendu local de la page dans votre navigateur, qui sera rétabli une fois que vous rechargerez la page. Cependant, si les commandes exécutées impliquent d'envoyer des requêtes au serveur, comme soumettre des formulaires ou déclencher des appels d'API, alors ce ne sont pas seulement des modifications locales. Dans tous les cas, ne pas exécuter des commandes Console provenant de sources inconnues.
Le panneau Network affiche trop de données, comment trouver rapidement des informations utiles ?
Le panneau Network offre plusieurs fonctionnalités de filtrage pour aider à réduire le champ. La barre de filtrage en haut du panneau vous permet d'entrer des mots-clés pour filtrer des requêtes spécifiques, par exemple en entrant une partie du nom de domaine qui vous intéresse, n'affichant que les requêtes connexes. Le filtre de type vous permet de ne voir que les requêtes de type XHR ou Fetch, qui sont souvent des actions de transfert de données en arrière-plan, rendant les requêtes significatives plus faciles à identifier après avoir filtré les images et les styles. Pour ceux qui souhaitent vérifier les cibles de soumission de formulaires, observer les nouvelles requêtes apparaissant dans le panneau Network au moment de la soumission du formulaire peut généralement aider à les trouver rapidement.
Un point clé : Les outils de développement F12 permettent à quiconque de voir les détails techniques sous la surface d'une page Web, de la confirmation des cibles de soumission des formulaires à l'observation des comportements de suivi de la page. C'est un outil d'analyse Web qui peut être utilisé sans aucune formation technique et est l'un des moyens les plus directs d'évaluer des sites Web suspects.