Protocole HTTP et formulaire
Objectifs
Ce cours aborde les notions :
- de protocole
http
; - et de formulaire HTML.
Il aborde aussi les modes de passages des paramètres entre un client et un serveur depuis un formulaire HTML.
Rappel
Définition
Suite à la requête http
émise par un client, un serveur http
(serveur web) répond au client en lui envoyant la page demandée dans le respect du protocole http
(HyperText Transfert Protocol
).
La page web est reçue sous la forme de codes HTML / CSS / JavaScript.
Grace à l'interprétation de ces codes HTML / CSS / JavaScript par le navigateur de l'ordinateur client, l'utilisateur peut :
- visualiser le contenu de la page
- interagir avec cette page : clic sur des éléments, le survol d'éléments, etc...
- interagir avec les formulaires présents dans la page web et envoyer les données renseignées dans ces formulaires au serveur distant grace à des méthodes nommées
GET
ouPOST
par l'intermédiaire du protocolehttp
:
Notion d'URL
Définition
Pour accéder à un site Web, on est amené à saisir l'adresse de ce site dans la barre d'adresse du navigateur.
Cette adresse s'appelle une URL (pour Uniform Resource Locator en anglais) et sa syntaxe générique est la suivante :
- le protocole peut être du type
http
ouhttps
; nom-ou-adresseip
peut être le nom de domaine ou l'adresse IP du serveur web ;document
est le fichier ressource à atteindre (selon un chemin relatif à partir du répertoire où est stocké le site sur le serveur).
Exemple concret
Considérons la saisie de l'URL suivant :
Les actions suivantes se produisent :
- le navigateur web du client effectue une requête
DNS
pour obtenir l'adresse IP du serveur Web hébergeant le site (par exemple213.186.33.5
) ; - le navigateur web se connecte à la machine dont l'adresse IP est
213.186.33.5
en utilisant le protocole TCP sur le port 80 ; - une fois la connexion établie, le navigateur web demande la ressource
index.html
selon le protocolehttp
; - le serveur web
213.186.33.5
répond à la requête selon le protocolehttp
en envoyant le contenu du fichier au navigateur web ; - le navigateur web du client reçoit puis affiche la page web :
Ce processus est répété pour chaque nouvelle ressource (nouvelle page web, image, vidéo, informations issues d'un formulaire, etc...).
Protocole HTTP
Définition
Le protocole http
définit les règles à respecter lors de communications entre le navigateur et le serveur web.
Exemple de requête / réponse http
Voici un exemple de requête http
émise par un navigateur lors d'une navigation vers l'URL www.siingenieur.fr
:
GET /helloworld.html HTTP/1.1
Host: www.siingenieur.fr
Grace à cette requête, le client indique au serveur www.siingenieur.fr
qu'il souhaite communiquer en utilisant la version 1.1 du protocole http
et lui demande la ressource /helloworld.html
.
La réponse http
du serveur est par exemple la suivante :
HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Mon, 16 Aug 2021 22:17:00 GMT
Content-Type: text/html; charset=utf-8
Content-Lenght : 115
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Le rendu sur le navigateur est le suivant :
Par cette réponse le serveur informe le client :
- qu'il accepte de communiquer selon la version 1.1 du protocole
http
; - que la ressource demandée est disponible (code
200 ok
) ; - le logiciel serveur est
nginx 1.10.3
et s'exécute sur une distribution Linux Ubuntu ; - la date et l'heure de réception de la requête ;
- le type de fichier transmis (ici
html
); - le fichier a une taille de 115 octets;
- le contenu du fichier (ici du code
html
) est lui présent dans le corps de la réponsehttp
.
La ligne de statut HTTP/1.1 X X
est notamment composée :
-
du code réponse (code d'erreur retourné)
200
: pour indiquer le succès de la requêtehttp
;404
: pour indiquer que la ressource demandée n'a pas été trouvée ;403
: pour indiquer que l'accès à la ressource n'est pas permis (droits d'accès insuffisants) ;500
: pour indiquer que le serveur rencontre une erreur interne ;etc...
-
du texte associé au code erreur
OK
: pour indiquer que la ressource demandée est accessible ;NOT FOUND
: pour indiquer que la ressource demandée est indisponible ;etc ...
Le champ Content-Type
permet de :
Content-Type: text/html; charset=utf-8
-
déclarer le type
MIME
(type de média Multipurpose Internet Mail Extensions) identifiant le format des données transmises dans le corps de la réponsehttp
.Les types de média sont standardisés, on retiendra par exemple
text/html
pour du HTML. -
déclarer le codage des caractères utilisé (ici
utf-8
) dans le corps de la réponsehttp
.
Capture d'une requête et d'une réponse HTTP
Exemple de captures
Voici un exemple de captures réalisées avec le logiciel WireShark dans lesquelles l'ordinateur client d'adresse 192.168.1.14
envoie une requête http
à destination du serveur d'adresse 213.186.33.5
lequel répond :
Contenu de la trame relative à la requête http
:
Contenu de la trame relative à la réponse http
:
Syntaxe complète des URL
Définition
La syntaxe des URL peut être en réalité un peu plus complexe que celle montrée précédemment.
En effet, dans une URL :
- il est possible de spécifier le port TCP sur lequel effectuer la connexion (par exemple dans le cas où on exécute plusieurs logiciels serveurs web sur la même machine).
-
la partie située après le document et marquée par un
?
est la liste des paramètres de requête.protocole://nom-ou-adresseip:port/document?n1=v1&...&nk=vk#id Ces paramètres sont des paires
ni=vi
ouni
est le nom du paramètre etvi
sa valeur.Les paires sont séparées par un symbole
&
.Ces paramètres permettent au client de passer des valeurs au serveur.
-
#id
est appelé un signet et permet de cibler un élément particulier dans la ressource demandée (id
correspond en fait à un identifiant présent dans la page web demandée).protocole://nom-ou-adresseip:port/document?n1=v1&...&nk=vk#id
Exemple concret
L'URL https://www.education.gouv.fr/recherche
permet l'accès à la page web suivante :
L'ajout dans l'URL du paramètre keywords
associé à la valeur covid
permet d'accéder à la liste des articles portant sur le thème de la Covid-19 :
https://www.education.gouv.fr/recherche?keywords=covid
L'ajout du signet #main-content
permet d'accéder à l'élément HTML associé :
https://www.education.gouv.fr/recherche?keywords=resultat#main-content
Formulaires et passage de paramètres
Définition
En HTML, l'élément form
permet de regrouper un ensemble d'éléments afin de constituer un formulaire.
Exemple de formulaire
La structure usuelle d'un formulaire en langage HTML est la suivante :
<form action="http://www.siingenieur.fr/traitementformulaire.php">
<label for="id_nom">Nom :</label>
<input type="text" name="nom"/></br></br>
<label for="id_prenom">Prénom :</label>
<input type="text" name="prenom"/></br></br>
<label for="id_specialite">Spécialité :</label>
<input type="text" name="specialite"/></br></br>
<button type="submit">Envoyer</button>
</form>
Les valeurs saisies sont alors envoyées au serveur lors de la soumission du formulaire (appui sur le bouton de soumission du formulaire).
Description du code HTML associé au formulaire
L'élément form
dispose d'un attribut dont la valeur est l'URL à laquelle les paramètres issus du formulaire doivent être envoyés.
<form action="http://www.siingenieur.fr/traitementformulaire.php">
Chaque élément du formulaire (ici 3 éléments input
de type text
) dispose d'un attribut name
qui indique le nom du paramètre auquel ce champ correspond (ici nom
, prenom
et specialite
).
<input type="text" name="nom"/>
L'élément button
correspond au bouton de soumission du formulaire. Son attribut type
vaut submit
.
<button type="submit">Envoyer</button>
Exemple de saisie dans une formulaire
On saisit par exemple les données suivantes dans le formulaire (ici) :
A l'issue de la soumission (clic sur le bouton Envoyer
), le navigateur web charge la page suivante :
Puis le navigateur affiche la page web émise par le serveur (ici la page fait apparaître la valeur de chacun des paramètres issus du formulaire) :
Analyse de la soumission d'un formulaire
1 - Pour chaque élément du formulaire disposant d'un l'attribut name
, le navigateur web du client constitue une chaîne de caractères ni=vi
puis rassemble le tout en séparant par un caractère &
: nom=Filo%C3%A9&prenom=Dominique&specialite=NSI
2 - Le navigateur web contacte le serveur dont l'URL est donnée dans l'attribut action
de l'élément form
et envoie la chaîne de caractères nom=Filo%C3%A9&prenom=Dominique&specialite=NSI
:
3 - Le serveur traite les valeurs des paramètres et renvoie une réponse au navigateur.
Mode de passage des paramètres
Définition
Le mode de passage des paramètres via un formulaire est défini par l'attribut method
de la balise form
.
<form method="get" action="http://www.siingenieur.fr/traitementformulaire.php">
Si cet attribut est absent ou que sa valeur est GET
alors les paramètres du formulaire sont passés au serveur via l'URL suivant la syntaxe décrite précédemment :
Exemple de code HTML
<form method="get" action="http://www.siingenieur.fr/traitementformulaire.php">
<label for="id_nom">Nom :</label>
<input type="text" name="nom"/></br></br>
<label for="id_prenom">Prénom :</label>
<input type="text" name="prenom"/></br></br>
<label for="id_specialite">Spécialité :</label>
<input type="text" name="specialite"/></br></br>
<button type="submit">Envoyer</button>
</form>
Exemple de requête émise lors de la soumission du formulaire
GET /traitementformulaire.php?nom=Filo%C3%A9&prenom=Dominique&specialite=NSI HTTP/1.1
Host: www.siingenieur.fr
Méthode GET
Intérêts de la méthode GET
Dans le cas de la méthode GET
, les paramètres du formulaire font partie de l'URL correspondant à la ressource à atteindre.
L'intérêt de la méthode GET
est que toute l'information nécessaire au serveur est contenue dans l'URL.
-
Il est donc possible de mémoriser uniquement cette URL pour s'en servir plus tard ;
-
Il est même possible de créer directement un lien vers cette URL dans une page Web :
<a href="https://www.education.gouv.fr/recherche?keywords=covid"> Liens vers les informations sur la Covid-19 présentes sur le site education.gouv.fr</a>
Limites de la méthode GET
Il existe cependant des situations où passer des paramètres via la méthode GET
peut poser problème :
-
Les URL ne peuvent pas être de taille arbitrairement longue, il existe une taille limite des URL (environ 2000 octets selon les logiciels) (ici) :
Exemple 1
Code HTML du formulaire
<!doctype html> <html lang='fr'> <head> <meta charset="UTF-8"/> <title>Formulaire</title> <head> <body> <form action="http://www.siingenieur.fr/traitementformulaire.php" method="get"> Ecrire le texte que vous souhaitez : <textarea name="texte"> </textarea> <button type="submit">Envoyer</button> </form> </body> </html>
Ici, la transmission des paramètres du formulaire a bien fonctionné.
Exemple 2
On saisit ici un long texte dans le formulaire :
Ici le contenu du champ est trop long le serveur renvoie le code d'erreur
414
(URL too long
) : -
Il faut aussi prendre en compte des aspects de confidentialité notamment lors de la saisie de mots de passe sur une page web (ici) :
Exemple
Code HTML du formulaire
<!doctype html> <html lang='fr'> <head> <meta charset="UTF-8"/> <title>Formulaire</title> <head> <body> <form method="get" action="http://www.siingenieur.fr/traitementformulaire_mdp.php"> <label for="id_id">Identifiant :</label> <input type="text" name="identifiant"/></br></br> <label for="id_mdp">Mot de passe :</label> <input type="password" name="motdepasse"/></br></br> <button type="submit">Envoyer</button> </form> </body> </html>
Le mot de passe est masqué lors de la saisie mais quand on clique sur le bouton du formulaire le navigateur exécute la requête et affiche dans la barre d'adresse l'URL avec le mot de passe de clair !
Méthode POST
Définition
Si l'attribut method
vaut post
, alors les paramètres sont passés de manière différente.
Le navigateur forme bien la chaîne de caractères n1=v1&..nk=vk
cependant il envoie un message http
commençant par POST
.
Les paramètres sont alors placés dans le corps de la requête HTTP.
Exemple concret
Voici une requête http
émise lors de la soumission du formulaire :
POST /traitementformulaire.php HTTP/1.1
Host: www.siingenieur.fr
Content-Type: application/x-www-form-urlencoded
Content-Length: 46
nom=Filo%C3%A9&prenom=Dominique&specialite=NSI
Ici :
-
La ressource demandée est
traitementformulaire.php
. -
La méthode
post
permet d'envoyer des données à un serveur. -
Le paramètre
Content-Type
de l'entête indique que le corps du message envoyé au serveur contient un passage de paramètres en utilisant la syntaxe d'URL.
Par rapport à la méthode GET
, avec la méthode POST
:
-
Il n'y pas de "limite" dans le nombre de paramètres à transmettre.
-
Les paramètres apparaissent dans le corps de la requête (il n'est pas possible de sauvegarder l'URL avec les paramètres du formulaire) ;
-
Les mots de passe ne seront pas visibles dans la barre d'adresse lors de la soumission du formulaire ;
Limites de la méthode POST
-
L'utilisation de la méthode
POST
ne garantie pas la confidentialité du mot de passe.En effet, la méthode
POST
ne protège que de l'espionnage direct du mot de passe par une personne présente lors de la saisie. -
N'importe qui disposant des droits suffisants sur l'une des machines du réseau peut inspecter (notamment avec des logiciels comme le logiciel WireShark) le contenu des paquets de données émis sur le réseau.
C'est pour cela que le protocole
https
(HyperText Transfer Protocol Secure) a été introduit et est utilisé lors d'échanges de données dont on souhaite conserver la confidentialité.Ce protocole
https
chiffre les données avant de les transmettre. Ainsi, un utilisateur interceptant des paquets TCP de données ne pourra en extraire qu'une suite d'octets d'apparence aléatoire.