Fonctionnement du Web et des URL

Comprendre l'Interaction Client-Serveur sur le Web

Le Web est un vaste système d'information où des milliards d'appareils interagissent pour consulter et partager des ressources. Au cœur de ce système se trouve une architecture fondamentale connue sous le nom de modèle client-serveur. Cette fiche détaillera ce modèle, ses composants clés, leur fonctionnement et les protocoles qui rendent ces interactions possibles.

1. Introduction au Modèle Client-Serveur

Le modèle client-serveur est une architecture de communication distribuée dans laquelle les tâches sont réparties entre des fournisseurs de ressources ou services, appelés serveurs, et des demandeurs de ces services, appelés clients. Sur le Web, ce modèle permet aux utilisateurs d'accéder à des informations et des applications stockées sur des serveurs distants via leurs navigateurs.

1.1. Rôle du Client

Le client est généralement un logiciel (comme un navigateur Web : Chrome, Firefox, Safari, Edge) exécuté sur l'ordinateur ou le périphérique mobile de l'utilisateur. Sa fonction principale est de :

• Envoyer des requêtes aux serveurs pour obtenir des ressources (pages Web, images, vidéos, etc.).
• Recevoir les réponses des serveurs.
• Interpréter et afficher les ressources reçues de manière compréhensible pour l'utilisateur.
• Gérer l'interface utilisateur et les interactions de l'utilisateur.

Par exemple, lorsque vous tapez une adresse Web dans votre navigateur, celui-ci agit comme un client pour demander cette page au serveur approprié.

1.2. Rôle du Serveur

Le serveur est un programme ou un ordinateur qui stocke et délivre des ressources en réponse aux requêtes des clients. Ses fonctions incluent :

• Écouter les requêtes entrantes des clients.
• Traiter ces requêtes (par exemple, localiser le fichier demandé sur son disque dur).
• Envoyer les ressources demandées (ou un message d'erreur si la ressource n'est pas trouvée) au client qui les a requises.
• Gérer l'accès aux ressources, la sécurité et parfois l'exécution de scripts côté serveur.

Un serveur Web est conçu pour être toujours opérationnel et capable de gérer un grand nombre de requêtes simultanées de la part de plusieurs clients.

2. Le Protocole HTTP: Langage de Communication Client-Serveur

L'interaction entre le client et le serveur sur le Web est régie par des règles strictes définies par un protocole. Le protocole principal utilisé pour la navigation Web est le HTTP (HyperText Transfer Protocol) et sa version sécurisée, le HTTPS.

2.1. HTTP (HyperText Transfer Protocol)

Le HTTP est un protocole de type "requête-réponse" sans état, ce qui signifie que chaque requête du client est traitée indépendamment des précédentes.

• Requête HTTP : Le client envoie une requête au serveur. Cette requête contient plusieurs informations, dont :
  • La méthode HTTP (GET, POST, PUT, DELETE, etc. ; GET étant la plus courante pour demander une ressource).
  • L'URL de la ressource demandée.
  • Des en-têtes (informations sur le client, le type de contenu accepté, etc.).
  • Optionnellement, un corps de message pour les requêtes envoyant des données (ex: formulaire POST).
• Réponse HTTP : Le serveur reçoit la requête, la traite et envoie une réponse qui comprend :
  • Un code de statut numérique (ex: 200 OK, 404 Not Found, 500 Internal Server Error) indiquant le résultat de la requête.
  • Des en-têtes (informations sur le serveur, le type de contenu de la réponse, etc.).
  • Le corps de la réponse, qui contient la ressource demandée (par exemple, le code HTML d'une page Web, une image, un fichier JSON).

Comprendre les codes de statut HTTP est crucial pour le débogage :

• Codes 2xx (Succès) : La requête a été reçue, comprise et acceptée. Le plus courant est 200 OK.
• Codes 3xx (Redirection) : D'autres actions sont nécessaires pour compléter la requête. Ex: 301 Moved Permanently, 302 Found.
• Codes 4xx (Erreur client) : Le client semble avoir fait une erreur. Ex: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found.
• Codes 5xx (Erreur serveur) : Le serveur a échoué à répondre à une requête valide. Ex: 500 Internal Server Error, 503 Service Unavailable.

2.2. HTTPS (HyperText Transfer Protocol Secure)

Le HTTPS est la version sécurisée du HTTP. Il utilise les protocoles SSL (Secure Sockets Layer) ou TLS (Transport Layer Security) pour chiffrer la communication entre le client et le serveur.

• Importance : Protège la confidentialité et l'intégrité des données échangées (mots de passe, informations bancaires, données personnelles) contre l'interception et la falsification.
• Indicateur : Le "s" dans HTTPS et souvent un cadenas dans la barre d'adresse du navigateur.
• Fonctionnement : Avant que les données HTTP ne soient envoyées, une "poignée de main" SSL/TLS est établie pour négocier les clés de chiffrement et vérifier l'identité du serveur via un certificat numérique.

Recommandation : Les sites modernes devraient toujours utiliser HTTPS pour assurer la sécurité des utilisateurs.

3. L'URL (Uniform Resource Locator) : L'Adresse d'une Page Web

Une URL est l'adresse unique qui identifie une ressource sur le Web et spécifie comment y accéder. C'est l'élément que vous tapez dans la barre d'adresse de votre navigateur ou sur lequel vous cliquez. Une URL est composée typiquement de trois éléments principaux, comme indiqué dans les documents de cours :

3.1. Protocole

Exemples : http:// ou https://.

• C'est la première partie d'une URL et elle indique le protocole qui doit être utilisé pour accéder à la ressource.
• Il sert de "langage" de communication pour que le client (votre navigateur) sache comment interagir avec le serveur.
• Outre HTTP/HTTPS, d'autres protocoles existent, bien que moins courants pour la navigation Web directe, comme ftp:// pour le transfert de fichiers ou mailto: pour les adresses e-mail.

3.2. Nom de Domaine

Exemples : www.google.com, delagrave.fr, monentreprise.org.

• C'est l'identifiant unique d'un site Web sur Internet. Il est plus facile à retenir qu'une adresse IP numérique (ex: ).
• Il est composé de plusieurs parties séparées par des points :
  • Nom de sous-domaine : Souvent "www" (World Wide Web), mais peut être n'importe quoi (ex: blog.monsite.com, mail.monsite.com).
  • Nom de domaine principal : L'identifiant unique (ex: google, delagrave).
  • Domaine de premier niveau (TLD - Top-Level Domain) : La dernière partie de l'URL (ex: .com, .fr, .org, .net, .edu). Il peut être générique () ou national ().
• Les noms de domaine sont gérés par un système global appelé DNS (Domain Name System), qui traduit ces noms en adresses IP que les ordinateurs peuvent comprendre.

Exemple de confusion : Souvent, les gens pensent que "www" est obligatoire, mais ce n'est qu'un sous-domaine commun. Un site peut très bien être accessible via monsite.com directement.

3.3. Chemin (Path)

Exemples : /produits/electronique/televiseurs.html, /actualites/2023/article-web.php, /images/logo.png.

• Cette partie de l'URL pointe vers une ressource spécifique (une page HTML individuelle, une image, un fichier CSS, un document PDF, etc.) sur le serveur identifié par le nom de domaine.
• Elle représente la structure hiérarchique des fichiers et des dossiers sur le serveur Web, de manière similaire à la structure de fichiers sur un ordinateur local.
• Si aucun chemin n'est spécifié, le serveur renvoie généralement la page d'accueil par défaut (souvent index.html ou default.htm) du site.

Exemple complet d'URL :

• Protocole : https://
• Nom de domaine : www.monsite.com
• Chemin : /blog/article-sur-les-urls.html

3.4. Autres Composants Optionnels de l'URL

Bien que les trois éléments ci-dessus soient les principaux, une URL peut contenir d'autres informations importantes :

• Port : . Le numéro de port spécifie un point d'entrée spécifique sur le serveur. Pour HTTP, le port par défaut est 80 ; pour HTTPS, c'est 443. Ils sont généralement omis car implicites.
• Paramètres de requête (Query string) : . Commencent par un point d'interrogation (?) et sont des paires clé-valeur (q=info, lang=fr) séparées par des esperluettes (&). Utilisés pour transmettre des données au serveur, souvent pour des recherches ou des filtres.
• Ancre (Fragment identifier) : . Commence par un dièse (#) et pointe vers une section spécifique à l'intérieur d'une page HTML. Le navigateur utilise cette information pour défiler vers l'élément correspondant sur la page, mais cette partie n'est généralement pas envoyée au serveur.

4. Le Processus d'Interaction Client-Serveur pour une Page Web

Lorsque vous souhaitez consulter une page Web, voici la séquence détaillée des événements :

1. Saisie de l'URL : L'utilisateur entre une URL dans la barre d'adresse de son navigateur ou clique sur un lien hypertexte.
2. Résolution DNS : Le navigateur doit déterminer l'adresse IP du serveur correspondant au nom de domaine de l'URL. Il interroge un serveur DNS qui lui fournit l'adresse IP numérique.
3. Établissement de la connexion : Le navigateur utilise l'adresse IP obtenue pour établir une connexion TCP/IP avec le serveur Web (si c'est HTTPS, le handshake TLS/SSL est effectué à ce stade pour chiffrer la communication).
4. Envoi de la requête HTTP/HTTPS : Le navigateur envoie une requête HTTP (généralement une requête GET) au serveur pour la ressource spécifiée par le chemin de l'URL.
5. Traitement de la requête par le serveur : Le serveur reçoit la requête, analyse l'URL et localise la ressource demandée sur son système de fichiers.
6. Envoi de la réponse HTTP/HTTPS : Le serveur envoie une réponse HTTP au client. Cette réponse inclut le code de statut et, si la requête a réussi (par exemple, 200 OK), le contenu de la ressource (généralement du code HTML, CSS, JavaScript, images, etc.).
7. Réception et rendu par le navigateur : Le navigateur reçoit la réponse, lit le code HTML et les autres ressources. Il interprète ce code et rend la page Web à l'écran, affichant le texte, les images et les autres éléments de manière structurée et stylisée. Si des ressources supplémentaires (images, feuilles de style CSS, scripts JavaScript) sont référencées dans le HTML, le navigateur effectuera des requêtes supplémentaires pour les obtenir.
8. Fermeture/Maintien de la connexion : Une fois la page chargée, la connexion peut être fermée ou maintenue ouverte pour d'autres requêtes (connexions persistantes).

5. Ressources Web et Types de Contenu

Lorsqu'un serveur répond à une requête, il envoie une ressource. Une ressource est toute entité que l'on peut identifier et manipuler (représentation d'une information).

5.1. Types de Ressources Courantes

• Pages HTML : Le contenu textuel structuré d'une page Web.
• Feuilles de style CSS : Définissent l'apparence et la mise en forme des pages HTML.
• Scripts JavaScript : Ajoutent de l'interactivité et des fonctionnalités dynamiques aux pages Web.
• Images : Fichiers JPG, PNG, GIF, SVG.
• Vidéos : Fichiers MP4, WebM.
• Audio : Fichiers MP3, WAV.
• Documents : PDF, DOCX, etc.
• Données brutes : JSON, XML, souvent utilisées par des API pour échanger des données entre applications.

5.2. Le Rôle du Navigateur dans la Mise en Forme

Le cours souligne que le serveur retourne les ressources "sous forme de code mis en forme par le navigateur."

• Serveur : Envoie le code brut (HTML, CSS, JS, etc.) et les fichiers binaires (images).
• Navigateur : Est chargé d'interpréter ce code. Il possède un moteur de rendu (rendering engine) qui convertit le HTML en une structure d'éléments, applique les styles CSS, exécute le JavaScript et dessine finalement la page Web telle que l'utilisateur la voit. Sans navigateur pour interpréter ce code, l'utilisateur verrait une suite de caractères et de balises illisibles.

Ceci est une distinction cruciale : le serveur fournit les briques, le navigateur est l'architecte qui les assemble en un bâtiment visible et fonctionnel.

6. Cas d'Usage et Exemples Détaillés

6.1. Consultation Statique d'une Page

Lorsque vous visitez https://www.monsite.com/a-propos.html:

• Votre navigateur (client) envoie une requête GET pour /a-propos.html au serveur de monsite.com.
• Le serveur trouve le fichier a-propos.html sur son disque.
• Il renvoie ce fichier avec un statut 200 OK.
• Votre navigateur lit le HTML, charge les CSS et JS référencés, et affiche la page.

6.2. Envoi d'un Formulaire (Méthode POST)

Imaginez un formulaire d'inscription sur https://www.ecommerce.com/register:

• L'utilisateur remplit des champs (nom, email, mot de passe) et clique sur "Soumettre".
• Le navigateur (client) envoie une requête POST à https://www.ecommerce.com/register.
• Le corps de la requête POST contient les données du formulaire (par exemple, name=Dupont&email=dupont@example.com&password=secret).
• Le serveur reçoit ces données. Un programme côté serveur (par exemple, en PHP, Python, Node.js) traite ces données : les valide, les enregistre dans une base de données.
• Le serveur envoie une réponse au client, par exemple, une page de confirmation ou une redirection (302 Found) vers la page de profil de l'utilisateur avec un statut 200 OK si tout s'est bien passé.

Pitfall : Ne jamais envoyer d'informations sensibles (mots de passe) avec une méthode GET car elles apparaîtraient dans l'URL et seraient enregistrées dans l'historique du navigateur. Toujours utiliser POST avec HTTPS.

6.3. API REST (Application Programming Interface)

Les interactions client-serveur ne se limitent pas aux navigateurs humains. Les applications mobiles ou d'autres services peuvent être des clients.

• Une application mobile (client) souhaite obtenir la liste des produits pour un magasin.
• Elle envoie une requête GET à une API comme https://api.magasin.com/produits.
• Le serveur de l'API interroge sa base de données, récupère les informations sur les produits.
• Il renvoie ces données formatées en JSON (JavaScript Object Notation) ou XML avec un statut 200 OK.
• L'application mobile reçoit le JSON et l'utilise pour afficher la liste des produits à l'utilisateur.

7. Sécurité et Pitfalls Communs

7.1. Sécurité (HTTPS)

• Chiffrement : Empêche les écoutes indiscrètes (eavesdropping) et assure la confidentialité des données.
• Authentification : Le navigateur vérifie le certificat du serveur pour s'assurer qu'il communique avec le bon site et non avec un imposteur (man-in-the-middle attack).
• Intégrité : Assure que les données n'ont pas été altérées pendant le transport.

7.2. Erreurs Courantes et leur Signification

"Les codes de statut HTTP sont des réponses à des requêtes HTTP. Ils sont émis par un serveur en réponse à la requête d'un client. Les codes de statut sont répartis en cinq classes."

• 404 Not Found : Le plus célèbre. Le serveur ne peut pas trouver la ressource demandée. Souvent dû à une faute de frappe dans l'URL ou un lien brisé.
• 403 Forbidden : Le serveur comprend la requête mais refuse de l'autoriser. L'utilisateur n'a pas les permissions nécessaires (ex: tenter d'accéder à un répertoire privé sans authentification).
• 500 Internal Server Error : Une erreur générique côté serveur. Quelque chose s'est mal passé sur le serveur lui-même alors qu'il traitait la requête. Souvent dû à un bug dans le code du serveur.
• 503 Service Unavailable : Le serveur n'est pas prêt à traiter la requête, souvent parce qu'il est en surcharge ou en maintenance.

8. Conclusion et Synthèse

L'interaction client-serveur est le fondement du World Wide Web. Elle repose sur :

• Les clients (navigateurs) qui initient les requêtes.
• Les serveurs qui stockent et délivrent les ressources.
• Le protocole HTTP/HTTPS qui définit les règles de communication.
• L'URL qui fournit l'adresse unique de chaque ressource.

Chaque fois que vous naviguez sur Internet, une série complexe et rapide d'échanges client-serveur se produit, orchestrée par ces composants. La compréhension de ce processus est essentielle pour quiconque souhaite comprendre le fonctionnement d'Internet ou développer des applications Web.

SNT 2de : Le Web et les Interactions Client-Serveur

Définition de l'URL (Uniform Resource Locator)

L'URL est l'adresse unique d'une page Web. Elle permet de localiser une ressource sur Internet.

Composants d'une URL

Une URL se compose de trois parties essentielles :

• Protocole de communication :
  • http:// (HyperText Transfer Protocol)
  • https:// (HyperText Transfer Protocol Secure) – version sécurisée
  • Régit les échanges entre client et serveur.
• Nom de domaine :
  • Représente l'identité (marque, entreprise, association, etc.).
  • Exemple : google.com, delagrave.fr.
• Chemin :
  • Indique l'emplacement précis d'une ressource ou d'une page sur le serveur.
  • Exemple : /produits/livres.html.

Interactions Client-Serveur

Le fonctionnement du Web repose sur un modèle client-serveur :

1. Le poste client (votre ordinateur, smartphone) envoie une requête à un serveur.
   • Cette requête est généralement une demande d'accès à une page Web via son URL.
2. Le serveur reçoit la requête, la traite, et y répond.
   • Il envoie au client les ressources demandées (textes, images, vidéos, etc.).
3. Le navigateur Web du client reçoit ces ressources.
   • Il les interprète et les met en forme pour les afficher de manière lisible à l'utilisateur.

Le Protocole HTTP

Le HTTP (HyperText Transfer Protocol) est la base de la communication pour le World Wide Web. Il définit la manière dont les informations sont formatées et transmises, ainsi que les actions que les navigateurs Web et les serveurs Web doivent entreprendre en réponse à diverses commandes.

• Il gère l'échange de données entre le poste client (navigateur) et le poste serveur.
• HTTPS ajoute une couche de sécurité par chiffrement des communications, essentielle pour les données sensibles (banques, achats en ligne).

Résumé des Concepts Clés

• URL = Adresse Web unique.
• HTTP/HTTPS = Protocoles de communication.
• Client = Envoie des requêtes (navigateur).
• Serveur = Répond aux requêtes (héberge les sites).
• Navigateur = Affiche les ressources reçues du serveur.