Cours : Interactions client-serveur

Rappel sur les protocoles HTTP et HTTPS

Le web est construit sur le protocole HTTP et sa version sécurisée HTTPS.

Le protocole HTTP

HTTP est le protocole de communication du web.

• Ce protocole client-serveur permet l’accès aux sites et aux données du world wide web par le biais d’un navigateur Internet.

Définition

HTTP :

HTTP signifie HyperText Transfer Protocol, ou protocole de transfert hypertexte en français. La notion d’hypertexte renvoie aux liens cliquables qui permettent de naviguer de page en page et de site en site sur le world wide web, appelé plus simplement le « web ».

Le protocole HTTPS

Définition

HTTPS :

HTTPS est une version sécurisée du HTTP qui ajoute un chiffrement des données échangées pour garantir la confidentialité des échanges.

• HTTP et sa déclinaison HTTPS sont des protocoles de type client-serveur, articulés autour de requêtes formulées par le client, et de réponses renvoyées par le serveur.

Ainsi, lorsqu’un internaute clique sur un lien pour accéder à une page web, son navigateur (le client) envoie une requête au site web (le serveur), qui répond en lui envoyant la page demandée.

Les méthodes du protocole HTTP

Le protocole HTTP s’appuie sur une dizaine de méthodes pour indiquer les actions souhaitées. Nous nous intéresserons aux deux méthodes les plus courantes que sont GET et POST.

Définition

Méthodes :

Les méthodes sont des commandes, parfois appelées verbes, qui permettent aux clients de formuler des requêtes d’actions auprès des serveurs, afin d’obtenir en réponse des ressources.

À retenir

Ces ressources peuvent être des pages web, des images ou d’autres types de documents. Les serveurs traitent les requêtes d’actions envoyées par les clients et émettent en retour des réponses.

Les ressources peuvent être aussi bien des données préexistantes que des données générées dynamiquement pour répondre à une requête spécifique.

Pour savoir quelles données fournir et sous quelle forme, les serveurs web s’appuient sur les requêtes envoyées.

• Ces requêtes contiennent un certain nombre d’informations techniques et de paramètres fournis par les clients.

Exemple

• Un site de prévisions météorologiques se fondera sur le code postal ou le nom de votre ville pour vous proposer les prévisions correspondantes.
• Un service de messagerie se fondera sur votre identifiant et votre mot de passe pour vous donner accès aux messages qui vous sont spécifiquement destinés.

La méthode GET

Définition

Méthode GET :

La méthode GET envoie des donnés au serveur pour obtenir une ressource spécifiée.

À retenir

Cette méthode n’a aucun effet sur la ressource requise dans le sens où elle ne la modifie pas. La méthode GET peut donc être répétée et fournira le même résultat.

• De ce fait, une ressource servie par GET pourra être mise en cache si nécessaire.

Exemple

Lorsque vous consultez les prévisions météorologiques du jour pour votre ville ou votre région, la ressource existe déjà : stockée sur le serveur, elle est simplement transmise à votre navigateur qui se chargera de son affichage. La météo d’une ville donnée est en effet identique pour vous et pour votre voisin.
La page stockée sur le serveur sera seulement actualisée, et de manière identique pour tous, lorsque les prévisions seront mises à jour.

• C’est le principe du cache, dont l’objectif est de limiter la charge du serveur.

Attention

Les requêtes GET ne doivent jamais être utilisées pour modifier des données sur le serveur.

• Dans un tel cas, on utilisera la méthode POST.

La méthode POST

Définition

Méthode POST :

La méthode POST envoie des données au serveur pour créer, obtenir ou mettre à jour une ressource.

À retenir

Cette méthode conduit généralement à des modifications côté serveur.

• Elle ne pourra pas être mise en cache.

Exemple

Lorsque vous vous connectez à un forum, à un service de messagerie ou à un réseau social, les données sont générées dynamiquement pour fournir des informations qui vous sont propres.
Vos courriels ou vos messages doivent seulement s’afficher sur votre navigateur, pas sur celui de votre voisin. Vous avez également la possibilité de créer des données ou d’en mettre à jour.

L’envoi de données dans le cadre d’un formulaire

Intéressons-nous de plus près aux méthodes GET et POST. Ces deux méthodes comportent un certain nombre de points communs, mais aussi des différences.
Nous allons étudier GET et POST dans un cadre identique, celui d’un formulaire : il va nous permettre de transmettre des informations au serveur web.

Nous allons composer ce formulaire à partir de l’élément FORM du langage HTML et analyser son fonctionnement.

Principe de fonctionnement d’un formulaire

Un formulaire permet à un client (le navigateur Internet) de collecter et de transmettre des données à un serveur (ici le serveur web).

À retenir

Pour pouvoir envoyer ces données, le navigateur Internet a besoin de connaître deux informations qui lui seront fournies par le code HTML du formulaire :

• la destination des données saisies dans le formulaire ;
• la méthode d’envoi de ces données.

La destination est l’adresse de la ressource (URL) côté serveur qui traitera les données issues de notre formulaire et qui transmettra en retour une réponse.

• La méthode d’envoi est une méthode HTTP valide, dans notre cas d’étude GET ou POST.

Création du formulaire en HTML avec la méthode GET

Notre formulaire de démonstration nous permettra de saisir et d’envoyer un code postal au serveur afin d’obtenir en retour les prévisions météorologiques locales à notre ville.
Notre code HTML est volontairement réduit à l’essentiel. Nous cherchons à obtenir un formulaire techniquement fonctionnel, sans aucune recherche ergonomique ou de mise en page.

• Composé à partir de l’élément FORM du langage HTML, son code est le suivant :

À retenir

Notre élément FORM comporte trois éléments enfants – les deux éléments de type INPUT sont indispensables :

• le premier élément INPUT de type text définit un champ permettant la saisie de notre code postal ;
• le deuxième élément INPUT de type submit définit un bouton permettant de déclencher l’envoi du formulaire au serveur ;
• le troisième élément de type LABEL est optionnel : il définit une légende associée au champ de saisie du code postal pour guider l’utilisateur.
• La méthode et la destination de notre formulaire sont précisées via les attributs correspondants de l’élément FORM.

Vous aurez remarqué que nous utilisons dans un premier temps la méthode GET. Nous ferons par la suite évoluer notre code pour employer la méthode POST et comparer les résultats obtenus.

Attention

• Si la méthode de la balise FORM est omise, c’est par défaut la méthode GET qui est utilisée pour soumettre la requête au serveur.
• Si l’action de la balise FORM est omise, le formulaire est par défaut soumis à sa propre adresse URL.

Nous insérons le code de notre formulaire dans un fichier html que nous nommerons « meteo.html ». Nous plaçons ce fichier sur un serveur web local ou distant (dans notre cas le serveur local nommé « localhost ») et nous y accédons avec un navigateur Internet à partir de son URL pour obtenir son rendu.

• Nous obtenons un affichage semblable à celui :

À retenir

Lorsque nous saisissons un code postal et que nous cliquons sur le bouton, notre navigateur Internet transmet :

• les données collectées par le formulaire ;
• selon le protocole indiqué dans le code HTML, vers la ressource URL du serveur qui en assurera le traitement.

Traitement du formulaire côté serveur

Pour les besoins de notre démonstration, nous souhaitons vérifier que les données soumises par le biais de notre formulaire sont correctement reçues côté serveur pour pouvoir y être traitées.
Là encore, notre code se limitera à l’essentiel. Sa mission consiste à afficher les valeurs transmises depuis le formulaire, qu’elles aient été transmises par GET ou par POST. Dans un cas comme dans l’autre, notre code sera capable d’afficher les données reçues.

Nous utilisons pour cela le langage PHP qui est actuellement le langage de programmation web côté serveur le plus répandu.
Nous aurions toutefois pu écrire un code équivalent dans d’autres langages pour un serveur programmé par exemple en Python, en Java ou en Ruby.

• Voici le code PHP :

• $_GET et $_POST sont toutes deux des variables dites superglobales.

Définition

Variables superglobales :

Il s’agit de variables internes réservées par PHP et qui sont accessibles quel que soit le contexte.

Ces variables $_GET et $_POST sont de type tableau associatif : elles contiennent des paires de clés et de valeurs qui sont automatiquement renseignées par PHP et rendues accessibles dans le script courant.

• Notre code évalue chacune de ces deux variables et, si le tableau évalué n’est pas vide (conditions !empty($_GET) et !empty($_POST) ), son contenu est affiché.

Nous nommons « meteo.php » la page contenant notre code. Nous la plaçons sur notre serveur web à l’adresse indiquée par l’attribut action » de la balise FORM dans notre page HTML.
Dans le cas présent, il s’agit du même répertoire.

Lorsque nous soumettons notre formulaire depuis la page « meteo.html » en cliquant sur son bouton « envoyer », nous constatons que notre navigateur se rend sur notre page de destination « meteo.php ».

• Celle-ci reçoit bien les données que nous avons saisies dans le formulaire. Elle nous précise aussi la méthode employée pour les transmettre.

Nous avons soumis les données avec la méthode GET.

• Notre code PHP qui s’exécute côté serveur produit donc l’affichage du tableau associatif $_GET.
• Notre formulaire ne comportant qu’un seul champ, nous obtenons une seule paire clé-valeur.

Si notre formulaire avait comporté plusieurs champs, le tableau associatif correspondant aurait affiché chaque paire clé-valeur à la suite.

Attention

Le nom de la clé correspond à l’attribut name de l’élément INPUT de notre formulaire html. Si cet attribut est omis, la valeur saisie dans le champ INPUT correspondant ne pourra pas être récupérée par le serveur.

À retenir

Vous remarquerez dans la barre d’adresse du navigateur la présence de la clé et de la valeur à la fin de l’URL après le signe « ? ».

• On comprend aisément que cela pourrait poser un problème si nous souhaitions transmettre des données confidentielles avec un formulaire. Nous y reviendrons un peu plus tard.

Observons d’abord ce qui se produit si nous employons la méthode POST à la place de GET.

Soumission de notre formulaire avec la méthode POST

Pour soumettre notre formulaire avec la méthode POST, il nous faut seulement éditer dans notre code source HTML l’attribut method de la balise FORM : nous remplaçons GET par POST et nous enregistrons les changements.

• Cette fois, lorsque nous renseignons à nouveau une valeur dans le champ code postal de notre page meteo.html et que nous cliquons sur le bouton « envoyer », nous obtenons en retour du serveur l’affichage du tableau associatif $_POST.

À retenir

Vous remarquerez que l’URL dans la barre d’adresses du navigateur indique uniquement l’adresse de notre fichier PHP : aucune donnée saisie dans le formulaire n’apparaît plus à ce niveau. Les données sont en effet transmises dans le corps de la requête et non plus à la suite de l’URL de la destination du formulaire.

• C’est la différence la plus visible entre GET et POST, mais pas la seule.

Les types de données transmissibles par formulaire

Nous savons maintenant créer un formulaire et déterminer la méthode d’envoi appropriée en fonction des cas. Nous allons maintenant aborder les différents types de données que nous pouvons collecter avec un formulaire, ainsi que la manière dont l’utilisateur nous communique ces données : saisie au clavier, clic de souris, choix dans des listes déroulantes etc.

Revenons dans un premier temps sur la balise INPUT et son attribut type.

• L’attribut type de la balise INPUT

L’attribut type permet de spécifier le type de données traitées.

Nous avons déjà découvert au travers des exemples précédents :

• le type text qui permet la saisie de données textuelles ;
• le type submit qui génère l’envoi du formulaire.
• Il existe également un type reset qui permet de proposer la réinitialisation des données du formulaire par le navigateur en cas d’erreur.

D’autres types spécialisés sont à notre disposition pour faciliter la saisie et le contrôle préalable de certaines données fréquemment récoltées via des formulaires : adresse de courrier électronique, mot de passe, date, fichier joint, etc. Un formulaire peut également comporter des cases à cocher ou des boutons cliquables (appelés boutons radio).

Le tableau suivant récapitule les principaux types de champs d’un formulaire :

À retenir

N’oubliez pas la principale différence entre les cases à cocher et les boutons radio :

• les cases à cocher d’un même groupe sont sélectionnables individuellement : plusieurs choix simultanés sont donc possibles ;
• les boutons radio d’un même groupe sont mutuellement exclusifs : un seul choix est possible ; tout clic sur autre bouton du même groupe désactive le choix précédent.

On peut également proposer à l’utilisateur des listes déroulantes de choix qu’il va pouvoir manipuler avec la souris.

• La balise SELECT

À retenir

La balise SELECT permet de construire une liste déroulante avec un certain nombre de choix parmi lesquels l’utilisateur pourra sélectionner la valeur souhaitée.

Exemple

<select name="pays">

<option value="fr">France</option>

<option value="be">Belgique</option>

<option value="ch">Suisse</option>

</select>

Attention

Par défaut, les choix sont mutuellement exclusifs. Un attribut optionnel multiple permet d’autoriser les choix multiples, mais au prix de manipulations assez peu ergonomiques.

• En général, dans ce cas, on préférera recourir à des cases à cocher plus intuitives d’emploi.

L’utilisateur de notre formulaire peut par ailleurs vouloir nous transmettre un message plus ou moins long. Une balise dédiée permet de le faire.

• La balise TEXTAREA

La balise TEXTAREA permet la saisie d’un texte long avec d’éventuels retours à la ligne, non gérés par le type "text" de la balise INPUT.

À retenir

On emploiera une balise TEXTAREA pour collecter des commentaires de blog ou sur des plateformes communautaires, des avis clients sur un livre d’or, etc. Des attributs dédiés permettent de préciser le nombre de lignes et de colonnes de ce champ de saisie multilignes.

Exemple

< textarea name="commentaire" rows="8" cols="80"></textarea>

Nous voilà familiers avec les formulaires, passons en revue et comparons maintenant les spécificités de GET et de POST, pour mieux comprendre dans quel cas utiliser l’une ou l’autre de ces méthodes.

Comparaisons GET et POST

L’emploi de l’une ou l’autre méthode dépend à la fois de considérations techniques, de sécurité et de bonne pratique.

Principales différences entre GET et POST

Nous venons de le voir : avec la méthode GET, les données transmises apparaissent dans la barre d’adresse du navigateur, contrairement à la méthode POST, où seule l’URL de destination est affichée.

La méthode GET est assez limitée dans la quantité et le type de données qu’elle peut transmettre : au maximum deux mille caractères environ, et uniquement des caractères.
La méthode POST peut transmettre plusieurs mégaoctets de données, qui peuvent être des caractères mais aussi des données binaires (par exemple pour l’envoi d’un fichier).

Les pages obtenues avec la méthode GET peuvent être mises en cache et enregistrées dans les marque-pages ou favoris, contrairement aux pages obtenues avec la méthode POST.

• On peut donc considérer POST comme une méthode plus sûre que GET et capable de transmettre davantage d’informations de différents types.

Toutefois, il n’est pas nécessaire ni souhaitable d’utiliser systématiquement POST. On se priverait par exemple de la possibilité de mettre des données en cache, ce qui est parfois très utile, en particulier pour optimiser les sollicitations du serveur et préserver ainsi ses performances.

Quand utiliser GET ? Quand utiliser POST ?

À retenir

La règle pour choisir entre GET et POST est la suivante :

• si la requête ne transmet aucune information sensible, qu’elle n’effectue aucune modification côté serveur et qu’elle fournit un résultat identique si elle est répétée, on utilise GET ;
• si la requête transmet des informations sensibles ou qu’elle peut conduire à modifier l’état du serveur d’une manière ou d’une autre, on utilise POST.

Les navigateurs Internet intègrent les spécificités des méthodes GET et POST et proposent certains garde-fous. C’est pourquoi il vous sera possible de revenir en arrière ou de recharger une page obtenue avec une requête GET, mais pas avec une méthode POST.

• Si vous tentez de recharger une page obtenue avec une méthode POST, votre navigateur affichera un message d’alerte.

Exemple

Si vous rechargez une page montrant la météo de votre ville, un rechargement n'aura aucune conséquence, ni pour vous ni pour le serveur.
En revanche si vous veniez de publier un commentaire sur un blog, celui-ci pourrait être publié deux fois.
Ce serait encore plus gênant si vous veniez d'envoyer une commande à un site de commerce électronique : le renvoi intempestif de votre formulaire répéterait l’action initiale et pourrait créer une deuxième commande.

À retenir

Dès que le traitement des données issues de votre formulaire entraîne côté serveur la création d'une entrée dans une base de données (table des commentaires pour le blog, table des commandes pour le site de commerce électronique), il faut systématiquement employer POST.
Cela s’applique également à la mise à jour d'informations déjà présentes en base de données.

Exemple

Lorsque vous modifiez des paramètres de votre profil sur un site ou un réseau social, l’état du serveur va changer : il va en effet effectuer des mises à jour dans ses bases de données pour prendre en compte les modifications demandées.

• La méthode POST est donc requise pour toute modification de données côté serveur : ajout, modification ou suppression de données.