N.NOTKOKO // HACK
COURS 04 / 18

Voir ce que le navigateur reçoit

Une page contient davantage que son affichage. Apprends à observer le HTML, les scripts et les échanges réseau.

Code sourceDevToolsRéseau
01 // COMPRENDRE

Source et page vivante

Le code source affiche le HTML livré initialement. L’onglet Éléments montre le DOM, c’est-à-dire la structure courante, éventuellement modifiée par JavaScript. Ouvre les outils développeur depuis le menu du navigateur ou avec F12 selon ton clavier. Inspecter un élément permet de relier un bouton visible à son balisage. Modifier le DOM localement ne change pas les droits accordés par le serveur.

02 // COMPRENDRE

Observer une action

Ouvre l’onglet Réseau avant de recharger. Active la conservation du journal si une navigation efface les requêtes. Effectue une seule action, puis inspecte les entrées Fetch/XHR : URL, méthode, paramètres, corps envoyé et réponse. Une page qui affiche peu de données peut avoir reçu un objet JSON plus complet. Les scripts chargés peuvent montrer des routes ; une route trouvée doit encore être comprise et vérifiée.

03 // COMPRENDRE

Reconnaître une information publique

Un commentaire HTML est envoyé au client même s’il ne s’affiche pas. Un attribut hidden masque un élément visuellement sans le rendre secret. robots.txt contient des consignes pour les robots d’indexation, pas un contrôle d’accès. Une ressource privée exige une vérification côté serveur.

EXEMPLE PÉDAGOGIQUE
<!-- Note de démo : documentation dans /docs/ -->
<a href="/catalogue" hidden>Catalogue</a>
Comment le lire

Ces deux informations sont lisibles dans le HTML. Elles ne prouvent ni une faille ni un accès privé. Elles indiquent simplement ce qui a été transmis au navigateur.

04 // À TOI DE RÉFLÉCHIR

Vérifie que tu as compris.

3 questions pour mettre les idées en pratique. Réponds avec tes mots, puis vérifie chaque réponse.

La correction repère les notions attendues et certaines formulations proches. Elle reste indicative : lis aussi l’explication. Tes réponses restent dans cette page et ne sont pas enregistrées.

QUESTION 1 / 3

Une réponse courte et expliquée suffit.0 / 1200

À toi de répondre

Corrigé détaillé — question 1

Le code source montre le HTML initialement reçu. Le DOM reflète la structure courante après les changements éventuels de JavaScript et du navigateur.

Exemple de réponse

La source est le HTML initial, le DOM est la structure courante modifiée par JavaScript.

QUESTION 2 / 3

Une réponse courte et expliquée suffit.0 / 1200

À toi de répondre

Corrigé détaillé — question 2

Ouvre Réseau avant l’action, puis sélectionne la requête correspondante, souvent dans Fetch/XHR. Lis méthode, URL, données envoyées et réponse pour comprendre ce qui s’est passé.

Exemple de réponse

Dans Réseau, je sélectionne la requête puis sa réponse.

QUESTION 3 / 3

Une réponse courte et expliquée suffit.0 / 1200

À toi de répondre

Corrigé détaillé — question 3

La modification du DOM touche seulement l’interface locale. Le serveur doit vérifier les droits pour chaque opération, même si le bouton est visible.

Exemple de réponse

Cela modifie seulement mon affichage local, les droits sont vérifiés par le serveur.

05 // À RETENIR

Observe à la fois la page, la requête et la réponse.