¶ Exercice 1 - Analyse HTTP depuis le navigateur
Dans cet exercice, on s'intéresse à l'analyse des requêtes HTTP lors d'une connexion à un site web.
L'ensemble des réponses aux questions est à écrire à la fin du document de cours.
Question 1 - Depuis le navigateur Firefox, ouvrir une fenêtre de navigation privée.
Question 2 - Ouvrir l'inspecteur des éléments de la page en faisant Clic-droit > Inspecter. Cliquer ensuite sur l'onglet « Réseau ».
Cet onglet permet d'afficher l'ensemble des requêtes HTTP effectuées pour récupérer toutes les ressources nécessaires à l'affichage de la page.
Question 3 - Dans notre cas, nous n'utiliserons pas le cache du navigateur. Cocher la case « Désactiver le cache »
Question 4 - Se rendre sur le site suivant : https://snt.mabriez.fr/color/. Normalement, vous devez obtenir 5 requêtes différentes comme sur l'image ci-dessous.
Question 5 - Détailler les 5 requêtes effectuées.
- Donner l'état des requêtes et la signification du code état.
- Donner le type de fichiers récupérés.
- Donner la durée d'exécution de la requête.
On y retrouve 5 requêtes : la première requête est la requête initiale effectuée par l'utilisateur lorsqu'il entre l'adresse du site dans la barre d'adresse.
Les requêtes suivantes sont des requêtes efectuées afin de récupérer des scripts externes.
Question 6 - Cliquer sur la première requête effectuée : color.
Question 7 - En analysant l'entête de la requête, répondre aux questions suivantes :
-
Donner la méthode du protocole HTTP utilisée.
-
Donner l'adresse du serveur.
-
Donner le logiciel serveur web utilisé.
-
Donner le nom de l'User-Agent utilisé.
Question 8 - On souhaite maintenent utiliser le cache du nagivateur. Décocher la case « Désactiver le cache »
Question 9 - Rafraichissez la page. Normalement, l'état du document /color/ est passé à 304.
Question 10 - Donner la signification du code d'état 304. Donner également le rôle du cache.
¶ Exercice 2 - Envoyer des données grâces aux formulaires
Dans cet exercice, on s'intéresse à la construction d'un formulaire afin d'envoyer des données à un serveur. Nous allons simuler le fonctionnement d'une page de connexion à l'aide d'un login et d'un mot de passe.
¶ Étape 1 - Mise en place d'un serveur Flask
Notre serveur sera un serveur applicatif écrit en python grâce au framework Flask. Nous verrons dans la prochaine activités comment construire de genre de serveur. Pour l'instant, nous ne faisons que l'utiliser.
Question 1 - Télécharger le fichier python seveur.py disponible ci-dessous et exécuter-le.
Laisser ce programme lancer en fond sans l'arreter, sinon votre serveur s'éteindra.
Question 2 - Pour tester le bon fonctionnement de votre serveur, connectez-vous à l'adresse http://127.0.0.1:5000/test à l'aide d'un navigateur. Le message « Hello World doit d'afficher »
¶ Étape 2 - Construction d'un formulaire en HTML
Pour notre exercice, on souhaite obtenir une page web, composée d'un formulaire avec les deux champs suivants :
- Un champ « Login » permettant à l'utilisateur d'indiquer son identifiant. L'attribut
namesera défini par la valeurlogin. - Un champ « Mot de passe » permettant à l'utilisateur d'indiquer son mot de passe. L'attribut
namesera défini par la valeurpassword.
Question 3 - Écrire un fichier test-formulaire.html composé d'un titre et d'un formulaire selon les indications données ci-dessus. On définira les attributs du formulaire avec les valeurs suivantes :
method="GET"action="http://127.0.0.1:5000/connexion-get
Vous devez obtenir le résultat suivant :
¶ Étape 3 - Analyse de la méthode GET
Dans un premier temps, on s'intéresse au fonctionnement de la méthode GET.
Question 4 - Ouvrir l'inspecteur des éléments de la page en faisant Clic-droit > Inspecter. Cliquer ensuite sur l'onglet « Réseau ».
Question 5 - Compléter et valider le formulaire. Un message de confirmation de connexion doit d'afficher.
Question 6 - Retrouver l'URL de la requête. Décomposer chaque partie qui compose cette URL.
Question 7 - En déduire la manière dont la méthode GET transmet les informations au serveur.
¶ Étape 4 - Analyse de la méthode POST
On s'intéresse maintenant au fonctionnement de la méthode POST.
Question 8 - Modifier le formulaire HTML afin d'utiliser la méthode POST. Il faut également mettre à jour l'attribut action avec la valeur action=http://127.0.0.1:5000/connexion-post
Question 9 - Ouvrir l'inspecteur des éléments de la page en faisant Clic-droit > Inspecter. Cliquer ensuite sur l'onglet « Réseau ».
Question 10 - Compléter et valider le formulaire. Un message de confirmation de connexion doit d'afficher, cette fois-ci avec la méthode POST.
Question 11 - Retrouver l'URL de la requête. Les données passent-elles toujours par l'URL ?
Question 12 - Regarder dans l'onglet « Charge utile »
Question 13 - En déduire la manière dont la méthode POST transmet les informations au serveur.