Préparation du kit
Contenu du kit:
- 1 dé
- des crayons à papier (ou du scotch et des marqueurs effaçables)
- le plan de mise en place
- Pour la zone au sol
- Pour les participant⋅es
- les fiches rôles
- la liste complète de l’annuaire DNS
- le cache DNS du navigateur (avec seulement une partie des adresses)
- les fiches mémo
- le bon nombre d’enveloppe chiffrées (HTTPS), de lettres à mettre dans les enveloppes et de cartes postales (DNS, HTTPS) selon les scénarios retenus:
- recherche web à partir du widget smartphone
- affichage de la page doctophop
- 6 enveloppes HTTPS
- 1 carte postale requête DNS
- 1 carte postale réponse DNS
- 1 carte postale requête HTTP doctohop
- 1 page de réponse doctohop
- 3 requêtes https média intégrées (cloudflare, google map, facebook)
- 3 fichiers de réponses (image cloudflare, google map, like facebook)
Mise en place (préalable)
- Vérifier que tous les éléments du kit sont présents
- Vérifier que les zones à remplir (cartes postales, lettres) sont bien vierges (gommer ou recouvrir d’un scotch opaque)
- Attacher avec un trombone les éléments associés à chaque fiche rôle (enveloppe, lettre, carte postale, images, etc.)
Mise en place (sur place) (5 à 10 minutes si on est rodé)
La mise en place se fait en général sans les participant⋅es mais parfois iels sont déjà là, il est possible de déléguer certaines taches en présentant le plan de mise en place.
- Placer les chaises en un cercle (une chaise par participant⋅es), il y a 7 rôles différents, le navigateu
- Placer une petite table devant une chaise ou un groupe de chaise
- Répartir les feuilles équipements sur le sol comme sur le plan ci-dessous, celles de la périphérie peuvent être pliées en 2 et doivent être placé devant une ou 2 chaises, mais celles du centre devraient être à plat.
| Nombre de participant⋅es |
Navigateur |
Box |
Doctohop |
DNS Google |
Google |
Cloudflare |
Facebook |
Facteur |
| 6 |
1 |
0 |
1 |
1 |
1 |
1 |
1 |
0 |
| 7 |
1 |
1 |
1 |
1 |
1 |
1 |
1 |
0 |
| 9 |
2 à 3 |
1 |
1 |
1 |
1 |
1 |
1 |
0 |
| 10 |
3 |
1 |
1 |
2 |
1 |
1 |
1 |
0 |
| 11 |
3 |
1 |
2 |
2 |
1 |
1 |
1 |
0 |
| 11 à 14 |
3 |
1 |
2 |
2 |
1 ou 2 |
1 ou 2 |
1 ou 2 |
0 |
| 15 |
3 |
2 |
2 |
2 |
2 |
2 |
2 |
0 |
| 16 |
3 |
2 |
2 |
2 |
2 |
2 |
2 |
1 |
Au delà, envisager d’ajouter un 2ème navigateur avec 3 personnes voir d’autres serveurs
On pourrait aussi modifier l’atelier pour faire intervenir d’autres serveurs lors de la récupération des assets de sorte que tout le monde ait quelque choses à faire…
- Faire les liaisons avec le scotch de peintre (pour plus d’esthétisme, cacher les jonctions sous les fiches au sol) éventuellement symboliser la liaison entre la box et le navigateur avec des ondes wifi plutôt qu’une liaison…
- Mettre des caches sur les IPs des fiches au sol (sauf pour 8.8.8.8)
- Placer sur les chaises (ou sur la table associée) les fiches rôles avec leur matériel et un crayon sur chaque chaise
- Ordonner les requêtes du navigateur pour simplifier un peule travail
- (optionnel) indiquer des routes sur le scotch (« 8.x.x.x c’est par là » par exemple)
Déroulé
Introduction
- Inviter les participant⋅es à s’asseoir sur une chaise
- Si besoin, se présenter (qui on est, son asso, possibilité de don, etc.)
- Si besoin, poser le cadre acceptable (attente sur le bruit et le comportement)
Explication des règles
But du jeu et de l’atelier
Expliquer brièvement le principe de l’atelier et les buts qu’on se fixe (qui peuvent être différent selon le cas), exemple:
Aujourd’hui vous allez participer à un atelier Network & Magic !
Concrètement, vous allez prendre le rôle d’une machine sur Internet et vous allez devoir collectivement fonctionner pour permettre au navigateur web d’afficher une page web.
Ceci vous permettra de découvrir le fonctionnement général du réseau des réseaux pour aller au delà de son aspect magique. C’est aussi l’occasion de découvrir les équipements qui le composent, ou que l’on ne voient pas car notre attention est ailleurs.
Faire le tour des rôles impliqués dans le scénario choisit
Procéder du plus proche au plus éloignés (équipement de la maison → équipement de la rue → équipements éloignés), puis terminer par le serveur DNS pour faire la transition avec la première étape
Rassurer en disant que si iels ne retiennent pas tout, iels ont la fiche mémo.
Prendre chaque fiche au sol pour montrer les rôles à l’assemblée en même temps qu’on explique le rôle.
Navigateur
Le navigateur web à ne pas confondre avec le moteur de recherche. Le navigateur c’est le logiciel qui sert à afficher une page web. Alors que le moteur de recherche sert à trouver des liens à partir de mots clés.
Est-ce que vous connaissez des noms de navigateurs web ?
Et de moteur de recherche ?
Ici on peut imaginer que le navigateur est installé sur un smartphone OU un ordinateur. On va imaginer que cet équipement est connecté en wifi à la box du logement.
Box
La box c’est l’équipement dans votre logement qui est vraiment connecté directement à Internet. Il gère le réseau de votre maison et fait passerelle vers le réseau des réseaux, c’est à dire Internet.
On dit le réseaux des réseaux car il n’y a pas d’entreprise qui possède tout internet. Internet c’est l’interconnexion de réseaux qui appartiennent à des opérateurs différents. Par exemple, ça peut être orange qui gère votre box, ou Netflix ou même des petits opérateurs comme l’association [citer le FAI associatif le plus proche cf db.ffdn.org].
Bref la box est relié via une fibre optique ou une antenne 4G ou 5G ou un câble coaxiale (certaines connexion SFR) ou un câble téléphonique en cuivre. On pourrait même imaginer une antenne vers un réseau de satellite comme starlink (mais c’est rare)
Souvent la box est relié avec un cable ethernet à un ONT lui même relié à la fibre
Montrer une fibre optique et la faire passer
Routeurs et type de liaisons
A l’autre bout de la fibre, on arrive sur le routeur de son Fournisseur d’accès à Internet (ou l’un de ses intermédiaires).
Ici j’ai conscience que c’est un raccourci. L’image sur le premier routeur correspond plutôt à un point de mutualisation hors le routeur est ailleurs.
La réalité c’est que la fibre passe dans un point de branchement optique, puis elle rejoint un point de mutualisation où grâce à un coupleur on transforme entre 32 et 128 fibre en une, puis ça va au Noeud de raccordement Optique puis dans un Point de présence opérateur où on se débrouille pour acheminer le signal jusqu’au routeur du FAI. Malgré tout je trouve intéressant de visibiliser les équipements urbains que l’on voit tous les jours mais qu’on ne regarde pas.
Mais il faut vulgariser, et ça peut être traité si il y a une question. Ne perdons pas de vue que le chrono tourne et que sur internet l’intelligence et la consommation de ressource se trouve plutôt à la périphérie des réseaux (serveurs, pc, smartphone)…
On peut voir un routeur comme une sorte de carrefour avec des panneaux qui indiquent quelle route prendre si on veut rejoindre une adresse données.
Pour atteindre une adresse on passera sans doute par différents routeurs qui appartiennent à des réseaux différents, c’est à dir à des opérateur réseaux différents.
C’est un peu comme si on prends une route départemental (gérée par le département)puis une autoroute qui est gérée par une entreprise privée . On a bien 2 réseaux de routes reliés ensemble.
TODO: trouver une image de pointd e branchement optique, une de point de mutualisation, une image de NRO et une image de POP ?
Serveur
Immeuble / adresse
A la périphérie du réseau se trouve donc nos smartphones ou ordinateurs mais aussi des serveurs.
Un serveur informatique est un ordinateur allumé en général 24h sur 24 et qui réponds à des demandes. Par exemple, Donne moi la page https://doctohop.com/strasbourg
Si on file notre métaphore routière, les serveurs sont des bâtiments qui ont une adresse auxquels on peut écrire une lettre (en informatique on appelle ça une requête) et qui peuvent décider d’envoyer une réponse. A l’époque où internet n’était pas démocratisé, on pouvait par exemple envoyer un bon de commande pour un pull et recevoir un pull par la poste. Les serveurs rendent des services similaires en envoyant des copies de pages web, des mails, etc.
Ici on a le serveur de doctohop.com site fictif de prise de rendez-vous chez le médecin. Nous allons tout à l’heure lui demander une page web.
Son adresse est une suite de 4 nombres plutôt qu’un numéro, une rue et une ville. On appelle ça une adresse IP. Ces adresses sont uniques, logiquement, un équipement sur le réseau ne peut pas avoir la même adresse qu’un autre équipement. Imaginez si vous envoyez un courrier et que dans la rue il y a 2 fois le numéro 4, le facteur sera embêté.
Bref 2 équipement ne peuvent avoir la même adresse IP, et c’est à peu prés un des seuls éléments qui mets tous les opérateurs d’accord sur internet.
Un serveur peut être de la taille d’une carte bleu ou être au format U comme celui sur la photo. Il fait à peu prés ces dimensions (mimer avec les mains)
Datacenter
Ici, on a google, sur la photo, on peut voir des miliers de serveurs réunit dans des étagères qu’on appellent des baies. Ces baies sont dans un datacenter, qui peut être de petite ou grande taille. Sur la photo c’est plutôt un grand format.
Ici c’est un datacenter de Facebook
Les géants du net en ont plusieurs à travers le monde. Ici vous pouvez voir la position des datacenter de Cloudflare.
Avec l’IA (et même avant) ces datacenter représentent une consommation électrique très conséquente, par exemple Microsoft a racheté un réacteur nucléaire dans une centrale accidentée aux Etats unis pour pouvoir assurer l’acheminement d’électricité à certains de ses datacenter. Google investit de son côté dans des mini réacteur tout comme OpenAI (plus connu sous le nom ChatGPT). Quand ce n’est pas nucléaire c’est aussi souvent du charbon (comme ce datacenter en Californie)
En 2025, on estime que les datacenter consomment x% de la consommation énergétique mondiale. Mais c’est sans compter la construction des équipements qui multiplie probablement ce chiffre par 5.
Serveur DNS
Pour finir, on a vu que les adresses IP sont des nombres. Ce qui n’est pas pratique. Quand vous voulez consulter wikipedia, vous ne tapez pas 185.15.58.224. Vous tapez le nom de domaine wikipedia.org ou vous utilisez l’app ou un moteur de recherche.
On a donc besoin d’annuaire qui feront la correspondance entre les noms compréhensible et les adresse IP sous forme de numéro. En somme, c’est un peu comme l’application contact d’un smartphone on a des noms et des numéros.
Si on ne connaît pas l’adresse IP d’un site, on pourra la demander au serveur DNS. Ici c’est celui de Google, il a une adresse bien connue, 8.8.8.8.
Lancer la partie
Partie 1: recherche google
Requête https://google.com/?q=dermatologue+strasbourg+mycose
On va donc démarrer. Je suis l’utilisateur et j’ouvre mon smartphone et tape dans la barre de recherche les mots clés dermatologue strasbourg mycose. Le navigateur va donc demander au moteur de recherche (ici Google) la page suivante https://google.com/?q=dermatologue+strasbourg+mycose.
C’est à vous
En général à ce stade il faut conseiller la table des navigateurs, en leur faisant chercher la requête suivante: « Cher serveur, je souhaite que tu m’envoies la page https://google.com/?q=dermatologue+strasbourg+mycose, merci »
A chaque étape, il faudra faire lire la requête (ou la réponse) choisie afin que les autres puissent comprendre. L’idéal serait de réussir à projeter en grand le message…
Puis il faut la mettre dans une enveloppe, et indiquer la bonne adresse sur le devant. L’adresse de google est déjà connue du navigateur (il la trouve dans son cache qui est matérialisé par une feuille sur la table).
Au dos on indique sa propre adresse sinon, le serveur ne pourra pas répondre.
Transit jusqu’au serveur Google
La requête est alors donnée à la box.
(optionnel) Remplacement de l’ip privée de l’expéditeur par l’ip publique de la box
De façon optionnelle, on peut faire à cette étape la transposition d’adresse IP privée en IP publique. (NAT) Il faut alors expliqué que les équipements de la maison ne sont pas surle vrai internet, seul la box à une adresse IP publique du Grand internet, les autres équipement ont une adresse IP du réseau de la maison. La box fait passerelle et pour ça elle va modifier notre courrier.
On barre l’IP privée au dos et on remplace par l’IP publique de la box.
Transmission au routeur suivant
La box transmet alors la requête au routeur suivant via la fibre et ainsi de suite.
Réponse de google
Jusqu’à ce qu’on arrive au datacenter de Google dont les serveurs se chargent de fabriquer une réponse et envoie la page fabriquée.
A ce stade, les Google doivent prendre la page, la mettre dans l’enveloppe et indiquer comme destinataire l’adresse de l’expéditeur de la requête .
Transit jusqu’au navigateur
La requête est donc transmise au routeur de google, qui la transmette à d’autres routeurs en suivant les routes indiquées jusqu’à l’arrivée sur la box.
De façon optionnelle, la box fait l’opération inverse et remplace son ip publique par celle de l’équipement à l’origine dela requête initiale.
La box transmet le courrier à l’équipement du navigateur.
Ourah 
le navigateur a affiché une première page web, celle des réponse de Google
Partie 2: Affichage de la page de doctohop
L’utilisateurice-animateurice va alors cliquer sur un lien qui corresponds à la page http://doctohop.com/strasbourg/dermatologue/mycose.
Requête de la page http://doctohop.com/strasbourg/dermatologue/mycose
On cherche donc à envoyer une requête à doctohop.com,
On trouve la requête « Cher serveur, je souhaite que tu m’envoies la page http://doctohop.com/strasbourg/dermatologue/mycose, merci » sous forme de carte postale.
Sauf qu’il y a un hic, on ne connaît pas son adresse IP.
Pas grave, on demande à l’annuaire DNS
Requête DNS doctohop.com au DNS google (8)
« Cher résolveur DNS, je souhaite connaître l’IP de doctohop.com, merci »
POUR : 8
De: 2
Ne pas oublier de lire la requete DNS
Transit jusqu’au serveur DNS
POUR : 8
De: 83 (2)
Réponse DNS du résolveur DNS de Google
« Cher client, l’IP de doctohop.com est 91, merci »
POUR : 83 (puis 2 après transposition de la box)
De: 8
Ne pas oublier de lire la réponse DNS
A ce stade on peut envoyer notre requête-carte postale « Cher serveur, je souhaite que tu m’envoies la page http://doctohop.com/strasbourg/dermatologue/mycose, merci » en indiquant
POUR : 91
De: 2
Transit jusqu’au navigateur
On la donne donc à la box, qui la regarde (en général pour savoir où faire la transposition adresse IP privée, adresse public)
On choppe la balle au bond, pour faire remarquer que la box est bien curieuse et quelle lit notre courrier… Après tout, c’est une simple carte postale, elle peut le faire.
Ici on explique donc que c’est la nuance entre https (connexion sécurisée) et http connexion non sécurisée.
Les jeunes générations ne connaissent plus le cadenas car il a disparu des navigateurs au profit d’une alerte systématique en cas de non chiffrement. Il faut peut être placer cette étape sur les requêtes DNS qui sont encore majoritairement en clair.
La suite du transit se passe de façon identique
Réponse du serveur qui gère doctohop.com
Doctohop reçoit dans la demande et va fabriquer la page puis l’envoyer à l’expéditeur de la demande.
Transit jusqu’au navigateur
Rien de neuf
Affichage de la page, et récupération des images
On affichage donc la page sur le navigateur, mais on s’aperçoit qu’il y a des cadres roses qui remplacent des images. Normal on a pas encore récupéré les images.
On repars donc pour un tour à la chaîne.
Récupération des images
Le navigateur va donc lancer en parallèle les requêtes (c’est bien on a 3 workers pour le faire 
)
- Requête
https://cloudflare.com/docteur.png
- Transit jusqu’à cloudflare
- Réponse de cloudflare
- Transit jusqu’au navigateur
- Requête
https://google.com/map.js
- Transit jusqu’à google
- Réponse de google
- Transit jusqu’au navigateur
- Requête
https://facebook.com/like.js
- Transit jusqu’à facebook
- Réponse de facebook
- Transit jusqu’au navigateur
A chaque transit on pourra proposer de lancer un dé 6, et si il y a 6, alors on met en panne le routeur et on regarde comment le réseau s’adapte.
ourah, la page est complète
On peut conclure qu’on a fait en 50minutes ce que les machines font en 40ms.
États des lieux sur les données collectées
A la fin du jeu, il est souvent pertinent de proposer de faire un tour du cercle ou chaque machine présente ce qu’elle a reçue comme données.
On peut aussi à cette occasion se demander:
- si les routeurs ont enregistrés les infos non chiffrées qui ont transitées par eux
- si les serveurs les ont conservées et si oui lesquelles
A ce stade, on en est généralement à environ 50 minutes d’atelier.
Demander si il y a des questions
Il peut être pertinent d’ouvrir sur une phase de questions qui vont permettre de lever des zones d’ombres ou de revoir les notions vu sous un autre angle. Ci- dessous des questions typiques:
Comment ça marche avec un VPN ? Est-ce qu’on est anonyme ?
TODO
Et Tor ? Qu’est-ce que le darknet (darkweb ? deepweb ?) ?
TODO
Quelles alternatives existent ?
TODO
J’ai rien à cacher, mes données ne valent rien ?
TODO
Remarques classiques des spécialistes qui auront participé
TODO
Distinction IP privée / IP publique et NAT
TODO
Les petits paquets de données plutôt qu’une grosse lettre
TODO
IP fixe / IP dynamique
Les requêtes DNS peuvent être chiffrées (DNS over HTTPS)
TODO
Paquets ARP sur le réseau locale, échanges BGP, et autres protocoles
Ne pas hésiter à rappeler qu’il s’agit d’un atelier de vulgarisation. Que pour la plupart des participant⋅es on a déjà introduit beaucoup de notion abstraites et qu’il vaut mieux éviter d’aller trop en profondeur au risque d’embrouiller la compréhension générale.
Conclure l’atelier
- Remercier les participant⋅es pour leur attention et demander si ça a plu
- Donner les infos sur la suite (prochaines dates, suite du cours, etc.)
- (optionel) Proposer de faire un don (si c’est adapté au cadre)
- Donner des instructions pour ranger plus vite
Rangement
Idéalement ranger le kit, en suivant « Mise en place (préalable) », pour qu’il soit prêt à l’emploi pour le prochain.
Éléments à corriger dans l’atelier
