INSPECTER
// ce que la page cache — HTML, CSS, éléments invisibles
H.A.L. — Ce que tu vois dans le navigateur n'est pas la réalité.
C'est une représentation. Derrière, il y a du code.
L'inspecteur te montre ce code. En direct. Modifiable.
Cette page contient des éléments faits pour être observés — et certains pour être trouvés.
C'est une représentation. Derrière, il y a du code.
L'inspecteur te montre ce code. En direct. Modifiable.
Cette page contient des éléments faits pour être observés — et certains pour être trouvés.
// étape 01
OUVRIR L'INSPECTEUR
Appuie sur F12. Clique sur l'onglet Elements (ou Inspecteur sur Firefox).
Tu vois l'arbre HTML de la page — chaque élément, chaque balise, chaque attribut.
Autre méthode : clic droit sur n'importe quel élément de la page → Inspecter.
L'inspecteur s'ouvre directement sur cet élément.
Tu vois l'arbre HTML de la page — chaque élément, chaque balise, chaque attribut.
Autre méthode : clic droit sur n'importe quel élément de la page → Inspecter.
L'inspecteur s'ouvre directement sur cet élément.
// étape 02
HTML — LA STRUCTURE
HTML est le squelette d'une page web. Il définit ce qu'il y a — pas comment ça ressemble.
Chaque élément est une balise : une ouvrante, une fermante, du contenu entre les deux.
Chaque élément est une balise : une ouvrante, une fermante, du contenu entre les deux.
<h1>Un titre</h1>
<p>Un paragraphe de texte.</p>
<div id="monElement">Un bloc quelconque.</div>
<!-- Un commentaire — visible dans le source, invisible à l'écran -->
// éléments à inspecter sur cette page
H.A.L. // SYSTÈME EN LIGNE
Ce texte a un identifiant. Trouve-le dans l'inspecteur.
// H.A.L. // bien vu. flag{1nsp3ct0r_g4dg3t}
Dans l'inspecteur, double-clique sur n'importe quel texte pour le modifier en direct. Rien n'est permanent — recharge la page.
// étape 03
CSS — L'APPARENCE
Le CSS définit comment les éléments HTML ressemblent.
Couleurs, polices, tailles, marges — et aussi ce qui est visible ou caché.
Couleurs, polices, tailles, marges — et aussi ce qui est visible ou caché.
/* Cacher un élément */
#monElement { display: none; }
/* Le rendre visible */
#monElement { display: block; }
Dans l'onglet Elements, clique sur un élément. À droite tu vois ses styles CSS.
Tu peux cocher / décocher chaque propriété pour voir l'effet en direct.
Cherche
Tu peux cocher / décocher chaque propriété pour voir l'effet en direct.
Cherche
display: none — ça cache des choses.
Sur cette page, un élément est caché avec display:none. Il est visible dans l'inspecteur.
// étape 04
LE CODE SOURCE COMPLET
L'inspecteur montre le DOM en direct — il peut avoir été modifié par JavaScript.
Pour voir le code source tel que le serveur l'a envoyé : CTRL+U.
Pour voir le code source tel que le serveur l'a envoyé : CTRL+U.
/* Raccourci */
CTRL+U → code source original
CTRL+F → chercher dans le source
Ce que tu vois à l'écran ≠ ce que le serveur a envoyé ≠ ce que l'inspecteur montre.
Trois niveaux différents. Chacun cache des choses que les autres ne montrent pas.
Trois niveaux différents. Chacun cache des choses que les autres ne montrent pas.
Indice : le challenge 02 de ce CTF demande exactement ça.
"Tu sais maintenant regarder derrière ce que le navigateur te montre.
La prochaine étape : comprendre ce qui circule entre ton navigateur et le serveur."
— H.A.L. // système en ligne
La prochaine étape : comprendre ce qui circule entre ton navigateur et le serveur."
— H.A.L. // système en ligne
// tu as trouvé un flag ?