Internet et le web

## Objectifs et prérequis **Objectifs** : À la fin de ce chapitre, l’élève sera capable de : 1. Décrire l’architecture globale d’Internet et identifier ses principaux composants matériels et logiques. 2. Expliquer le fonctionnement des protocoles de base (IP, TCP, UDP, HTTP/HTTPS, DNS) et leur rôle dans la communication réseau. 3. Analyser la structure d’une ressource web (URL, HTML, CSS, JavaScript) et expliquer le processus de rendu dans un navigateur. 4. Mettre en œuvre une page web statique simple en respectant les normes W3C. 5. Identifier les principales menaces de sécurité sur Internet et décrire les mesures de protection usuelles (pare‑feu, chiffrement, authentification). 6. Discuter des enjeux éthiques, juridiques et de gouvernance liés à l’utilisation d’Internet (neutralité du net, protection des données, propriété intellectuelle). 7. Utiliser des services web courants (messagerie, stockage cloud, commerce électronique) en comprenant leur modèle sous‑jacent. **Prérequis** : - Notions de base en informatique (matériel, logiciel, système d’exploitation). - Connaissance des systèmes de numération binaire et hexadécimale. - Familiarité avec l’utilisation d’un navigateur web et d’un éditeur de texte simple. - Capacité à lire et à suivre un algorithme décrit en pseudocode. --- ## Introduction contextualisée Internet, né à la fin des années 1960 avec le projet ARPANET du Département de la Défense des États‑Unis, s’est transformé en une infrastructure planétaire qui relie aujourd’hui plus de 5 milliards d’appareils. Le **World Wide Web** (WWW), inventé par Tim Berners‑Lee en 1989 au CERN, constitue l’application la plus visible d’Internet : il permet d’accéder, de partager et de créer des ressources hypertexte via des navigateurs. Dans le système éducatif camerounais, la maîtrise d’Internet et du web est devenue incontournable pour les séries scientifiques (C, A1‑A5, D, E, TI) afin de préparer les élèves aux exigences du monde professionnel et universitaire. Ce chapitre vise à fournir une compréhension approfondie, non seulement des aspects techniques, mais aussi des dimensions sociales, juridiques et éthiques qui entourent l’utilisation d’Internet. > **À retenir** : Internet est un réseau de réseaux basé sur le modèle TCP/IP ; le web est une application qui utilise les protocoles HTTP/HTTPS pour récupérer des ressources identifiées par des URL. --- ## I. Architecture d’Internet et ses composants ### A. Historique et évolution - **1969** : Premiers nœuds d’ARPANET (UCLA, Stanford, UCSB, Utah). - **1983** : Adoption du protocole TCP/IP comme norme commune, naissance d’Internet tel que nous le connaissons. - **1989‑1991** : Tim Berners‑Lee propose le concept d’hypertexte, crée le premier navigateur (WorldWideWeb) et le serveur HTTP. - **1998** : Création de l’ICANN (Internet Corporation for Assigned Names and Numbers) pour gérer les adresses IP et les noms de domaine. - **2000‑2020** : Explosion du haut débit, émergence du Web 2.0 (réseaux sociaux, wikis, blogs), puis du cloud computing et de l’IoT. ### B. Infrastructure physique | Composant | Fonction principale | Exemple concret | |-----------|--------------------|-----------------| | **Câbles de transmission** | Transport des signaux électriques ou lumineux | Fibre optique transatlantique, câble coaxial Ethernet | | **Routeurs** | Décision du chemin optimal (routage) basé sur les tables de routage | Cisco ISR, routeur domestique TP‑Link | | **Commutateurs (switches)** | Commuta­tion de trames au niveau de la couche liaison (MAC) | Switch 24 ports Gigabit | | **Points d’accès sans fil (AP)** | Conversion entre signaux radio et trames filaires (Wi‑Fi) | AP UniFi, répéteur domestique | | **Serveurs** | Fourniture de services (web, mail, base de données) | Serveur Apache sous Linux, serveur DNS BIND | | **Terminals (hosts)** | Extrémités qui consomment ou produisent des données | Ordinateur, smartphone, objet connecté | > **À retenir** : La couche physique d’Internet repose sur des milieux guidés (fibre, cuivre) et non guidés (radio, satellite) ; les équipements de couche 2 (switch) et couche 3 (routeur) assurent le transfert de trames et de paquets respectivement. ### C. Modèle hiérarchique client‑serveur et pair‑à‑pair - **Client‑serveur** : Un client demande un service ; un serveur offre ce service (ex. navigateur ↔ serveur web). - **Pair‑à‑pair (P2P)** : Chaque nœud peut agir tant comme client que comme serveur (ex. BitTorrent, certaines applications de messagerie). Dans la pratique, la plupart des services web utilisent le modèle client‑serveur pour garantir la scalabilité, la gestion centralisée de la sécurité et la qualité de service. > **À retenir** : Le modèle client‑serveur simplifie l’administration et la sécurité ; le modèle P2P optimise l’utilisation de la bande passante distribuée mais complique le contrôle d’accès. --- ## II. Protocoles de communication ### A. Modèle OSI et modèle TCP/IP Le modèle OSI (Open Systems Interconnection) comporte sept couches : 1. Physique 2. Liaison de données 3. Réseau 4. Transport 5. Session 6. Présentation 7. Application Le modèle TCP/IP, plus utilisé en pratique, en regroupe quatre : 1. **Couche d’accès au réseau** (physique + liaison) 2. **Couche Internet** (IP) 3. **Couche de transport** (TCP/UDP) 4. **Couche applicative** (HTTP, DNS, FTP, …) > **À retenir** : Chaque couche encapsule les données de la couche supérieure ; la dé‑encapsulation se fait à l’arrivée côté destinataire. ### B. Protocole IP (adressage IPv4/IPv6) **IPv4** : adresse de 32 bits, généralement écrite sous forme décimale pointée $a.b.c.d$ où chaque octet $a,b,c,d \in [0,255]$. - **Adresse réseau** : obtenu par AND bit à bit entre l’adresse IP et le masque de sous‑réseau. - **Adresse de diffusion** : bits d’hôte tous à 1. Exemple : adresse $192.168.10.45$ avec masque $255.255.255.0$ → réseau $192.168.10.0$, diffusion $192.168.10.255$. **IPv6** : adresse de 128 bits, représentée par huit groupes de quatre chiffres hexadécimaux séparés par deux‑points, ex. $2001:0db8:85a3:0000:0000:8a2e:0370:7334$. - Compression possible : suites de zéro remplacées par « :: » (une seule fois). > **À retenir** : IPv6 a été conçu pour résoudre l’épuisement de l’espace d’adressage IPv4 ; il introduit également des améliorations en matière de sécurité (IPsec obligatoire) et de configuration automatique (SLAAC). #### Calcul du nombre d’hôtes possibles Pour un masque de longueur $n$ bits (préfixe /$n$) : $$ \text{Nombre d’hôtes} = 2^{(32-n)} - 2 \quad \text{(IPv4)} $$ Le « -2 » exclut l’adresse réseau et l’adresse de diffusion. Exemple : réseau $10.0.0.0/16$ → $n=16$ → $2^{(32-16)}-2 = 2^{16}-2 = 65534$ hôtes. ### C. Protocole TCP et UDP | Caractéristique | TCP (Transmission Control Protocol) | UDP (User Datagram Protocol) | |-----------------|--------------------------------------|------------------------------| | Orientation connexion | Oui (handshake à 3 étapes) | Non (sans connexion) | | Fiabilité | Accusé de réception, retransmission, contrôle de flux | Aucun accusé, pas de retransmission | | Ordre des paquets | Garanti | Non garanti | | Overhead | En‑tête de 20 octets (plus options) | En‑tête de 8 octets | | Utilisations typiques | HTTP, FTP, SSH, SMTP | DNS, streaming vidéo, jeux en ligne, VoIP | **Handshake TCP** : 1. Client → SYN (numéro de séquence $x$) 2. Serveur → SYN‑ACK (ACK=$x+1$, SYN=$y$) 3. Client → ACK (ACK=$y+1$) > **À retenir** : Le handshake établit une connexion fiable ; toute perte de segment déclenche un mécanisme de retransmission basé sur le délai d’attente (timeout) estimé par l’algorithme de Jacobson. ### D. Protocoles applicatifs #### HTTP/HTTPS - **HTTP** (HyperText Transfer Protocol) : protocole sans état, requête‑réponse sur le port TCP 80. - **HTTPS** : HTTP sécurisé par TLS/SSL (port TCP 443). Le chiffrement assure confidentialité et intégrité. **Format d’une requête HTTP** : $$ \text{METHOD}\ SP\ \text{REQUEST-URI}\ SP\ \text{HTTP/VERSION}\r\n \text{Headers}\r\n\r\n \text{Body (optionnel)} $$ Exemple de requête GET : ``` GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html ``` **Format d’une réponse HTTP** : $$ \text{HTTP/VERSION}\ SP\ \text{STATUS-CODE}\ SP\ \text{REASON-PHRASE}\r\n \text{Headers}\r\n\r\n \text{Body} $$ Exemple de réponse 200 OK : ``` HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1234 <!DOCTYPE html> <html>…</html> ``` #### DNS (Domain Name System) Fonction : traduction d’un nom de domaine lisible (ex. `www.example.com`) en adresse IP. - Utilise principalement UDP sur le port 53 (requêtes courtes) ; TCP pour les transferts de zone (>512 octets). - Processus de résolution : résolution récursive (client → résolveur → serveurs racines → TLD → serveur autoritaire). > **À retenir** : Le DNS repose sur une hiérarchie distribuée ; la mise en cache réduit considérablement le trafic et améliore la latence. #### Autres protocoles applicatifs - **FTP** (File Transfer Protocol) : transfert de fichiers, ports 20/21, mode actif/passif. - **SMTP** (Simple Mail Transfer Protocol) : envoi de courriel, port 25 (ou 587 avec STARTTLS). - **SSH** (Secure Shell) : accès sécurisé à distance, port 22, chiffrement symétrique + authentification à clé publique. --- ## III. Le World Wide Web ### A. Notions de base du web - **URL** (Uniform Resource Locator) : syntaxe $$ \text{scheme}://\text{authority}/\text{path}?\text{query}#\text{fragment} $$ Exemple : `https://www.example.com:443/path/to/resource?lang=fr#section2` - **Ressource** : toute entité identifiable par une URL (document HTML, image, script, donnée JSON). - **Représentation** : forme sous laquelle la ressource est transmise (HTML, CSS, JPEG, JSON, etc.). > **À retenir** : L’URL est l’adresse universelle d’une ressource ; le schéma définit le protocole d’accès (http, https, ftp, mailto…). ### B. Langages du côté client #### HTML (HyperText Markup Language) - Version actuelle : HTML5 (recommandation W3C 2014). - Structure de base d’une page : ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Titre de la page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Mon site web</h1> </header> <main> <p>Ceci est un paragraphe d’exemple.</p> </main> <footer> <p>&copy; 2025 Mon entreprise</p> </footer> </body> </html> ``` - Éléments sémantiques : `<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<footer>`. - Formulaires : `<form>`, `<input>`, `<textarea>`, `<button>`. #### CSS (Cascading Style Sheets) - Sélecteurs : type (`.class`), ID (`#id`), attribut (`[type="text"]`), pseudo‑classes (`:hover`). - Modèle de boîte : chaque élément possède `margin`, `border`, `padding`, `content`. - Flexbox et Grid pour les mises en page modernes. Exemple de règle CSS : ```css /* Centrer un bloc */ .container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } ``` #### JavaScript - Langage interprété, exécuté par le moteur du navigateur (V8, SpiderMonkey, JavaScriptCore). - Manipulation du DOM (Document Object Model) via des méthodes comme `document.getElementById`, `element.innerHTML`, `element.addEventListener`. - Exemple simple : changement de texte au clic. ```javascript document.getElementById("btn").addEventListener("click", function () { document.getElementById("msg").textContent = "Bonjour, monde !"; }); ``` > **À retenir** : Le couple HTML/CSS/JS constitue la « triade » du développement web côté client ; le navigateur assure le rendu en suivant le processus de parsing, construction du arbre de rendu, layout et peinture. ### C. Langages du côté serveur (aperçu) - **PHP** : langage embarqué dans HTML, extension `.php`. Exemple de script simple : ```php <?php $name = $_GET['nom'] ?? 'visiteur'; echo "<p>Bonjour, " . htmlspecialchars($name) . " !</p>"; ?> ``` - **Python (Flask/Django)** : frameworks permettant de créer des applications web robustes. - **Node.js** : JavaScript côté serveur, modèle événementiel non bloquant. Ces langages génèrent du contenu HTML dynamique en fonction de paramètres (requête GET/POST, données de base de données, état de session). > **À retenir** : La séparation claire entre logique côté client (présentation, interaction) et logique côté serveur (traitement des données, accès aux ressources) améliore la maintenabilité et la sécurité. ### D. Navigation et rendu dans le navigateur 1. **Résolution DNS** → obtention de l’adresse IP du serveur. 2. **Établissement de la connexion TCP** (handshake à trois voies). 3. **Négociation TLS** (si HTTPS) → échange de clés, certificat X.509. 4. **Envoi de la requête HTTP** (méthode, URI, headers). 5. **Réception de la réponse HTTP** (code d’état, headers, corps). 6. **Parsing du HTML** → construction du DOM. 7. **Application du CSS** → création de l’arbre de rendu (render tree). 8. **Layout** → calcul des positions et tailles (reflow). 9. **Peinture** → rasterisation des pixels à l’écran. 10. **Exécution du JavaScript** → manipulation du DOM, requêtes AJAX/fetch, animations. > **À retenir** : Le temps de chargement perçu dépend fortement de la latence réseau, du temps de TLS handshake, de la taille des ressources et de l’efficacité du JavaScript. ### E. Web 2.0, API et services web - **Web 2.0** : accent sur le contenu généré par les utilisateurs, les réseaux sociaux, les wikis, les blogs. - **API** (Application Programming Interface) : interface permettant à une application d’accéder aux fonctionnalités d’un service (ex. API REST de Twitter, API GraphQL de GitHub). - **Services web** : protocoles SOAP (XML‑based) ou REST/JSON, souvent exposés sur HTTP/HTTPS. Exemple d’appel REST avec `fetch` en JavaScript : ```javascript fetch('https://api.example.com/v1/users/42') .then(response => response.json()) .then(data => console.log(data)) .catch(err => console.error('Erreur :', err)); ``` > **À retenir** : Les API REST utilisent les verbes HTTP (GET, POST, PUT, DELETE) et renvoient des représentations généralement en JSON, facilitant l’interopérabilité entre systèmes hétérogènes. --- ## IV. Sécurité, éthique et gouvernance d’Internet ### A. Menaces courantes | Type de menace | Description | Exemple d’impact | |----------------|-------------|------------------| | **Malware** | Logiciel malveillant (virus, ver, ransomware) | Chiffrement de fichiers et demande de rançon | | **Phishing** | Usurpation d’identité via courriel ou site web trompeur | Vol d’identifiants bancaires | | **DDoS** (Distributed Denial of Service) | Saturation d’un service par un trafic massif provenant de nombreux zombies | Indisponibilité d’un site e‑commerce pendant les soldes | | **Injection SQL** | Insertion de code SQL non prévu dans une requête | Accès non autorisé à une base de données | | **Cross‑Site Scripting (XSS)** | Injection de script JavaScript dans une page vue par d’autres utilisateurs | Vol de cookies de session | ### B. Mécanismes de protection - **Pare‑feu** : filtrage de paquets basé sur des règles (adresse IP, port, protocole). - **IDS/IPS** (Intrusion Detection/Prevention System) : analyse du trafic pour détecter des signatures d’attaque. - **Chiffrement TLS/SSL** : utilisation d’un échange de clés asymétrique (RSA/ECDHE) suivi d’un chiffrement symétrique (AES‑GCM). - **Authentification forte** : mots de passe complexes, authentification à deux facteurs (2FA), certificats clients. - **Mise à jour régulière** : application des correctifs de sécurité (patch OS, bibliothèques, CMS). > **À retenir** : La défense en profondeur (defense‑in‑depth) combine plusieurs couches de sécurité afin qu’une défaillance d’une couche ne compromette pas l’ensemble du système. ### C. Aspects légaux et éthiques - **RGPD** (Règlement général sur la protection des données, UE 2018) : principes de licéité, minimisation, droit à l’oubli, notification de violation. - **Loi camerounaise sur la cybercriminalité** (loi n° 2010/012 du 21 décembre 2010) : répression des accès frauduleux, du contenu illicite, de la atteinte aux systèmes d’information. - **Neutralité du net** : principe selon lequel tout trafic doit être traité de manière égale, sans discrimination basée sur le contenu, l’application ou l’utilisateur. - **Propriété intellectuelle** : respect du droit d’auteur lors du partage de contenus (textes, images, vidéos). - **Éthique du numérique** : responsabilité dans la diffusion d’informations, lutte contre la désinformation, respect de la vie privée. > **À retenir** : Le respect du cadre légal et des bonnes pratiques éthiques protège à la fois l’utilisateur et les acteurs du numérique contre les sanctions et les atteintes à la réputation. ### D. Gouvernance d’Internet - **ICANN** : coordination des espaces d’adressage IP et du système de noms de domaine (DNS). - **ITU** (Union internationale des télécommunications) : agence spécialisée des Nations Unies qui développe des normes télécoms (ex. recommandations X.509, G.992). - **AFRINIC** : registre régional d’adresses IP pour l’Afrique. - **ISOC** (Internet Society) : organisation à but non lucratif qui soutient le développement ouvert d’Internet. - **Processus de décision** : modèles multipartites (gouvernements, secteur privé, société civile, communauté technique) visant à assurer l’ouverture, la stabilité et la sécurité d’Internet. > **À retenir** : La gouvernance d’Internet repose sur un modèle multipartite où aucune entité ne possède un contrôle exclusif, favorisant ainsi la résilience et l’innovation. --- ## V. Applications et services web contemporains ### A. Cloud computing | Modèle | Description | Exemple de service | |--------|-------------|--------------------| | **IaaS** (Infrastructure as a Service) | Mise à disposition de ressources matérielles virtuelles (VM, stockage, réseau) | Amazon EC2, Microsoft Azure VMs | | **PaaS** (Platform as a Service) | Plateforme permettant de développer, tester et déployer des applications sans gérer l’infrastructure sous‑jacente | Google App Engine, Heroku | | **SaaS** (Software as a Service) | Application logicielle accessible via le web, généralement par abonnement | Google Workspace, Salesforce, Office 365 | Avantages : élasticité, réduction des coûts d’investissement (CAPEX), mise à jour automatique, accès universel. ### B. Commerce électronique - Modèles : B2C (business‑to‑consumer), B2B, C2C (ex. places de marché comme Jumia, Konga). - Composants essentiels : catalogue produit, panier, passerelle de paiement (PCI‑DSS), gestion des commandes, logistique. - Sécurité : utilisation de TLS, tokenisation des cartes, authentification 3D Secure. ### C. Éducation en ligne et télétravail - Plateformes LMS (Learning Management System) : Moodle, Canvas, Google Classroom. - Outils de visioconférence : Zoom, Microsoft Teams, Jitsi Meet (open‑source). - Enjeux : bande passante suffisante, accessibilité (WCAG), formation aux outils numériques. ### D. Internet des objets (IoT) – aperçu - Définition : réseau d’objets physiques capteurs/actionneurs connectés à Internet, capables d’échanger des données. - Protocoles fréquents : MQTT (légerté, publish/subscribe), CoAP (contrainte, basé sur UDP), HTTP/HTTPS. - Exemple d’application : suivi environnemental (température, humidité) dans une serre agricole, avec données visualisées sur un tableau de bord web. > **À retenir** : L’IoT étend le paradigme du web au-delà des écrans, permettant une interaction continue entre le monde physique et les services numériques. --- ## VI. Synthèse du chapitre - **Architecture d’Internet** : réseau de réseaux, modèle TCP/IP, équipements physiques (câbles, routeurs, switches), logique client‑serveur vs P2P. - **Protocoles de base** : IP (IPv4/IPv6), TCP (fiable, orienté connexion), UDP (léger, non fiable), DNS (résolution de noms), HTTP/HTTPS (transfert hypertexte sécurisé). - **World Wide Web** : URL, ressources, représentation, triade HTML/CSS/JS, rendu dans le navigateur (parsing → DOM → render tree → layout → paint). - **Développement web côté serveur** : PHP, Python/Flask, Node.js ; génération dynamique de contenu. - **Sécurité** : menaces (malware, phishing, DDoS, injection, XSS), défenses (pare‑feu, IDS/IPS, TLS, 2FA, mises à jour). - **Éthique & légal** : RGPD, loi camerounaise sur la cybercriminalité, neutralité du net, propriété intellectuelle, responsabilité numérique. - **Gouvernance** : ICANN, ITU, AFRINIC, ISOC, modèle multipartite. - **Services modernes** : cloud (IaaS/PaaS/SaaS), e‑commerce, éducation en ligne, télétravail, IoT. --- ## Glossaire | Terme | Définition | |-------|------------| | **Adresse IP** | Identifiant numérique de 32 bits (IPv4) ou 128 bits (IPv6) permettant de localiser un hôte sur un réseau. | | **TCP** | Protocole de transport orienté connexion, fiable, avec contrôle de flux et de congestion. | | **UDP** | Protocole de transport sans connexion, faible latence, sans garantie de livraison. | | **DNS** | Système de répartition de noms qui traduit les noms de domaine en adresses IP. | | **HTTP** | Protocole applicatif de transfert hypertexte, basé sur un modèle requête‑réponse. | | **HTTPS** | Version sécurisée de HTTP utilisant TLS/SSL pour chiffrer les échanges. | | **HTML** | Langage de balisage permettant de structurer le contenu d’une page web. | | **CSS** | Langage de feuilles de style qui décrit la présentation d’un document HTML. | | **JavaScript** | Langage de script exécuté côté client permettant d’ajouter de l’interactivité et de manipuler le DOM. | | **API** | Interface permettant à une application logicielle d’interagir avec un service ou une plateforme. | | **Cloud computing** | Modèle de fourniture de ressources informatiques (serveurs, stockage, applications) à la demande via Internet. | | **IoT** | Internet des objets : réseau d’objets physiques capables de collecter et d’échanger des données via Internet. | | **Pare-feu** | Dispositif de sécurité qui filtre le trafic réseau selon des règles prédéfinies. | | **TLS** | Protocole de chiffrement assurant la confidentialité et l’intégrité des échanges sur Internet (successeur de SSL). | | **RGPD** | Règlement européen sur la protection des données personnelles, applicable aux traitements concernant des résidents de l’UE. | --- ## Exercices d'application corrigés ### Exercice 1 – Adressage IP **Énoncé** : Un réseau d’entreprise utilise l’adresse de base $10.0.0.0/16$. 1. Déterminer l’adresse de réseau, l’adresse de diffusion et le nombre d’hôtes utilisables. 2. Si l’on veut créer quatre sous‑réseaux de taille égale, quel masque de sous‑réseau doit-on utiliser ? Donner l’adresse de chaque sous‑réseau. **Corrigé** : 1. Masque /16 → $255.255.0.0$. - Adresse de réseau : $10.0.0.0$ (bits d’hôte à 0). - Adresse de diffusion : $10.0.255.255$ (bits d’hôte à 1). - Nombre d’hôtes : $2^{(32-16)}-2 = 2^{16}-2 = 65534$. 2. Pour quatre sous‑réseaux, on emprunte $2$ bits au champ hôte (puisque $2^2 = 4$). Nouveau masque : /16 + 2 = /18 → $255.255.192.0$. - Sous‑réseau 0 : $10.0.0.0/18$ → réseau $10.0.0.0$, diffusion $10.0.63.255$. - Sous‑réseau 1 : $10.0.64.0/18$ → réseau $10.0.64.0$, diffusion $10.0.127.255$. - Sous‑réseau 2 : $10.0.128.0/18$ → réseau $10.0.128.0$, diffusion $10.0.191.255$. - Sous‑réseau 3 : $10.0.192.0/18$ → réseau $10.0.192.0$, diffusion $10.0.255.255$. Chaque sous‑réseau contient $2^{(32-18)}-2 = 2^{14}-2 = 16382$ hôtes utilisables. --- ### Exercice 2 – Analyse d’une requête HTTP **Énoncé** : Voici une requête HTTP capturée par un sniffer : ``` GET /produits?cat=electronique&tri=prix_asc HTTP/1.1 Host: boutique.example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Connection: keep-alive ``` 1. Identifier la méthode, l’URI, la version HTTP. 2. Décrire le rôle de chaque en‑tête présent. 3. Écrire la réponse HTTP minimale que le serveur pourrait renvoyer si la ressource existe et est un document HTML de 1240 octets, avec un code d’état 200. **Corrigé** : 1. Méthode : **GET**. URI : `/produits?cat=electronique&tri=prix_asc`. Version : **HTTP/1.1**. 2. Rôle des en‑têtes : - `Host` : indique le nom de domaine du serveur virtuel (nécessaire en HTTP/1.1). - `User-Agent` : informe le serveur sur le navigateur et le système d’exploitation du client. - `Accept` : types de contenus que le client est prêt à accepter, avec leurs facteurs de qualité (q). - `Accept-Language` : langues préférées du client. - `Accept-Encoding` : codages de compression que le client peut décompresser (gzip, deflate). - `Connection: keep-alive` : demande de maintenir la connexion TCP ouverte pour de futures requêtes (évite le nouveau handshake). 3. Réponse minimale (en-têtes essentiels + corps) : ``` HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1240 Connection: keep-alive <!DOCTYPE html> <html lang="fr"> <head><meta charset="UTF-8"><title>Produits</title></head> <body> <!-- 1240 octets de contenu HTML ici --> </body> </html> ``` Le serveur a ajouté les en‑têtes `Content-Type` (type MIME et jeu de caractères) et `Content-Length` (taille du corps en octets). La connexion est maintenue grâce à `keep-alive`. --- ### Exercice 3 – Création d’une page web statique **Énoncé** : Réaliser une page HTML5 intitulée *« Mon portfolio »* contenant : - Un en‑tête avec un titre de niveau 1 « Mon portfolio ». - Une section « À propos » avec un paragraphe de présentation. - Une section « Compétences » sous forme de liste non ordonnée contenant trois éléments : « HTML5 », « CSS3 », « JavaScript ». - Un pied de page affichant le copyright « © 2025 Mon nom ». - Lier une feuille de style externe `style.css` qui centre le texte, définit une police sans‑serif et donne un fond gris très clair (`#f9f9f9`). **Corrigé** : **index.html** ```html <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Mon portfolio</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Mon portfolio</h1> </header> <section id="a-propos"> <h2>À propos</h2> <p>Je suis étudiant en Première série C, passionné par les technologies du web et la programmation.</p> </section> <section id="competences"> <h2>Compétences</h2> <ul> <li>HTML5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </section> <footer> <p>&copy; 2025 Mon nom</p> </footer> </body> </html> ``` **style.css** ```css /* Reset simple */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background-color: #f9f9f9; color: #333; line-height: 1.6; padding: 20px; } header, footer { text-align: center; padding: 1em 0; background-color: #eaeaea; } section { margin: 20px 0; max-width: 800px; margin-left: auto; margin-right: auto; } h1, h2 { color: #2c3e50; } ``` **Vérification** : ouvrir `index.html` dans un navigateur affiche le titre centré, le fond gris clair, les sections avec espacement, et le pied de page avec le copyright. --- ### Exercice 4 – Sécurité : attaque par injection SQL **Énoncé** : Une application web possède un formulaire de connexion qui construit la requête SQL suivante en concaténant directement les entrées utilisateur : ```sql SELECT * FROM utilisateurs WHERE login = '$login' AND password = '$password'; ``` 1. Montrer comment un attaquant pourrait se connecter sans connaître un mot de passe valide en utilisant l’entrée `login` : `' OR '1'='1`. 2. Proposer deux mesures de défense efficaces contre ce type d’attaque. **Corrigé** : 1. Avec les valeurs fournies : - `$login` = `' OR '1'='1` - `$password` = n’importe quoi (ex. `anything`) La requête devient : ```sql SELECT * FROM utilisateurs WHERE login = '' OR '1'='1' AND password = 'anything'; ``` En raison de la priorité des opérateurs (`AND` avant `OR`), l’expression est évaluée comme : ```sql (login = '') OR ('1'='1' AND password = 'anything') ``` Puisque `'1'='1'` est toujours vrai, la partie droite du `OR` est vraie, indépendamment de la valeur de `password`. La clause `WHERE` retourne donc **toutes** les lignes de la table `utilisateurs`, permettant à l’application de considérer la connexion comme réussie (souvent elle prend la première ligne retournée). 2. Mesures de défense : - **Utilisation de requêtes préparées (prepared statements)** avec des paramètres liés (placeholders) ; le SGBD sépare clairement la structure de la requête des données, empêchant toute interprétation des entrées comme du SQL. Exemple en PHP avec PDO : ```php $stmt = $pdo->prepare("SELECT * FROM utilisateurs WHERE login = :login AND password = :password"); $stmt->execute([':login' => $login, ':password' => $password]); ``` - **Validation et échappement des entrées** : vérifier que les champs ne contiennent que des caractères autorisés (ex. uniquement alphanumériques pour un login) et, si nécessaire, échapper les caractères spéciaux selon le contexte SQL (fonction `mysqli_real_escape_string` ou équivalent). Toutefois, les requêtes préparées restent la méthode préférée. --- ### Exercice 5 – Calcul de latence dans une requête HTTPS **Énoncé** : Un client situé à Yaoundé souhaite accéder à un serveur hébergé à Francfort. La distance approximative entre les deux villes est 4 200 km. On suppose que la propagation se fait dans la fibre optique à une vitesse de $2\times10^8$ m/s (environ 2/3 de la vitesse de la lumière dans le vide). 1. Calculer le temps de propagation aller‑simple. 2. Lors d’une connexion HTTPS, le handshake TLS nécessite généralement deux allers‑retours (RTT) supplémentaires après l’établissement de la connexion TCP (qui lui-même nécessite un RTT). Quel est le temps total minimal attribué uniquement à la propagation (ignorer les temps de traitement) pour établir une connexion HTTPS et recevoir le premier octet de réponse ? **Corrigé** : 1. Temps de propagation aller‑simple : $$ t_{prop} = \frac{d}{v} = \frac{4\,200\,000\ \text{m}}{2\times10^8\ \text{m/s}} = 0,021\ \text{s} = 21\ \text{ms} $$ 2. Établissement de la connexion TCP : un aller‑retour (RTT) = $2 \times t_{prop} = 42$ ms. Handshake TLS : deux RTT supplémentaires = $2 \times 42$ ms = 84 ms. Après le handshake, le client envoie la requête HTTP (un aller) et le serveur renvoie le premier octet de réponse (un aller). Cela représente encore un RTT = 42 ms. Temps total de propagation uniquement : $$ T_{total} = \text{RTT}_{TCP} + 2 \times \text{RTT}_{TLS} + \text{RTT}_{req/resp} = 42\ \text{ms} + 84\ \text{ms} + 42\ \text{ms} = 168\ \text{ms} $$ Ainsi, le délai minimal dû à la propagation est d’environ **168 ms**. --- ### Exercice 6 – Utilisation d’une API REST avec fetch **Énoncé** : Écrire un script JavaScript qui, au chargement de la page, récupère la liste des dépôts publics d’un utilisateur GitHub (ex. `octocat`) via l’API REST `https://api.github.com/users/octocat/repos` et affiche le nom de chaque dépôt dans une liste non ordonnée ayant l’identifiant `repo-list`. Gérer les erreurs éventuelles (réponse non‑OK, problème réseau). **Corrigé** : ```javascript document.addEventListener('DOMContentLoaded', function () { const url = 'https://api.github.com/users/octocat/repos'; const listElem = document.getElementById('repo-list'); fetch(url) .then(response => { if (!response.ok) { throw new Error(`Erreur HTTP : ${response.status}`); } return response.json(); // transforme le corps en objet JS }) .then(data => { // data est un tableau d'objets représentant les dépôts data.forEach(repo => { const li = document.createElement('li'); li.textContent = repo.name; listElem.appendChild(li); }); }) .catch(error => { // Affichage d'un message d'erreur dans la liste const li = document.createElement('li'); li.style.color = 'red'; li.textContent = `Erreur : ${error.message}`; listElem.appendChild(li); }); }); ``` **Explication** : - `fetch` renvoie une Promise qui se résout avec l’objet `Response`. - On teste `response.ok` (true pour les codes 2xx). - Si la réponse est bonne, on appelle `.json()` qui renvoie une deuxième Promise contenant les données. - On parcourt le tableau reçu et on crée un `<li>` pour chaque nom de dépôt. - Toute erreur (réseau, code HTTP non‑OK, problème de parsing) est attrapée par le `catch` et affichée en rouge. --- ## Erreurs fréquentes | # | Erreur classique | Pourquoi elle se produit | Comment l’éviter | |---|------------------|--------------------------|------------------| | 1 | **Confondre adresse de réseau et adresse de broadcast** | L’élève applique mal le masque ou oublie de mettre tous les bits d’hôte à 0 ou à 1. | Toujours rappeler : adresse réseau = IP & masque (bits d’hôte à 0) ; broadcast = IP | ~masque (bits d’hôte à 1). Vérifier avec un petit exemple (ex. 192.168.1.0/24). | | 2 | **Oublier le `Host` dans une requête HTTP/1.1** | On pense que l’URL suffit ; le serveur virtuel ne peut alors pas déterminer quel site servir. | Insister sur le fait que l’en‑tête `Host` est obligatoire en HTTP/1.1 ; le tester avec un outil comme `curl -v`. | | 3 | **Utiliser `innerHTML` sans assainir les données** | Conduit à des vulnérabilités XSS lorsqu’on injecte du contenu provenant de l’utilisateur. | Préférer `textContent` pour du texte pur, ou utiliser une bibliothèque de sanitisation (DOMPurify) si du HTML est réellement nécessaire. | | 4 | **Ne pas fermer les balises HTML** (ex. `<div>` sans `</div>`) | Le navigateur tente de réparer, ce qui peut produire un rendu inattendu et compliquer le débogage. | Utiliser un validateur (W3C Validator) ou un éditeur avec fermeture automatique des balises. | | 5 | **Confondre GET et POST** lorsqu’on envoie un formulaire | On envoie des données sensibles dans l’URL (GET) ou on oublie d’ajouter l’attribut `method="post"`. | Rappeler que GET doit être utilisé uniquement pour des opérations idempotentes et sans effets secondaires ; POST pour soumettre des données qui modifient l’état côté serveur. | | 6 | **Ne pas spécifier le jeu de caractères UTF‑8** | Affichage incorrect des caractères accentués ou des symboles spéciaux. | Toujours inclure `<meta charset="UTF-8">` dans le `<head>` du document HTML. | | 7 | **Oublier de déclarer le doctype HTML5** | Le navigateur passe en mode « quirks », entraînant des interprétations CSS différentes. | Commencer chaque fichier HTML par `<!DOCTYPE html>`. | | 8 | **Utiliser du CSS en ligne (`style=` ) pour tout le design** | Rend la maintenance difficile et va à l’encontre de la séparation des préoccupations. | Encourager l’utilisation de feuilles de style externes ou internes dans `<style>`, réservant le style inline uniquement pour des cas très spécifiques (ex. attributs dynamiques via JavaScript). | --- **Fin du cours**. Ce document constitue une référence complète pouvant être étudiée seul, couvrant l’ensemble du programme officiel « Internet et le web » pour la classe de Première, toutes séries confondues, avec des démonstrations, des exemples détaillés, des exercices corrigés et des rappels des points essentiels. Bonne révision et bon travail !