WebIHM

Introduction au web et IHM en S2 Licence Informatique UNC

TP1 : DevTools et HTTP avec Wireshark

Ce TP a pour objecticf de vous familiariser avec HTTP, le principal protocole du web, et avec les outils du développeur des navigateurs. La partie HTTP fera écho aux enseignements de réseaux, mais on se concentrera ici sur les couches dites hautes. Les les outils du développeur sont quant à eux absolument incontournables dans le développement Web.

Ouvrir un fichier texte dans lequel vous noterez les réponses aux questions du présent sujet. Des questions sur le TP seront posées dans le QCM1.

Découverte des outils du développeur DevTools

Cette partie se déroule dans le navigateur avec les outils du développeur (DevTools en anglais). Utilisez soit :

  • Firefox à jour : recommandé, navigateur de référence pour les corrections;
  • Chromium / Chrome à jour : à défaut, fonctionnement quasi identique.

Il est très recommandé de travailler en navigation privée (Ctrl-Shift-P pour Firefox, Ctrl-Shift-N pour Chromium/Chrome). Ouvrez votre navigateur en navitation privée puis ouvrez les outils du développeurs (DevTools, voir Firefox DevTools User Docs) avec la touche F12 et visitez https://perdu.com/.

  • Quelles et la différence entre https://www.chromium.org/Home/ et https://www.google.com/chrome/ ?
  • Le site https://perdu.com/ est sécurisé, il utilise TLS1.3. Où trouvez-vous cette information ? (deux endroits)
  • Où voir la source brute de la page (avec les espaces et indentation tels que transmis par le site web) dans l’onglet Network ?
  • Quel est le raccourci clavier pour voir la même source directement dans un nouvel onglet, sans passer par les DevTools ?
  • Trouvez l’icône et le raccourci permettant d’activer le Responsive Design Mode. A quoi sert ce mode ?
  • Depuis l’onglet Network, en consultant les en-têtes de la requête et de la réponse HTTP, déterminez :
    • la date de dernière modification de la page
    • le nom et la version du navigateur tels qu’envoyés au serveur
    • le type de serveur web qui vous répond
    • si cette page utilise des cookies

Maintenant, toujours avec les DevTools activés, ouvrir https://romulusfr.github.io/unc-s2-web-ihm/ et consultez l’onglet Network des DevTools.

  • Rechargez la page avec Ctrl-R, F5 ou l’icône de la barre de menu. Vous devriez voir un nouveau code de status. Pourquoi ?
  • Rechargez maintenant la page mais cette fois avec Shift-Ctrl-R l’icône de la barre de menu en maintenant la touche Shift enfoncée. Vous devriez voir plus de lignes dans Network et le status a rechangé pour 200. Pourquoi ?
  • Au total, combien de ressources sont téléchargées par votre navigateur quand vous visitez cette page ? Quelle ressource n’est pas disponible ?

Maintenant, utilisez l’onlget Inspector des DevTools pour étudier le contenu HTML

  • En inspectant l’élément head, déterminer quel outil est utilisé pour générer cette page.
  • Donnez le chemin depuis body qui permet d’aller à l’élément h1 qui contient le texte WebIHM
  • Le chemin de l’image du bandeau d’en-tête n’apparait pas dans la source HTML. Pourquoi ? Comment la trouver ?
  • Même question pour les slahes /// devant les titre.
  • Maintenant tapez https://romulusfr.github.io/unc-s2-web-ihm/#programme dans la barre d’URL, vous êtes amenés à un point particulier de la page. Lequel et pourquoi ? Est-ce que la page est rechargée ?
  • Il y a-t’il un élément aside dans la page ?
  • Avec l’inspecteur, supprimez <h2 id="environnement-de-développement">Environnement de développement</h2>. Quelles informations ont étés transmises au serveur avec cette modification ?
  • Similairement, remplacez mon nom dans la liste des intervenants par le votre puis ajoutez une ligne avec un nouvel intervenant.
  • Enfin, sélectionnez la racine html et enregistrez toute la page. Les modifications précédentes sont-elles présentes dans le fichier enregistré ?

Le protocole HTTP avec Wireshark

Environnement de travail

Dans ce TP, vous utiliserez l’analyseur réseau https://www.wireshark.org/. Ce logiciel est installé dans les machines virtuelles et certaines salles de TP. Pour utiliser les machines virtuelles, connectez vous soit :

et ouvrez une instance de la machine virtuelle LICENCE INFO.

ATTENTION à ce jour, tout ce qui est fait sur dans la VM disparait d’une session Horizon à l’autre, sauf ce qui est fait sur votre lecteur personnel.

Deux traces Wireshark sont fournies, téléchargez les :

Analyse de la trace loopback.pcapng

Ouvrez le fichier loopback.pcapng dans Wireshark. Cette trace réseau concerne uniquement la boucle locale, c’est-à-dire l’interface réseau locale d’une machine qui s’adresse à elle même, trafic réseau extérieur.

  • Appliquez le filtre not udp. Que fait ce filtre ?
  • Appliquer maintenant le filtre http puis http.request. Combien il y a-t’il eu de requêtes HTTP ?
  • Qu’est ce que le favicon.ico ?
  • Qu’est ce qui différencie ces requêtes HTTP (un ou deux critères) :
    • la requête 60 de la requête 72 (60 et 72 sont les No. dans la trace Wireshark)
    • la requête 60 de la requête 80
    • la requête 60 de la requête 168
    • la requête 168 de la requête 202
    • la requête 259 de la requête 407
  • Quel navigateur a été utilisé selon vous pour les requêtes 259 et 407 ?
  • Quels autres navigateurs ont été utilisés dans cette trace ? Quelle est la langue de configuration de ces navigateurs ?

On considère maintenant le filtre http.request || http.response :

  • Quel header des réponses indique quel est le serveur qui répond ? Quels sont les différents serveurs web ouverts sur ce serveur ?
  • Quels codes de réponses HTTP sont des erreurs client dans cette trace ? (cf https://developer.mozilla.org/en-US/docs/Web/HTTP/Status). Donner un filtre Wireshark pour les obtenir.
  • On considère la requête 168 et sa réponse. Que contient le document HTML de la réponse ? Chercher dans l’interface de Wireshark une façon de bien voir la réponse HTML.
  • Même question avec la requête numéro 202, puis ensuite enregistrer le fichier HTML correspondant. Donner à partir de là :
    • la version de PhP utilisée
    • l’OS du serveur et le type du processeur
    • le compte avec lequel s’exécute PhP
    • le nom de l’auteur du module Sodium
    • la taille totale de la page

Analyse de la trace enp0s31f6.pcapng

  • Quels sont les sites visités dans cette trace ? Donnez leurs IPs.
  • Visitez la première IP via un navigateur. Que constatez vous ?
  • Enregistrer la page HTML du premier site. Quelles bonnes pratiques HTML ne sont pas respectées ?
  • A quelle heure le deuxième site déclare-t’il être une théière ?
  • A quoi sert le dernier code d’erreur HTTP utilisé dans cette trace ?
  • Dans la réponse 35, visionner l’image en cliquant-droit sur le champs Portable Netwrok Graphics. Quelle est cette image ?