Navigateurs, HTTPS et adresses IP

Tu tapes l'adresse d'une page, tu appuies sur Entrée, et un instant plus tard, la page s'affiche, toute prête. En chemin, il se passe trois choses qui méritent qu'on se pose des questions : qui transforme le code en image ? Qui veille à ce que personne n'intercepte ton mot de passe ? Et comment les données savent-elles vers quel ordinateur se diriger ?

Le navigateur web

Un navigateur est un programme qui télécharge les fichiers des sites web et les affiche à l'écran. Les navigateurs les plus populaires sont Google Chrome, Mozilla Firefox, Safari et Microsoft Edge. Chaque navigateur possède un moteur de rendu, qui transforme le code HTML, CSS et JavaScript en une page visuelle. Chrome et Edge utilisent le moteur Blink, Firefox utilise Gecko, et Safari utilise WebKit.

Mohamed explique : « Un navigateur est comme un scribe qui lit les hiéroglyphes sur le papyrus et les traduit en belles images sur le mur du temple ! »

Les différents moteurs interprètent parfois le même code de façon légèrement différente, c'est pourquoi on teste les pages dans plusieurs navigateurs. Je te conseille d'installer au moins deux navigateurs avec des moteurs différents, par exemple Chrome et Firefox.

Comment un navigateur affiche-t-il une page ?

Une fois que les fichiers de la page sont arrivés sur ton ordinateur, le moteur passe par cinq étapes :

1. Analyse du HTML - le navigateur lit le code HTML et construit l'arbre DOM (Document Object Model)
2. Analyse du CSS - il analyse les styles et crée le modèle CSSOM
3. Render Tree - il combine le DOM et le CSSOM en un arbre de rendu
4. Layout - il calcule la position et la taille de chaque élément
5. Paint - il dessine les pixels à l'écran

L'ensemble ne prend généralement qu'une fraction de seconde. Tu retrouveras le DOM et le CSSOM dans le module sur le CSS - ce sont eux qui décident quel style s'applique à quel élément.

Que reçoit le navigateur du serveur ?

Avant que le moteur commence son analyse, il doit savoir ce qu'il a réellement reçu. Le serveur commence chaque réponse par une ligne de statut, puis envoie des en-têtes, c'est-à-dire de courtes informations sur l'envoi :

1HTTP/1.1 200 OK
2Content-Type: text/html

La première ligne contient la version du protocole (HTTP/1.1), le code de statut (200) et sa description (OK) - tu connais le code 200 depuis la leçon précédente, où il signifie « succès ». L'en-tête Content-Type indique au navigateur que la réponse contient un document HTML, qu'il faut donc afficher, et non, par exemple, télécharger comme un fichier. Le contenu de la page lui-même n'arrive qu'après les en-têtes, séparé d'eux par une ligne vide. Tu peux observer les en-têtes toi-même : appuie sur F12, ouvre l'onglet Network (Réseau) et actualise la page.

HTTPS - Communication sécurisée

Le HTTPS (HyperText Transfer Protocol Secure) est la version chiffrée du HTTP. La différence est cruciale :

• HTTP - les données sont envoyées « en clair » - n'importe qui peut les intercepter. Comme un messager sans protection sur une route dangereuse.
• HTTPS - les données sont chiffrées à l'aide de SSL/TLS. Comme un messager avec une escorte armée et un message chiffré.

SSL est l'ancien nom - aujourd'hui, les connexions sont chiffrées par son successeur, TLS. Par défaut, HTTP utilise le port 80, et HTTPS le port 443. Tu reconnais le HTTPS à l'icône du cadenas dans la barre d'adresse du navigateur. Ne saisis jamais de mot de passe ni de données personnelles sur une page sans cadenas ! Le cadenas signifie toutefois que la connexion est chiffrée, et non que le site est honnête - les escrocs peuvent eux aussi avoir le HTTPS, alors vérifie toujours l'adresse dans la barre.

Une comparaison comme celle-ci rend très bien dans un tableau. Tu construis un tableau à partir de lignes <tr>, qui contiennent des cellules d'en-tête <th> et des cellules ordinaires <td> :

1<table>
2    <tr>
3        <th>Caractéristique</th>
4        <th>HTTP</th>
5        <th>HTTPS</th>
6    </tr>
7    <tr>
8        <td>Chiffrement</td>
9        <td>Aucun</td>
10        <td>SSL/TLS</td>
11    </tr>
12</table>
13<div>Ne saisis jamais de mot de passe sur une page HTTP !</div>

La première ligne contient les en-têtes des colonnes, que le navigateur affiche en gras par défaut, et les lignes suivantes contiennent les données. L'élément <div> sous le tableau est un simple conteneur pour l'avertissement : il ne décore rien par lui-même, tu lui donneras son apparence plus tard avec le CSS. Nous verrons les tableaux en détail plus loin dans ce module.

Les adresses IP

Chaque appareil d'un réseau possède sa propre adresse IP (Internet Protocol), unique au sein de ce réseau. C'est comme l'adresse d'une maison dans le monde numérique - sans elle, les données ne sauraient pas où aller.

L'IPv4 est le format le plus répandu : quatre groupes de nombres de 0 à 255, séparés par des points, par exemple 192.168.1.1 ou 93.184.216.34. Cela donne environ 4,3 milliards d'adresses - trop peu aujourd'hui.

L'IPv6 est un format plus récent, avec des adresses plus longues : 2001:0db8:85a3:0000:0000:8a2e:0370:7334 - il a été créé parce que les adresses IPv4 viennent à manquer. Les adresses IPv6 suffisent pour tous les appareils du monde, avec une marge énorme.

L'adresse 192.168.1.1 est un exemple d'adresse privée, comme celles qu'un routeur distribue dans un réseau domestique. Elle est unique dans ta maison, mais chez ton voisin, exactement la même adresse fonctionne aussi.

Mohamed résume : « Une adresse IP est comme des coordonnées GPS - elle indique l'emplacement exact d'un ordinateur sur le réseau. Et le DNS convertit un nom facile à retenir en ces coordonnées ! »

Pratique

Dans l'éditeur ci-dessous, tu verras une liste de navigateurs avec leurs moteurs, un tableau HTTP contre HTTPS avec les numéros de port, ainsi que des exemples d'adresses IP. Ajoute au tableau une ligne « Icône dans le navigateur » et observe comment l'aperçu change :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Navigateurs et HTTPS</title>
6</head>
7<body>
8    <h1>Navigateurs web</h1>
9    <p>Un navigateur est un programme qui <strong>télécharge et affiche</strong> les sites web.</p>
10
11    <h2>Navigateurs populaires</h2>
12    <ul>
13        <li><strong>Chrome</strong> - moteur Blink (Google)</li>
14        <li><strong>Firefox</strong> - moteur Gecko (Mozilla)</li>
15        <li><strong>Safari</strong> - moteur WebKit (Apple)</li>
16        <li><strong>Edge</strong> - moteur Blink (Microsoft)</li>
17    </ul>
18
19    <h2>HTTP vs HTTPS</h2>
20    <table border="1" cellpadding="8">
21        <tr>
22            <th>Caractéristique</th>
23            <th>HTTP</th>
24            <th>HTTPS</th>
25        </tr>
26        <tr>
27            <td>Chiffrement</td>
28            <td>Aucun</td>
29            <td><strong>SSL/TLS</strong></td>
30        </tr>
31        <tr>
32            <td>Port</td>
33            <td>80</td>
34            <td>443</td>
35        </tr>
36    </table>
37
38    <h2>Adresse IP</h2>
39    <p>Chaque appareil du réseau possède une <strong>adresse IP</strong> unique.</p>
40    <p>IPv4 : <em>192.168.1.1</em> | IPv6 : <em>2001:0db8:85a3::8a2e:0370:7334</em></p>
41</body>
42</html>

Retiens : le navigateur est le scribe qui lit les hiéroglyphes, le HTTPS est le messager avec son escorte, et l'adresse IP, ce sont les coordonnées de la chambre à laquelle le messager apporte son message.