Exercice guidé : Observer la différence entre HTTP et HTTPS

Dans cet exercice, nous allons démarrer un serveur local écoutant simultanément en HTTP (port 8080) et en HTTPS (port 8443) afin de capturer et comparer le transit d'identifiants sensibles.

Étape 0 : Préparation de l'environnement

Au même niveau que votre fichier docker-compose.yml récupéré lors de l'installation des outils.

Créez un dossier demo-ssl dans lequel vous placez le fichier server.js suivant :

const http = require('http');
const https = require('https');
const fs = require('fs');

const html = fs.readFileSync('index.html');

const handleRequest = (req, res) => {
   if (req.method === 'POST') {
      let body = '';
      req.on('data', chunk => body += chunk);
      req.on('end', () => {
         console.log(`[DONNÉES REÇUES EN CLAIR SUR LE SERVEUR] : ${body}`);
         res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
         res.end(`<h3>Données reçues sur le serveur : ${body}</h3><a href="/">Retour</a>`);
      });
   } else {
      res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
      res.end(html);
   }
};

http.createServer(handleRequest).listen(8080, () => {
   console.log(' HTTP  actif sur : http://localhost:8080');
});

https.createServer({
   key: fs.readFileSync('key.pem'),
   cert: fs.readFileSync('cert.pem')
}, handleRequest).listen(8443, () => {
   console.log(' HTTPS actif sur : https://localhost:8443');
});

Puis le fichier index.html suivant :

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset="UTF-8">
      <title>Démo HTTP vs HTTPS</title>
   </head>
   <body>
      <h2>Test de connexion</h2>
      <form action="/login" method="POST">
         <input type="text" name="user" value="Le Nain"><br><br>
         <input type="password" name="password" value="Chaussette"><br><br>
         <button type="submit">Envoyer</button>
      </form>
   </body>
</html>

Étape 1 : Préparation des certificats locaux (sur la machine hôte)

Pour que votre navigateur reconnaisse le certificat SSL local et affiche l'icône de cadenas sécurisé sans avertissement :

Ouvrez votre terminal et placez-vous dans le dossier demo-ssl/ du projet :
cd demo-ssl
Déclarez l'autorité racine locale (à faire une seule fois sur votre machine) :
mkcert -install
Générez les clés et le certificat pour localhost:
mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1

Étape 2 : Démarrage du serveur avec Docker

Revenez à la racine et démarrez le conteneur demo-ssl en tâche de fond :

docker compose up -d demo-ssl

Vérifiez que le serveur écoute correctement sur les deux ports en consultant les logs :

docker compose logs demo-ssl

Vous devez voir :

HTTP  actif sur : http://localhost:8080
HTTPS actif sur : https://localhost:8443

Étape 3 : Soumission de données d'un formulaire via HTTP non chiffré (Port 8080)

Rendez-vous sur http://localhost:8080.
Observez la mention "Non sécurisé" ou l'icône de cadenas barré dans la barre d'adresse de votre navigateur.
Ouvrez votre console de dev et placez-vous sur l'onglet Réseau / Network.
Soumettez le formulaire avec les identifiants pré-remplis (Le Nain/Chaussette).
Dans l'inspecteur réseau, cliquez sur la requête POST /login et regardez la section Charge utile / Payload (ou Form Data) :
- Les identifiants (user et password) apparaissent en texte clair.
Consultez les logs du conteneur dans votre terminal :
docker compose logs demo-ssl
- Le serveur a réceptionné les données directement en clair.

Étape 4 : Soumission de données d'un formulaire via HTTPS chiffré par TLS (Port 8443)

Rendez-vous sur https://localhost:8443.
Observez le cadenas fermé dans la barre d'adresse.
Cliquez sur le cadenas pour examiner le certificat de sécurité :
- Observez l'autorité émettrice (mkcert development CA), la période de validité et la clé publique du serveur.
Ouvrez à nouveau l'onglet Réseau / Network et soumettez à nouveau le formulaire.
À nouveau, consultez les logs du conteneur dans votre terminal :
docker compose logs demo-ssl
- Le serveur a réceptionné les données directement en clair.

Étape 5 : Ce qui se passe sur le réseau

L'inspection dans l'onglet Réseau / Network et les logs Docker montre les données aux extrémités (avant envoi par le navigateur et après déchiffrement par le serveur).

Pour observer ce que verrait réellement un attaquant interceptant le trafic sur le réseau physique (Wi-Fi, routeurs, FAI), nous utilisons Wireshark.

Étape 5.1 : Démarrage de la capture

Lancez Wireshark.
Sélectionnez l'interface réseau de boucle locale :
- Windows : Adapter for loopback traffic capture
- macOS / Linux : lo ou Loopback
Dans la barre de filtre d'affichage en haut, saisissez le filtre suivant puis appuyez sur Entrée:
http || tls

Étape 5.2 : Interception du trafic HTTP (Port 8080)

Rendez-vous sur http://localhost:8080 et soumettez à nouveau le formulaire (Le Nain / Chaussette).
Revenez dans Wireshark et arrêtez la capture (icône carré rouge en haut à gauche).
Ce que l'on observe :
- Une trame POST /login HTTP/1.1 apparaît clairement en vert clair.
- En cliquant sur cette ligne et en dépliant la section HTML Form URL Encoded dans le volet central (ou dans le volet hexadécimal en bas), vous lisez directement : user=Le+Nain&password=Chaussette

Conclusion : N'importe quel équipement intermédiaire ou observateur sur le réseau peut intercepter et lire les identifiants en clair.

Étape 5.3 : Interception du trafic HTTPS (Port 8443)

Relancez la capture Wireshark (icône aileron bleu > Continuer sans sauvegarder).
Rendez-vous sur https://localhost:8443 et soumettez à nouveau le formulaire.
Revenez dans Wireshark et observez les trames capturées.
Ce que l'on observe :

Aucune trame HTTP n'apparaît dans la liste.
Vous observez les étapes du TLS Handshake (Client Hello, Server Hello, échange de certificats), suivies de trames TLSv1.3 Application Data.
En inspectant le contenu de ces paquets Application Data, vous ne voyez qu'une suite d'octets chiffrés et aléatoires.

Conclusion : Les données sensibles sont protégées par chiffrement symétrique de bout en bout durant tout leur transit sur le réseau.

22 September 2026