Le fonctionnement du Web

Serveurs web

Définition : Serveur web

Un serveur web est un logiciel qui traite les requêtes HTTP de clients.

Il est installé sur une machine hébergeant des documents (HTML, CSS, JavaScript, etc.) et est accessible depuis Internet ou un réseau local (un intranet).

Les ressources servies par le serveur peuvent être statiques, c'est-à-dire sans qu'elles existent préalablement à la requête (un fichier HTML, une image PNG, etc.) ou dynamiques, c'est-à-dire construites à chaque requête faite au serveur.

Exemple : Serveurs HTTP

Apache : le serveur web le plus utilisé avec 44,3% des parts de marché en février 2019.
Nginx : le deuxième serveur web le plus utilisé mais est le premier parmi les 1000 sites les plus actifs.
Node.js : un environnement d'exécution JavaScript en dehors du navigateur qui fait aussi office de serveur HTTP.

À retenir

Un serveur hébergeant des fichiers web a besoin d'un serveur web pour les rendre disponibles à travers le protocole HTTP.
Apache et Nginx sont les serveurs web les plus utilisés.

Navigateurs web

Définition : Navigateurs web

Un navigateur web est client HTTP qui a trois rôles.

Effectuer des requêtes HTTP (GET, POST, etc.).
Comprendre les réponses à ces requêtes.
Interpréter les fichiers web (HTML, CSS, JavaScript) retournés.

Remarque :

Tous les navigateurs web possèdent un interpréteur JavaScript permettant d'exécuter ce langage sur l'ordinateur client.

Fondamental : Les outils de développement sous Firefox

Les navigateurs possèdent aussi une partie « Outils de développement » destinée à aider les développeurs web dans leur activité.

Sous Firefox, ces outils sont disponibles en appuyant sur F12 ou clic droit > Inspecter l'élément.

Extrait du moniteur réseau quand on accède à www.mozilla.org

Outils de développement Firefox (onglet requête)

À retenir

Les navigateurs web sont des clients HTTP.
Ils interprètent les langages du Web (HTML, CSS, JS).
Ils disposent d'outils de développement permettant d'inspecter les fichiers des pages web et les requêtes et réponses HTTP.

URL : Uniform Resource Locator

Définition : Les URL

Les URL sont nées en même temps que le World Wide Web et permettent d'identifier une ressource sur un serveur web.

Exemple :

Lorsque https://www.wikipedia.org/wiki/URL est rentrée dans un navigateur web, ce dernier fait une requête GET sur la ressource « /wiki/URL » du serveur pointé par www.wikipedia.org, en sécurisant la connexion grâce à HTTPS (que nous verrons par la suite).

Syntaxe : Éléments de syntaxe d'une URL

Certains caractères sont réservés pour un usage spécifique. Par exemple :

le caractère / est réservé pour indiquer le chemin des fichiers à consulter,

le caractère ? est réservé pour annoncer les paramètres à transmettre au serveur,
le caractère = est réservé pour indiquer la valeur des paramètres,
le caractère # est réservé pour indiquer un fragment, souvent une partie spécifique de la page web (par exemple, un paragraphe).

Lorsqu'un caractère réservé doit être utilisé pour autre chose dans l'URL, il est remplacé par un symbole pourcent suivi de son code ASCII au format hexadécimal ('/' devient %2F et '?' devient %3F).

À retenir

Une URL permet d'identifier une ressource précise sur un serveur web donné.
Les URL permettent de passer des paramètres aux serveurs web.

Codes de retour HTTP

Définition : Code HTTP

Un code HTTP est un code à 3 chiffres qui est présent dans chaque réponse HTTP du serveur. Ce code est destiné au client HTTP pour lui indiquer le statut de sa requête.

Les codes HTTP sont séparés en 5 familles, qui se distinguent par le premier digit du code retour :

1xx : Informations
2xx : Succès
3xx : Redirections
4xx : Erreur du client
5xx : Erreur du serveur

Exemple : Les codes HTTP courants

Il existe plusieurs dizaines de code HTTP, mais certains sont plus utilisés que d'autres, en voici quelques-uns :

200 OK : « Tout est bon »,
201 Created: « Ressource ajoutée avec succès »,
401 Unauthorized: « Vous n'avez pas le droit d'accéder à cette ressource, il faut une authentification »,
404 Not Found: « Ressource non trouvée »,
500 Internal Server Error: « Erreur du serveur ».

Exemple : Observer les codes HTTP

$ curl -I https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTP/2 200

$ curl -I https://fr.wikipedia.org/fausse_page                     
HTTP/2 404

À retenir

Chaque réponse HTTP comporte un code qui permet d'indiquer au client le statut de la requête.
Il existe 5 familles de code différents (informations, succès, redirections, erreurs client, erreurs serveur)

HTTPS : la version chiffrée du protocole HTTP

Définition : HTTPS et TLS

HTTPS (pour HTTP Secure) est une extension de HTTP qui permet une communication sécurisée.

Pour cela il encapsule les requêtes HTTP dans un protocole appelé TLS (pour Transport Layer Security) qui permet de réaliser des échanges chiffrés.

Fondamental :

Tout site web qui veut rendre possible l'accès en HTTPS doit se procurer un certificat lié à son nom de domaine. Sans cela, HTTPS ne fonctionnera pas, et un message d'avertissement s'affichera dans le navigateur pour indiquer que le site n'est pas digne de confiance pour établir un échangé sécurisé.

Auto-évaluation

Quiz

Quiz HTTP

À quoi sert une en-tête HTTP ?

À ajouter des informations supplémentaires, comme des méta-données, à la requête

C'est une requête envoyée juste avant la vrai requête (donc "en tête") pour préparer la connexion avec le serveur

C'est une valeur retournée par le serveur qui est stockée en mémoire du navigateur

Que veut dire HTTP ?

High Transfert Technical Protocol

HyperText Transfert Protocol

HyperText Transport Parameter

Quel est le port TCP utilisé par HTTP ?

Dans le contexte de HTTP, que signifie le code 404 ?

Un code retourné par le serveur pour annoncer que la ressource demandée existe mais qu'elle nécessite de s'authentifier

Le numéro de code de la dernière version du protocole HTTP

Un code retourné par le serveur pour annoncer que la ressource demandée n'a pas été trouvée

Le nom de code du projet 404 qui a donné naissance au protocole HTTP

Quiz URL

Dans l'URL https://www.picasoft.net/co/asso.html, que représente /co/asso.html ?

Le nom de domaine

Le protocole

Le chemin de la ressource

Un paramètre de la requête

Dans l'adresse https://www.gandi.net/fr/simple-hosting, quel est l'adresse du serveur web ?

https://www.gandi.net

gandi.net

www.gandi.net

gandi.net/fr/simple-hosting

À quoi sert le caractère ? dans une URL ?

À indiquer un fragment (ou ancre) dans la page

À indiquer les paramètres de la requête

À indiquer la valeur des paramètres de la requête

Quizz HTTPS

Lorsque j'utilise HTTP, qui peut avoir accès aux données échangées ?

Le client web (navigateur)

Le serveur Web distant

Les personnes qui inspectent le trafic sur le réseau

Mon fournisseur d'accès à Internet

Lorsque j'utilise HTTPS, qui peut avoir accès aux données échangées ?

Le client web (navigateur)

Le serveur Web distant

Les personnes qui inspectent le trafic sur le réseau

Mon fournisseur d'accès à Internet

TLS est :

Une alternative au protocole HTTP

Un protocole d'échange chiffré utilisé par HTTPS

Un outil pour créer les certificats des sites que l'on héberge

Pour activer HTTPS sur mon site il faut

Que j'obtienne un certificat

Que je devienne une autorité de certification

Rien, il suffit d'activer TLS sur son serveur Web

Quiz enjeux de HTTPS

Quelles sont les garanties que HTTPS apporte ?

Le site que l'on visite stocke les données de manière sécurisée

Les communications avec le site sont chiffrées

Le serveur web qui répond à nos requêtes est bien celui du site que l'on souhaite visiter

Le site visité n'est pas un site malveillant

Let's Encrypt est :

Un protocole de chiffrement pour HTTPS

Un outil pour configurer son serveur web en HTTPS

Une autorité de certification gratuite et accessible au public

Quels usages non légitime les autorités de certification pourraient avoir de leur pouvoir ?

Créer des certificats usurpant l'identité d'autres sites

Désactiver l'accès à un site web dans un navigateur

Permettre, par manque de sécurisation de ses certificats, à des pirates d'obtenir la possibilité de créer des certificats eux-mêmes

Quiz HTTP

À quoi sert une en-tête HTTP ?

À ajouter des informations supplémentaires, comme des méta-données, à la requête

C'est une requête envoyée juste avant la vrai requête (donc "en tête") pour préparer la connexion avec le serveur

C'est une valeur retournée par le serveur qui est stockée en mémoire du navigateur

Que veut dire HTTP ?

High Transfert Technical Protocol

HyperText Transfert Protocol

HyperText Transport Parameter

Quel est le port TCP utilisé par HTTP ?

Le port 80

Dans le contexte de HTTP, que signifie le code 404 ?

Un code retourné par le serveur pour annoncer que la ressource demandée existe mais qu'elle nécessite de s'authentifier

Le numéro de code de la dernière version du protocole HTTP

Un code retourné par le serveur pour annoncer que la ressource demandée n'a pas été trouvée

Le nom de code du projet 404 qui a donné naissance au protocole HTTP

Quiz URL

Dans l'URL https://www.picasoft.net/co/asso.html, que représente /co/asso.html ?

Le nom de domaine

Le protocole

Le chemin de la ressource

Un paramètre de la requête

Dans l'adresse https://www.gandi.net/fr/simple-hosting, quel est l'adresse du serveur web ?

https://www.gandi.net

gandi.net

www.gandi.net

gandi.net/fr/simple-hosting

À quoi sert le caractère ? dans une URL ?

À indiquer un fragment (ou ancre) dans la page

À indiquer les paramètres de la requête

À indiquer la valeur des paramètres de la requête

Quizz HTTPS

Lorsque j'utilise HTTP, qui peut avoir accès aux données échangées ?

Le client web (navigateur)

Le serveur Web distant

Les personnes qui inspectent le trafic sur le réseau

Mon fournisseur d'accès à Internet

HTTP étant un protocole "en clair", tout ce qui est échangé est lisible pour toute personne sur le trajet des échanges.

Lorsque j'utilise HTTPS, qui peut avoir accès aux données échangées ?

Le client web (navigateur)

Le serveur Web distant

Les personnes qui inspectent le trafic sur le réseau

Mon fournisseur d'accès à Internet

Grâce à HTTPS, les communications sont chiffrées entre le client et le serveur

TLS est :

Une alternative au protocole HTTP

Un protocole d'échange chiffré utilisé par HTTPS

Un outil pour créer les certificats des sites que l'on héberge

TLS est le protocole qui permet d'encapsuler HTTP pour mettre en place HTTPS

Pour activer HTTPS sur mon site il faut

Que j'obtienne un certificat

Que je devienne une autorité de certification

Rien, il suffit d'activer TLS sur son serveur Web

Quiz enjeux de HTTPS

Quelles sont les garanties que HTTPS apporte ?

Le site que l'on visite stocke les données de manière sécurisée

Les communications avec le site sont chiffrées

Le serveur web qui répond à nos requêtes est bien celui du site que l'on souhaite visiter

Le site visité n'est pas un site malveillant

Let's Encrypt est :

Un protocole de chiffrement pour HTTPS

Un outil pour configurer son serveur web en HTTPS

Une autorité de certification gratuite et accessible au public

Quels usages non légitime les autorités de certification pourraient avoir de leur pouvoir ?

Créer des certificats usurpant l'identité d'autres sites

Désactiver l'accès à un site web dans un navigateur

Permettre, par manque de sécurisation de ses certificats, à des pirates d'obtenir la possibilité de créer des certificats eux-mêmes

Enquête MDN

Voici les informations d'une requête HTTP effectuée à l'aide de curl (en utilisant l'option -v).

POST / HTTP/2
Host: www.example.com
user-agent: curl/7.72.0
accept: */*
authorization: Basic YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ==
content-length: 14
content-type: application/x-www-form-urlencoded

Voici les informations liées à la réponse du serveur.

HTTP/2 200
accept-ranges: bytes
cache-control: max-age=604800
content-type: text/html; charset=UTF-8
date: Fri, 30 Oct 2020 13:58:45 GMT
etag: "3147526947"
expires: Fri, 06 Nov 2020 13:58:45 GMT
last-modified: Thu, 17 Oct 2019 07:18:26 GMT
server: EOS (vny/0454)
content-length: 1256

On s'aidera de la section HTTP sur MDN pour répondre aux questions : developer.mozilla.org/en-US/docs/Web/HTTP

Quel est le type de requête HTTP envoyée ?

developer.mozilla.org/fr/docs/Web/HTTP/Méthode

GET

HEAD

POST

PUT

DELETE

Quel est l'adresse du serveur que l'on a contacté ?

developer.mozilla.org/fr/docs/Web/HTTP/Headers/Host

Que nous indique l'en-tête Authorization ?

developer.mozilla.org/fr/docs/Web/HTTP/Headers/Authorization

La requête s'est authentifiée avec l'utilisateur Basic et le mot de passe YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ

La requête s'est authentifiée en utilisant la méthode Basic

La requête s'est authentifiée en utilisant la chaîne d'authentification YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ==

Quel est le code de retour de cette requête ?

developer.mozilla.org/fr/docs/Web/HTTP/Status

Quel est le type de requête HTTP envoyée ?

developer.mozilla.org/fr/docs/Web/HTTP/Méthode

GET

HEAD

POST

PUT

DELETE

C'est une requête POST, comme indiqué dans la première ligne de la requête.

Quel est l'adresse du serveur que l'on a contacté ?

developer.mozilla.org/fr/docs/Web/HTTP/Headers/Host

www.example.com

L'en-tête Host de la requête indique que l'adresse est www.example.com.

Que nous indique l'en-tête Authorization ?

developer.mozilla.org/fr/docs/Web/HTTP/Headers/Authorization

La requête s'est authentifiée avec l'utilisateur Basic et le mot de passe YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ

La requête s'est authentifiée en utilisant la méthode Basic

La requête s'est authentifiée en utilisant la chaîne d'authentification YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ==

Si c'est le type d'authentification "Basic" qui est utilisé, les identifiants sont construits de la manière suivante :
L'identifiant de l'utilisateur et le mot de passe sont combinés avec deux-points : aladdin:sesameOuvreToi
Cette chaîne de caractères est ensuite encodée en base64 : YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ==

Quel est le code de retour de cette requête ?

developer.mozilla.org/fr/docs/Web/HTTP/Status

200 OK

Le code HTTP 200, qui correspond simplement à "OK".