Requêtes HTTP, réponses du serveur
Interactions entre l'homme et la machine sur le Web
Plan
Des requetes différentes
Taper une adresse dans la barre d'adresse de votre navigateur revient à faire une requête. Cette requête demande à un serveur de lui envoyer la page demandée. Voir la section Transmission de données dans un réseau. Protocoles de communication. Architecture d’un réseau pour plus de détails.
Si vous observez attentivement la barre d'adresse de votre navigateur, vous constarez que les adresses n'ont pas toutes le même aspect. Voici quelques exemples:
- http://isnclemenceau.free.fr/ : url d'un site qui mène sur la page index.html (par défaut)
- http://isnclemenceau.free.fr/TrierTable.php#sorted :lien vers la page TrierTable.php et sur l'ancre 'sorted' de cette page.
- http://isnclemenceau.free.fr/coursNsiPremiereMenu.php?nom=jojo&test=onze : lien vers une page et qui passe les paramètres nom et test avec les valeurs jojo et onze.
- https://www.google.com : lien vers une page sécurisés. Le protocole utilisé ne sera pas le même que celui du http.
Paramètres dans URL
Les paramètres dans l'url sont généralement générés par des formulaires, nous étudierons cela plus en détail dans Formulaire d’une page Web.
Pour passer des paramètres dans l'url, il suffit de mettre un point d'interrogation, suivi du nom du paramètre et de sa valeur. Si l'on veut passer plusieurs paramètres on rajoute le symbole &. Attention la longueur des paramètres est limitée.
Nous allons créer deux pages pour illustrer cela. La première page qui va faire la demande avec les paramètres, et la deuximème qui va lire les paramètre et réagir en fonction.Très généralement, la lecture des paramètres se fait côté serveur en php. L'inconvéniant du php c'est qu'il s'execute côté serveur et que l'on est donc obligé soit de publier le site, soit d'avoir un serveur virtuel qui tourne sur le pc. Je vais donc faire l'exemple en javascript puis en php
voici la page qui fait la demande. On va utiliser un lien qui va donc demander la page. Je vous laisse le soin de créer une page html.
<a href="devine.html?prenom=Jojo&nombre=50">Votre réponse: 50</a>
On crée maintenant une page devine.html. Elle va devoir contenir du javascript. N'entrez pas dans les détails de la fonction getUrlVars , elle vous permet de récupérer les paramètres avec la commande getUrlVars()["nom du paramètre"].
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script > function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } </script> </head> <body> <script> var prenom = getUrlVars()["prenom"]; var valeur = getUrlVars()["nombre"]; if (prenom!=undefined && valeur!=undefined) { document.write("<h3>Bonjour "+prenom+"</h3>"); if (valeur!="100"){ document.write("<p>"); document.write("Perdu, vous proposez "+valeur+", il fallait répondre 100") document.write("</p>"); } else { document.write("<p>"); document.write("Bravo, 100 est la bonne réponse"); document.write("</p>"); } } </script> </body> </html>
Pour tester votre page réponse vous pouvez taper directement dans l'url: devine.html?prenom=toto&nombre=10
Voici la version php. Ici pas besoin de créer une fonction pour récupérer les paramètres, cette fonction existe en php, c'est $_GET['nom paramètre'].
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <h3>Bonjour <?php if ($_GET['nombre']!='100') { $affiche='Tu as perdu, '+$_GET['nombre']+' n est pas la solution'; } else { $affiche='bien joué'; } echo '<p>'+$affiche+'</p>'; ?> </body> </html>
Https: connexion sécurisée VS Http non sécurisé
Lorsque vous tapez l'adresse d'un site, vous voyez parfois http, parfois https. Le http n'est pas crypté alors que la page que vous recevez et les informations que vous pouvez envoyer en remplissant un formulaire en https seront cryptés avant de circuler sur internet.
Lorsque vous demandez une page en http (hyper text transfert protocol), vous faites une requête GET qui est la requete par défaut. Nous verrons dans les formulaire la requête POST. Nous n'aborderons pas les requêtes DELETE, PUT, etc...
Voici des copies d'écran d'une requête http faites avec le logiciel wireshark.
On voit clairement l'appel à la méthode Get de HTTP, la page demandée est sur le site isnclemenceau.free.fr, le navigateur Firefox, et même la page demandée (testphptime.php).
J'en profite pour vous rappeler que l'on voit dans wireshark les couches du protocole TCP/IP: couche physique(frame),liaison(ethernet), IP (couche réseau), tcp (couche transport),htp(http: couche application).
On peut observer en vert, les phases de Sync et ACK pour établir la connexion. Après le GET, on reçoit la page, voyez ci-dessous.
Ici, on voit en bas de la fenêtre que tout le contenu de ma page est lisible! Voyez ci-dessous un exemple avec un requête HTTPS
Voici maitenant une capture sur une requête HTTPS
Les requêtes HTTPS passent par le protocole TLS qui crypte les données. On voit qu'ici, on ne peut pas lire le contenu de la page.
Ne remplissez jamais de données confidentielles sur un site qui n'est pas sécurisé https. Cliquez sur le i de l'url dans firefox pour en savoir plus sur le site que vous visitez.
Exercices
-
Tester les codes précédents. A partir de ces codes, les adapter pour que la bonne réponse soit un nombre entre 50 et 100 et que le test se fasse en appelant la page devine2.html?surnom=jojo&nombre=40 puis devine2.html?surnom=tata&nombre=60. Faites aussi la version php. Laisser vos pages sur votre espace ftp.
-
Tester les codes précédents. A partir de ces codes, les adapter pour que la bonne réponse soit un nombre pair. (un peu de recherche sur les commandes javascript va peut-être être nécessaire). Vérifier comme dans l'exercice précédent. Laisser vos pages sur votre espace ftp.
