13 - IHM Web

Introduction

Une Interface Homme-Machine est une interface permettant à un utilisateur d’interagir avec une machine. Il s’agit d’un ensemble de dispositifs matériels et logiciels permettant à un utilisateur humain d’interagir avec un système interactif.

Par exemple : une souris (matériel) qui lors de son déplacement (action de l’humain), affiche un curseur (logiciel) sur un écran (matériel). Et déclenche une action (logiciel) lors d’un clic (action de l’humain).

Dans tous les cas, une interface Homme-Machine se doit d’être conçue en pensant à l’utilisateur. Intéressons-nous à un type particulier d’interface homme machine dans le contexte du Web.

Protocole HTTP

Le protocole HTTP (acronyme de Hypertext Transfer Protocol) est le protocole réseau utilisé par les navigateurs Web (Firefox, Google Chrome, etc.) et les serveurs Web (Apache, NGINX, etc.) pour communiquer entre eux. C’est lui qui est utilisé par exemple pour obtenir un fichier HTML, une image, poster un formulaire Internet, etc. C’est un protocole texte (donc lisible en clair) s’appuyant les protocoles plus bas-niveau TCP et IP.

Les robots des moteurs de recherche tel que les googlebots qui explorent les sites internet (en anglais crawling) utilisent également le protocole HTTP pour communiquer avec les serveurs Web.

Avec le protocole HTTP la communication entre un navigateur et un serveur Web est finalement assez simple. En voici le déroulé :

une URL telle que http://www.exemple.com/monDossier/monFichier.html est donnée au navigateur par un internaute ;
le navigateur en extrait le nom de domaine www.exemple.com et à partir de cette information sait comment trouver le serveur Web distant (grâce à une opération dite de DNS lookup qui résout un nom de domaine en une adresse IP) ;
à partir de là, une connexion (basée sur les protocoles TCP/IP) est établie entre le navigateur et le serveur Web distant ;
une requête HTTP demandant la ressource monFichier.html est alors transmise par le navigateur ;
le serveur Web trouve la ressource correspondante et en renvoie le contenu dans une réponse HTTP ;
le navigateur est désormais capable d’afficher le fichier HTML à l’internaute.

Entête HTTP d’une requête

Voici un exemple d’entête de requête envoyé par un navigateur :

GET /monDossier/monFichier.html HTTP/1.1
Host: www.exemple.com
User-Agent : Mozilla/5.0
Accept : text/html

Nous avons ici plusieurs informations :

GET est la méthode employée (voir ci-dessous)
/mondossier/monFichier.html correspond à l’URL de la ressource demandée
HTTP/1.1 : la version du protocole est la 1.1
Host indique le nom de domaine du serveur et (facultativement) le numéro de port TCP sur lequel le serveur écoute.
Mozilla/5.0 : préfixe historique présent dans tous les navigateurs (Chrome, Firefox, Safari, Edge) ; la suite de la ligne identifie le navigateur et le système
text/html : le client s’attend à recevoir du HTML

Une requête HTTP utilise une méthode (c’est une commande qui demande au serveur d’effectuer une certaine action). Voici la liste des méthodes disponibles :

GET, HEAD, POST, OPTIONS, CONNECT, TRACE, PUT, PATCH, DELETE

Détaillons quatre de ces méthodes :

GET : c’est la méthode la plus courante pour demander une ressource. Elle est sans effet sur la ressource.
POST : cette méthode est utilisée pour soumettre des données en vue d’un traitement (côté serveur). Typiquement c’est la méthode employée lorsque l’on envoie au serveur les données issues d’un formulaire.
DELETE : cette méthode permet de supprimer une ressource sur le serveur.
PUT : cette méthode permet de modifier une ressource sur le serveur

Entête HTTP d’une réponse

Voici un exemple d’entête de réponse renvoyé par un serveur Web tel que Apache :

HTTP/1.1 200 OK
Date: Thu, 17 feb 2020 12:02:32 GMT
Server: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
 <h1>Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>.</p>
</body>
</html>

Commençons par la fin : le serveur renvoie du code HTML. Une fois ce code reçu par le client, il est interprété par le navigateur qui affiche le résultat à l’écran. Cette partie correspond au corps de la réponse.

La première ligne se nomme la ligne de statut : HTTP/1.1 est la version de HTTP utilisé par le serveur.

200 est le code indiquant que le document recherché par le client a bien été trouvé par le serveur. Il existe d’autres codes dont un que vous connaissez peut-être déjà : le code 404 (qui signifie « Le document recherché n’a pu être trouvé »). Ces codes sont détaillés plus loin.

Les cinq lignes suivantes constituent l’en-tête de la réponse, une ligne nous intéresse plus particulièrement :

Server: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4

Le serveur Web qui a fourni la réponse http ci-dessus a comme système d’exploitation une distribution GNU/Linux nommée Debian (pour en savoir plus sur GNU/Linux, n’hésitez pas à faire vos propres recherches). Apache est le coeur du serveur web puisque c’est ce logiciel qui va gérer les requêtes http (recevoir les requêtes http en provenance des clients et renvoyer les réponses http). Il existe d’autres logiciels capables de gérer les requêtes http (nginx, lighttpd, etc.) mais Apache reste très répandu, aux côtés de nginx, qui équipe aujourd’hui davantage de serveurs web mondiaux.

Protocole HTTPS

Le protocole HTTPS est la version sécurisée du protocole HTTP. Par sécurisé en entend que les données sont chiffrées avant d’être transmises sur le réseau.

Voici les différentes étapes d’une communication client-serveur utilisant le protocole HTTPS :

le client demande au serveur une connexion sécurisée (en utilisant « https » à la place de « http » dans la barre d’adresse du navigateur web) ;
le serveur répond au client qu’il est OK pour l’établissement d’une connexion sécurisée. Afin de prouver au client qu’il est bien celui qu’il prétend être, le serveur fournit au client un certificat prouvant son « identité ». En effet, il existe des attaques dites man in the middle, où un serveur-pirate essaye de se faire passer, par exemple, pour le serveur d’une banque : le client, pensant être en communication avec le serveur de sa banque, va saisir son identifiant et son mot de passe, identifiant et mot de passe qui seront récupérés par le serveur pirate. Afin d’éviter ce genre d’attaque, des organismes délivrent donc des certificats prouvant l’identité des sites qui proposent des connexions « https ».
à partir de ce moment-là, les échanges entre le client et le serveur seront chiffrés grâce à un système de clé de chiffrement (nous aborderons cette notion de clé de chiffrement l’année prochaine, en Terminale). Même si un pirate parvient à intercepter les données circulant entre le client et le serveur, ces dernières ne lui seraient d’aucune utilité, car totalement incompréhensible à cause du chiffrement (seuls le client et le serveur sont aptes à déchiffrer ces données)

D’un point vu strictement pratique il est nécessaire de bien vérifier que le protocole HTTPS est bien utilisé (l’adresse commence par « https ») avant de transmettre des données sensibles (coordonnées bancaires…). Si ce n’est pas le cas, passez votre chemin, car toute personne qui interceptera les paquets de données sera en mesure de lire vos données sensibles.

Liste des codes HTTP

En tant que simple internaute, on peut être confronté à des codes de réponse HTTP (par exemple quand on tape une URL incorrecte). Voici une description des principales valeurs à connaitre :

Code HTTP	Explication
Code HTTP 200 : Ok	Cela signifie que tout va bien et que le serveur Web renvoie le contenu d’une ressource dans le corps (body) de la réponse
Code HTTP 301 : Moved Permanently	C’est une redirection permanente vers une URL indiquée dans la réponse (champs ‘Location’).
Code HTTP 302 : Moved temporarily	C’est une redirection temporaire vers une URL indiquée.
Code HTTP 400 : Bad request	Cela signifie que la requête reçue par le serveur Web ne respecte pas le format défini par le protocole HTTP
Code HTTP 401 : Unauthorized	Cela signifie que l’accès à l’URL est sécurisée. Le serveur Web vous demande ainsi de lui indiquer un login/mot de passe
Code HTTP 403 : Forbidden	L’accès à cette ressource est interdit, même pour un utilisateur identifié (une authentification manquante correspond au code 401)
Code HTTP 404 : File not found	Cela signifie que le serveur Web n’a pas trouvé de ressource correspondant à l’URL indiquée
Code HTTP 500 : Internal Error	Cela signifie que le serveur Web n’a pas été capable de traiter la requête HTTP. Cela peut indiquer un problème très sérieux.

Liste des principaux champs HTTP

Il est utile de connaître les champs HTTP les plus connus :

Pour les requêtes

Champ HTTP	Explication
Host	c’est le nom du domaine visé. Un serveur Web peut gérer plusieurs domaines en même temps sur la même machine. On dit alors qu’il gère des ‘virtual hosts’.
User-Agent	ce champ est utilisé par les navigateurs pour indiquer leur nom. Les crawlers des moteurs de recherches utilise aussi ce champ pour se faire reconnaitre (ex: googlebot pour Google)
Referer	quand un utilisateur clique sur un lien externe à partir d’une page, le navigateur indique dans ce champ l’URL de la source. Cela peut être très utile pour analyser la source de notre trafic.

Pour les réponses

Content-Type	le serveur Web indique le type (‘MIME type’) de la ressource qu’il renvoie (image, html, pdf…). Il peut même indiquer parfois l’encodage des caractères du contenu. Par exemple: text/html; charset=UTF-8
Server	le serveur Web indique sa signature dans ce champ.
Set-Cookie	le serveur Web (souvent guidé par les lignes de code du développeur d’un site Web) peut indiquer au navigateur des valeurs de cookies. Ces valeurs seront renvoyés par le navigateur dans les requêtes futures.
Location	c’est le champ utilisé lors des redirections pour indiquer la nouvelle URL cible

12 - CSS 14 - HTML DOM