A la découverte des applications Web :
comprendre HTTP et les échanges avec d'un serveur

Objectifs: Ce TP a pour but de vous familiariser avec les outils de développement du navigateur pour observer les échanges HTTP entre une page et un serveur.

Documentations sur les outils de développement réseau de Chrome et Firefox

1. Observation des échanges HTTP avec les outils de développement du navigateur

Deux applications permettant d’effectuer des questionnaires en ligne ont été déployées sur le serveur lig-tdcge.imag.fr sous les noms QCM1 et QCM2. Vous pouvez les utiliser depuis les urls https://lig-tdcge.imag.fr/QCM1/ et https://lig-tdcge.imag.fr/QCM2/.

Du point de vue de l'utilisateur, ces deux applications ont le même comportement. Cependant elles sont différentes dans la manière dont les réponses sont gérées :

  • Dans l'une des deux applications les réponses proposées par l'utilisateur sont transmises à un programmme côté serveur qui se charge de leur évaluation.

  • Dans l'autre les réponses proposées par l'utilisateur sont évaluées côté client sans échange avec le serveur.

Question 1 : En utilisant les outils de développement web de votre navigateur (en particulier les outils réseau), déterminez laquelle des deux applications QCM1 ou QCM2 effectue le traitement des réponses côté serveur et laquelle effectue ce traitement côté client.

Question 2 : Dans cette question vous allez étudier plus finement les échanges entre le client et le serveur.

Avant tout chose fermez les éventuels onglets que vous avez utilisé pour accéder à QCM1 et QCM2 et effacez les cookies et données sites (données en cache) stockées par votre navigateur. La vidéo ci-dessous vous montre comment procéder avec le navigateur Firefox.

Effacement des données de cookies et du cache de Firefox

Ensuite connectez vous à l'application effectuant les traitements côté serveur, et étudiez de manière détaillée les requêtes et réponses HTTP lors des échanges entre le client et le serveur.

A chacun des échanges entre le client et le serveur tels qu'indiqués sur la figure ci-dessous il s'agit d'indiquer ce qu’envoie le client, ce que retourne le serveur et quelles sont les informations stockées localement par le navigateur.

Echanges HTTP entre le client et le serveur

Question 3 : Lorsque l'utilisateur soumet au serveur ses réponses à une question que renvoie le serveur ? A votre avis comment la réponse du serveur est-elle traitée côté client ?

Question 4 : Recommencez le quiz mais avant de soumettre votre réponse effacez tous les cookies du domaine .imag.fr. Que se passe-t-il alors lorsque votre réponse est envoyée au serveur ? A votre avis pourquoi ce cookie était-il nécessaire, à quoi aurait-il pu servir si l'application avait été plus complète ?

Question 5 : D’après vous quel sont les défauts que l’on peut reprocher à l’application effectuant les traitements des réponses côté client ?

2. Negociation de contenu

2.1 Documentation du serveur Apache HTTP

Le logiciel libre Apache HTTP Server (Apache) est un serveur HTTP créé et maintenu au sein de la fondation Apache. C'est l'un des serveurs HTTP le plus populaire du World Wide Web. Il est distribué selon les termes de la licence Apache.

La documentation du serveur apache est disponible à l'url https://httpd.apache.org/docs/2.4/ dans plusieurs langues.

Documentation d'Apache.

Lorsque vous tapez cette url dans votre navigateur, le serveur web d'apache vous fourni la documentation dans la langue qui correspond aux préférences de votre navigateur (par défaut c'est la langue de votre système). Il est possible de la changer comme le montre la vidéo ci-dessous (pour Firefox).

Choix de la langue préférée pour l'affichage des pages dans Firefox

  1. Chargez la page de documentation d'd'Apache HTTP Server, dans quelle langue s'affiche-t-elle ?

  2. Modifiez la langue préférée pour l'affichage des pages dans votre navigateur (en choissant bien entendu l'une des langues disponibles por la documentation d'Apache HTTP Server

  3. Rechargez la page documentation d'apache est vérifiez qu'elle s'affiche bien dans la langue que vous avez choisie

  4. En utilisant les outils de développement web de votre navigateur (en particulier les outils réseau), déterminez comment la requête HTTP pour charger la page transmet vos préférences de langue au serveur.

2.2 Redirection HTTP

"DBpedia est un projet universitaire et communautaire d'exploration et extraction automatiques de données dérivées de Wikipédia. Son principe est de proposer une version structurée et sous forme de données normalisées au format du web sémantique 'format RDF Resources Description Framework) des contenus encyclopédiques de chaque fiche encyclopédique. DBpedia vise aussi à relier à Wikipédia (et inversement) des ensembles d'autres données ouvertes provenant du Web des données." (http://fr.wikipedia.org/wiki/DBpedia)

A chaque page Wikipedia dont l'URL est de la forme https://en.wikipedia.org/wiki/XXXXcorrespond une ressource DBpedia dont l'URI est http://dbpedia.org/resource/XXXX où XXXX désigne le sujet de la page. Par exemple, à la page consacrée à Grenoble (https://en.wikipedia.org/wiki/Grenoble) correspond la ressource http://dbpedia.org/resource/Grenoble.

  1. Tapez l'url http://dbpedia.org/resource/Grenoble dans la barre d'adresse de votre navigateur. Vous devez avoir l'affichage suivant :

    Affichage de la ressource http://dbpedia.org/resource/Grenoble dans un navigateur

  2. Observez l'url présente dans la barre d'adresse de votre navigateur et constatez qu'elle n'est plus la même que celle que vous avez tapée. En utilisant les outils de développement web de votre navigateur (en particulier les outils réseau), pouvez vous expliquer ce qui s'est passé.

  3. Essayez de renvoyer la requête en remplaçant dans l'en-tête Accept le type MIME text/html par text/turtle, Turtle est un format textuel pour les données RDF (RDF : Resource Description Framework). Que se passe-t'il ? Vers quelle URL votre votre requête est-elle redirigée ?

    Pour renvoyer éditer et renvoyer une requête avec Firefox, consulter la page Edit and resend faulty network requests to debug them et plus précismeent le paragraphe Using Firefox's Edit and Resend feature de Patrick Brosset.