Comment fonctionne le web : client, serveur, DNS, HTTP et navigateur

Objectif

Comprendre, étape par étape, ce qui se passe entre le moment où un client tape www.riad-yasmine.ma dans son navigateur et celui où la page s'affiche. Vous saurez lire une URL, expliquer le rôle du DNS, décrire une requête et une réponse HTTP, et utiliser les outils de développement du navigateur ainsi que curl pour observer tout cela.

L'essentiel

• Le web fonctionne en client / serveur : le navigateur (client) demande, le serveur répond. Le serveur ne parle jamais le premier.
• Une URL se découpe en protocole, nom d'hôte, port, chemin, paramètres et ancre.
• Le DNS traduit un nom (www.riad-yasmine.ma) en adresse IP (196.200.x.x), comme un annuaire téléphonique.
• HTTP est un dialogue en texte : une requête (méthode + chemin + en-têtes) et une réponse (code de statut + en-têtes + corps).
• HTTPS = HTTP chiffré par TLS : personne entre le client et le serveur ne peut lire ni modifier les échanges.
• Les outils de développement (touche F12) permettent de voir chaque requête, le HTML, le CSS et les erreurs JavaScript.

1. Page, site, serveur, moteur de recherche

Quatre mots que l'on confond souvent :

Un navigateur (Firefox, Chrome, Edge, Safari) est le client : c'est lui qui va chercher les pages et les dessine à l'écran.

2. Le modèle client / serveur

Imaginez le café « Dar Atay » à Fès. Le client (vous) passe commande au serveur (le garçon de café). Le serveur va en cuisine, revient avec le thé à la menthe… ou vous dit « désolé, il n'y en a plus ». Le web suit exactement ce schéma :

 Navigateur (client)                          Serveur web
 ───────────────────                          ───────────
 1. « Donne-moi /chambres.html »   ───────▶
                                   ◀───────   2. « Voici le fichier (200 OK) »
 3. lit le HTML, découvre style.css,
    patio.jpg, app.js
 4. « Donne-moi /style.css »        ───────▶
                                   ◀───────   5. « Voici le CSS »
 ... une requête par ressource ...

Une seule page affichée = souvent des dizaines de requêtes : le HTML d'abord, puis chaque feuille de style, chaque image, chaque script, chaque police.

3. Lire une URL

https://www.riad-yasmine.ma:443/chambres/suite-atlas.html?lang=fr&nuits=3#tarifs
└─┬──┘   └───────┬─────────┘└┬┘└────────────┬─────────┘ └──────┬──────┘ └─┬──┘
protocole    nom d'hôte    port          chemin           paramètres    ancre

En JavaScript (vous le verrez au niveau 2), l'objet URL fait ce découpage pour vous :

const u = new URL("https://www.riad-yasmine.ma/chambres.html?lang=fr");
u.hostname;                 // "www.riad-yasmine.ma"
u.pathname;                 // "/chambres.html"
u.searchParams.get("lang"); // "fr"

4. Le DNS : l'annuaire du web

Les ordinateurs se trouvent grâce à des adresses IP (196.200.131.10, ou en IPv6 2a01:4f8::1). Les humains préfèrent les noms. Le DNS (Domain Name System) fait la traduction.

Quand vous visitez www.riad-yasmine.ma pour la première fois :

1. le navigateur regarde dans son cache ; puis le système regarde le fichier /etc/hosts (Linux) ou C:\Windows\System32\drivers\etc\hosts (Windows) ;
2. sinon, il interroge le résolveur DNS de votre fournisseur (Maroc Telecom, inwi, Orange) ou un résolveur public ;
3. le résolveur demande aux serveurs racine, qui l'envoient vers les serveurs de .ma (gérés par l'ANRT), qui l'envoient vers les serveurs DNS du domaine riad-yasmine.ma ;
4. ces derniers donnent la réponse finale : l'adresse IP. Elle est gardée en cache un certain temps (le TTL).

Les enregistrements DNS les plus courants :

Pour interroger le DNS depuis un terminal :

nslookup www.riad-yasmine.ma        # Windows, Linux, macOS
dig +short www.riad-yasmine.ma      # Linux (paquet dnsutils / bind-utils)
getent hosts localhost              # ce que voit le système, /etc/hosts compris

5. HTTP : la requête

Une fois l'IP connue, le navigateur ouvre une connexion (TCP, port 443 pour https) et envoie une requête HTTP. C'est du texte :

GET /chambres.html HTTP/1.1
Host: www.riad-yasmine.ma
User-Agent: Mozilla/5.0 (Windows NT 10.0) Firefox/131.0
Accept: text/html
Accept-Language: fr-MA,fr;q=0.9,ar;q=0.8

• la ligne de requête : la méthode, le chemin, la version ;
• les en-têtes : une information par ligne, Nom: valeur. Host est obligatoire en HTTP/1.1 : un même serveur héberge souvent plusieurs sites ;
• une ligne vide, puis éventuellement un corps (pour envoyer un formulaire, par exemple).

Les méthodes principales :

6. HTTP : la réponse et les codes de statut

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 5120
Cache-Control: max-age=600

<!doctype html>
<html lang="fr"> ...

Le code de statut (3 chiffres) résume le résultat. Le premier chiffre donne la famille :

Retenez la règle : 4xx = c'est la demande qui pose problème (mauvaise adresse, pas le droit), 5xx = c'est le serveur qui a planté. Quand la boutique d'artisanat affiche une page blanche avec un 500, inutile de vérifier l'adresse : il faut lire les journaux du serveur.

L'en-tête Content-Type indique la nature du corps : text/html, text/css, application/javascript, image/webp, application/json… Le navigateur s'en sert pour savoir quoi faire du contenu.

7. HTTPS : le cadenas

En HTTP simple, tout circule en clair : sur le Wi-Fi d'un café, un voisin malveillant pourrait lire le mot de passe tapé sur votre site ou modifier la page. HTTPS ajoute une couche de chiffrement (TLS) :

• le serveur présente un certificat qui prouve son identité (délivré par une autorité, par exemple Let's Encrypt, gratuite) ;
• le navigateur et le serveur se mettent d'accord sur une clé secrète ;
• tout le reste de l'échange est chiffré.

Aujourd'hui, un site sans HTTPS est marqué « Non sécurisé » par les navigateurs, est moins bien référencé, et certaines fonctions (géolocalisation, notifications…) y sont interdites. Tout site doit être en HTTPS, même une simple vitrine.

8. Ce que fait le navigateur avec la réponse

Recevoir le HTML n'est que le début. Le navigateur :

1. analyse le HTML et construit un arbre d'objets, le DOM (Document Object Model) ;
2. découvre les ressources liées (<link>, <img>, <script>) et les demande ;
3. analyse le CSS et calcule le style de chaque élément ;
4. calcule la mise en page (position et taille de chaque boîte) ;
5. peint les pixels à l'écran ;
6. exécute le JavaScript, qui peut modifier le DOM… et provoquer un nouveau calcul de mise en page.

C'est pour cela que l'ordre et le poids des fichiers comptent : un gros script placé en haut de page bloque l'affichage (leçon 4.2).

9. Les outils de développement du navigateur

Appuyez sur F12 (ou clic droit → « Inspecter ») dans Firefox, Chrome ou Edge. Les onglets essentiels :

Exercice à faire sur votre ordinateur : ouvrez un site marocain que vous connaissez, onglet Réseau, rechargez (Ctrl+F5). Repérez la première requête (le HTML), son code de statut, son Content-Type, puis comptez les images. Cochez « Désactiver le cache » et choisissez une limitation « 3G » : vous verrez ce que vivent les clients sur un réseau mobile lent.

10. Observer HTTP en ligne de commande avec curl

curl est le couteau suisse du développeur web : il envoie des requêtes HTTP depuis le terminal.

curl http://127.0.0.1:8080/                 # affiche le corps (le HTML)
curl -i http://127.0.0.1:8080/              # -i : en-têtes + corps
curl -I http://127.0.0.1:8080/              # -I : requête HEAD, en-têtes seulement
curl -v http://127.0.0.1:8080/              # -v : tout le dialogue (> envoyé, < reçu)
curl -L http://127.0.0.1:8080/promo         # -L : suivre les redirections
curl -X POST -d "nom=Amina" http://127.0.0.1:8080/reserver   # envoyer des données

Avec -v, les lignes qui commencent par > sont ce que vous envoyez, celles qui commencent par < ce que le serveur répond. C'est exactement ce que montre l'onglet Réseau du navigateur.

11. Un mini serveur web en Node.js

Pour développer, on fait tourner un serveur sur sa propre machine : il écoute sur l'adresse 127.0.0.1 (ou localhost), qui désigne toujours « moi-même ». Voici l'essentiel du serveur fourni dans le lab :

const http = require("http");
const serveur = http.createServer((req, res) => {
  if (req.url === "/") {
    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
    res.end("<h1>Bienvenue au Riad Yasmine</h1>");
  } else {
    res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
    res.end("Page introuvable");
  }
});
serveur.listen(8080, "127.0.0.1");

Vous n'avez pas encore besoin de comprendre chaque ligne : retenez qu'un serveur web reçoit une requête (req), choisit un code de statut et des en-têtes, puis envoie un corps (res.end). Nginx, Apache ou Express font la même chose, en beaucoup plus complet.

node serveur.js &                  # lancer le serveur en arrière-plan
curl -i http://127.0.0.1:8080/     # le tester
kill %1                            # l'arrêter (ou : kill PID)

Pièges fréquents

• Confondre 4xx et 5xx : un 404 vient d'une mauvaise adresse ou d'un fichier absent ; un 500 vient d'une erreur dans le code du serveur.
• Oublier que le cache existe : après une modification, le navigateur peut afficher l'ancienne version. Rechargez avec Ctrl+F5 ou cochez « Désactiver le cache » dans l'onglet Réseau.
• Croire que l'ancre (#tarifs) est envoyée au serveur : elle reste dans le navigateur.
• Changer un enregistrement DNS et s'attendre à un effet immédiat : les anciennes réponses restent en cache pendant le TTL (parfois plusieurs heures).

Lab

Un serveur web minimal du Riad Yasmine est prêt dans /root/web/serveur.js. Vous allez :

1. écrire à la main une requête HTTP dans un fichier, pour bien en connaître la forme ;
2. lancer le serveur en arrière-plan et enregistrer les en-têtes de sa réponse avec curl -I ;
3. observer une redirection 301 et son en-tête Location ;
4. provoquer une erreur 404 et enregistrer la réponse complète.

Astuce : quand le serveur tourne en arrière-plan, il affiche chaque requête reçue dans le terminal. Arrêtez-le avec kill %1 quand vous avez fini.

Quiz

1. Quelles sont les parties de l'URL https://boutique-fes.ma/tapis?couleur=rouge#avis ?
2. À quoi sert le DNS ?
3. Que signifient les codes 301, 404 et 500 ?
4. Pourquoi l'en-tête Host est-il indispensable dans une requête HTTP/1.1 ?
5. Quel onglet des outils de développement utilisez-vous pour savoir pourquoi une image ne s'affiche pas ?

Sources de référence : MDN Web Docs en français (licence CC BY-SA 2.5). Texte original MasterLinux.