Formulaires dans une page web

Pour entrer des informations, les pages web peuvent proposer des éléments de formulaires : boutons à cliquer, champ d'entrée, etc...

Les informations entrées peuvent ensuite être envoyées au serveur pour un autre traitement ( côté "serveur" ) : recherche dans une base de données, connexion à un service, etc..., le serveur renvoyant alors une réponse "personnalisée" en fonction de ces données envoyées. On parle dans ce cas de pages "dynamiques", c'est à dire dont le contenu peut changer selon les circonstances de leur consultation.

Pages dynamiques

Dans ce cas, un traitement supplémentaire est nécessaire de la part du serveur; le processus est le suivant :

1. dans cette situation, la requête porte sur un fichier dont l'extension n'est plus .html mais .php car il contient du code écrit dans un langage de script appelé PHP.
2. le serveur alors "passe la main" à ce programme qui va s'exécuter sur ce serveur;
3. ce programme exécute la requête, traite les informations, et génère un code HTML qui est alors renvoyé au client par le serveur.
4. le client interprète ce code HTML pour afficher la page.

Le travail est donc "partagé" entre le client et le serveur dans ce processus...

Le script de traitement peut être écrit dans différents langages grâce à l’utilisation de différentes bibliothèques logicielles additionnelles : le framework Flask permet ainsi de programmer côté serveur en Python !

C'est donc toujours du HTML/CSS/JS qui est envoyé au client, mais il est ici généré "à la volée" en fonction de la requête : cela permet donc d'envoyer des pages "dynamiques" et non plus "statiques", c'est à dire identiques à chaque consultation.

Nous n'entrerons pas dans les détails de la programmation PHP, car, d'une part, le programme de NSI ne l'exige pas, et que, d'autre part, il s'agit d'un langage qui ne peut être justement exécuté que sur un serveur web, ce qui n'est pas le cas des PC sur lesquels vous travaillez : vous ne pourriez donc jamais exécuter votre code PHP, ce qui est quand même d'un intérêt assez limité...

Voila cependant une illustration du principe ci-dessus.

La page que vous êtes en train de lire correspond à un fichier dont l'extension est .php ( regardez son URL dans la barre d'adresse du navigateur ) : le fichier qui décrit la page est donc écrit en PHP ? Mais pourtant, si je regarde le code source de la page, c'est bien du HTML "pur" ! Je n'y comprends rien....

En réalité, sur le serveur, le fichier est bien écrit ( en partie ) en PHP; mais avant d'envoyer ce fichier sur le client, le serveur a exécuté le code pour le "remplacer" par du HTML : c'est comme ça par exemple qu'est généré le code HTML du bandeau en haut de page et celui du menu mobile sur la gauche de la page :

Ne croyez pas cependant que PHP ne permet que de générer du HTML : c'est un "vrai" langage de programmation, c'est lui qui traite par exemple les bases de données des plus grands sites web.

La conséquence de tout ceci est qu'il est impossible de lire le code PHP stocké sur un serveur distant : ce dernier exécute toujours le code avant l'envoi, ce qui fait que le PHP n'apparaît jamais...

Différents types de requêtes

Il y a plusieurs façons d'interagir avec un serveur, nous allons voir les deux principaux types de requêtes utilisées.

La méthode GET

Utilisation

Littéralement, "GET" signifie obtenir une ressource; on l'utilise pour simplement demander à un serveur une ressource, page web, fichier, image,..., et la rapatrier sur notre machine.

C'est le type de requête que vous utilisez le plus souvent pour consulter une page web quelconque.

On doit pour cela préciser l'URL de cette ressource, c'est à dire son adresse complète.

Mais parfois, il est aussi nécessaire de fournir au serveur de petites quantités de données en plus ( dans la pratique, on se limite à environ 2000 caractères ): c'est le cas par exemple lorsqu'on fait une recherche par mot-clé à partir d'un moteur de recherche.

Avec cette méthode, les données sont ajoutées, directement dans l'URL. Celle-ci est alors composée du nom de la page ou du script à charger avec les données "empaquetées" dans une chaîne. Les données sont séparées de l'adresse de la page par le code ? et entre elles par le code & :

http://www.lapagequiminteresse.fr?var1=data1&var2=data2&var3=data3			
			

Regardez par exemple la barre d'adresses de la page de résultats d'un moteur de recherche après que vous ayez lancé une recherche : les mots-clés apparaissent après l'adresse de la page selon la forme ci-dessus, indiquant qu'ils ont été envoyés selon la méthode GET lors de l'appui sur le bouton Rechercher ( ou OK...)

Une requête complète vers nsivaugelas

Vous ne le saviez pas, mais il est possible pour vous de consulter l'intégralité des données qui vous concernent et qui sont stockées sur le serveur du site du lycée ( RGPD oblige... )

Pour cela, vous devez faire une requête vers une URL du serveur, qui constitue le point d'entrée de l'API du site.

http://192.168.221.1/API?username=XXXX&password=YYYYY            
            

Limites de la méthode

• on l'a dit, la quantité d'informations à transmettre est limitée du fait que les serveurs et les navigateurs imposent généralement une taille limite aux URL; c'est donc généralement un maximum de 2000 caractères que l'on peut transmettre.
• les informations circulent en clair puisqu'elles sont directement lisibles dans l'URL : pas question donc d'envoyer un mot de passe à un serveur avec cette méthode ( argh, c'est pourtant ce que vous venez de faire 😰...)

La méthode POST

Cette méthode n'est plus limitée en taille : on peut envoyer une quantité quelconque de données au serveur, mais celles-ci n'apparaissent plus directement dans l'URL : elles sont incluses dans le corps global de la requête et sont donc "invisibles" pour l'utilisateur. Même si elles restent modifiables par quelqu'un "qui s'y connaît", la méthode POST apporte donc un niveau supplémentaire de sécurité par rapport à la méthode GET.

On utilise cette méthode lorsque les données envoyées doivent modifier celles sur le serveur : c'est le cas par exemple lorsqu'on veut y enregistrer des informations.

Comment dans ce cas envoyer alors les données au serveur ? Les formulaires HTML sont fait pour cela.

Construction d'un formulaire

Code HTML

Un formulaire se bâtit dans le fichier HTML de la page : la balise correspondante est la balise <form> :

<form name="mon_formulaire" action="URL_de_la_ressource.php" method="GET/POST">

	................
	éléments de formulaires
	................
	
</form>
			

Éléments de formulaire

Les éléments que l'on peut trouver dans un formulaire dépendent des informations que l'on veut demander à l'utilisateur; leurs balises, à placer entre les balises <form>, sont par exemple :

Bouton à cliquer

Un type particulier de bouton est celui qui permet de soumettre le formulaire au serveur ( c'est à dire lui envoyer les informations entrées ) :

	<input type="submit" name="envoi" value="ENVOI">
			

Dans ce cas, le libellé du bouton correspond à la propriété value de la balise ( si cette propriété n'est pas renseignée, c'est le texte par défaut "Envoyer" qui s'affiche ).

Il existe également le bouton qui permet de réinitialiser un formulaire :

	<input type="reset" name="remise_a_zero" value="RAZ">
			

Ces deux boutons sont généralement placés à la fin du formulaire.

Champ d'entrée

Pour un champ d'entrée de texte :

	<label>Veuillez compléter ce champ : <input type="text" name="un_texte" placeholder="Entrez un truc...""></label>
			

• la balise <label>, parente de la balise de l'élément de formulaire, permet de lui associer un libellé.
• la propriété placeholder permet de donner à l'utilisateur une indication sur l'information à entrer

Pour un champ d'entrée de valeur numérique :

	<label>Entrez la valeur : <input type="number" name="une_valeur" min="0" max="20" step="0.5"></label>
			

Les propriétés min, max et step permettent respectivement de définir le minimum, le maximum et le pas de variation de l'intervalle dans lequel la valeur demandée doit se trouver.

Cases à cocher

Un ensemble de case, indépendantes les unes des autres, qui permettent de choisir une ou plusieurs options :

	<label><input type="checkbox" name="capacité" value="1">8 GB</label><br>
	<label><input type="checkbox" name="capacité" value="2">16 GB</label><br>
	<label><input type="checkbox" name="capacité" value="3">32 GB</label><br>
	<label><input type="checkbox" name="capacité" value="4">64 GB</label><br>
			

• la propriété value permet d'associer à chaque case sélectionnée une valeur, information qui pourra alors être envoyée au serveur
• on remarque que les cases doivent avoir le même nom pour qu'elles soient associées à la même information demandée ( ici, le choix d'une ou plusieurs capacité(s) de stockage )

Boutons radio

Dans ce cas, les différentes options s'excluent mutuellement : la sélection d'une seule est possible.

C'est ce qui est par exemple utilisé dans les QCM d'entraînement que vous avez pu faire sur ce site...

	<label>A<input type="radio" name="q1" value="1">C'est ma dernière réponse, Jean-Pierre</label><br>
	<label>B<input type="radio" name="q1" value="2">J'appelle un ami</label><br>
	<label>C<input type="radio" name="q1" value="3">La réponse C</label><br>
	<label>D<input type="radio" name="q1" value="4">Obi-Wan Kenobi</label><br>
			

Là-aussi, les boutons radio doivent avoir le même nom ( dans le cas contraire, leur sélection multiple serait possible ! )

Exemple

Voila par exemple ci-dessous un petit formulaire pour faire une requête GET à une page du serveur :

Application

Voila une petite application que vous allez élaborer de A à Z.

Il s'agit d'un "mini-chat" qui va vous permettre de discuter entre vous, à condition que vous écriviez votre propre formulaire d'envoi de message !

Le formulaire

Pas besoin de faire compliqué; il devra contenir ( attention à respecter le nom des propriétés name ) :

• un champ d'entrée pour entrer votre login ( de propriété name = "pseudo" )
• un champ d'entrée pour entrer votre mot de passe ( ( de propriété name = "password" )
• un champ d'entrée pour écrire votre message ( de propriété name = "message" )
• un ensemble de boutons radio ( de propriété commune name ="couleur" ) précisant la couleur dans laquelle le message devra être affiché ( valeur à indiquer comme propriété CSS valide, sinon l'affichage sera en noir par défaut )
• un bouton pour soumettre votre formulaire

Un peu de CSS pour embellir le tout, et votre formulaire pourrait ressembler à ça :

Vous utiliserez votre identifiant et votre mot de passe NSI pour pouvoir poster vos messages ( ils seront sinon supprimés...)

Envoi des données

Pour le traitement des données, votre formulaire devra les envoyer avec les propriétés suivantes :

• action = "http://192.168.221.1/~web/premiere2/chat/chat.php"
• method = "post"

Réponse du serveur

Le serveur vous répondra en affichant la liste des messages déjà envoyés, avec le login de leur émetteur.

Pour renvoyer un nouveau message, il faudra que vous reveniez en arrière vers la page de votre formulaire.

Bonne discussion ! Vous pourrez revenir quand vous voudrez sur ce chat, mais il ne fonctionnera que sur le réseau du lycée ( et attention, tous vos messages restent stockés...).

Lien vers les RÉPONSES

( Pour ceux que ça intéresse, ce mini-chat fonctionne ainsi : un script PHP récupère les données envoyées de votre formulaire, et les écrit dans une base de données stockée sur le serveur; un autre script consulte ensuite toutes les 2s les messages stockés et construit le code HTML de la page de réponse, celle où s'affichent les messages.)

Formulaires et sécurité

Le traitement des données envoyées à un serveur doit reposer sur la devise : "Ne jamais faire confiance à l'utilisateur.".

Cela se traduit par :

• il faut toujours vérifier la cohérence des données entrées : valeurs saisies, champs tous complétés, etc...Même si il n'a pas d'intention malveillante, il est impossible d'être sur que l'utilisateur va se comporter comme le concepteur du site l'a prévu. Un site doit donc être à ce titre "robuste", il faut prévoir toutes les éventualités !
• l’utilisateur peut avoir des intentions malveillantes, et chercher à "pirater" ou "hacker" le site : il faut donc protéger ce dernier face à ces attaques.

Plusieurs failles, c'est à dire de "portes d'entrée" pour un pirate, peuvent exister sur un site; un exemple "classique" est la faille XSS ( = Cross Site Scripting ).

Revoilà le petit formulaire du début de ce chapitre :

Mais cette fois, mettez vous à la place d'un pirate, et rentrez dans un des champ de saisie, non pas une donnée valide, mais directement du code HTML et/ou JavaScript; par exemple :

<script>document.body.style.background ="red";alert("Vous vous êtes fait pirater !")</script>				
			

...et soumettez le questionnaire... Vous avez vu ? Vous avez fait faire au site une action pour laquelle il n'est pas prévu : exécuter du code JS ! On parle d'attaque par injection de code dans cette situation.
Ici, il s'agit d'une action plus ennuyeuse que dangereuse, mais on peut imaginer des codes bien plus malveillants qui chercheraient à tromper l’utilisateur, lui extorquer des informations, etc... D'où le nom de la faille : "du script venant d'un site qui n'est pas celui à l'origine".

Le premier formulaire au début de ce chapitre est protégé contre cette attaque : une fonction spéciale du script PHP qui traite les données envoyées "échappe" les balises HTML du code malveillant, c'est à dire les affiche seulement sans les interpréter : le code JS n'est alors pas exécuté.
Vous pouvez essayer d'attaquer le premier formulaire de cette façon : ça ne marche pas !