Comment fonctionne un site Web

Les fondations Web

Pour bien comprendre un site web, il faut d’abord en connaître les éléments de base. Voici les principaux composants et mécanismes qui permettent à un site de fonctionner.

L'architecture client/serveur est un modèle dans lequel un "client", généralement un navigateur, envoie des requêtes à un serveur pour obtenir des ressources (pages web, images, etc.).

Le serveur traite ces requêtes et renvoie les données appropriées au client. Ce modèle permet de distribuer le traitement : le client gère l'affichage des informations et le serveur, quant à lui, gère le stockage des données et leur traitement.

Exemple : Quand vous tapez une adresse web dans votre navigateur, le client (votre navigateur) demande au serveur le contenu du site que vous avez demandé à consulter, qui vous le renvoie pour affichage.

Un navigateur est un logiciel qui permet à un utilisateur d'accéder à des pages web. Son rôle principal est d'interpréter le code HTML, CSS, et JavaScript des pages reçues depuis un serveur, puis de les afficher sous une forme compréhensible par l'utilisateur.

En plus de l'affichage, les navigateurs gèrent la sécurité (via HTTPS), stockent des données localement (cookies, cache), et permettent d'interagir avec des applications web.

Exemple : Google Chrome, Brave, Firefox ou Safari sont des navigateurs qui traduisent le code des sites web en pages visuelles interactives.

Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages web. Il détermine quels éléments sont des titres, des paragraphes, des liens, des images, etc.

Chaque élément du contenu est encapsulé dans des balises spécifiques qui donnent un sens au texte et aux médias pour les navigateurs.

Bien que le HTML définisse la structure, il est souvent complété par le CSS (pour le style) et JavaScript (pour l'interactivité).

Exemple de code HTML :

Pour aller plus loin : Comment est fait le contenu du Web (HTML et CSS) :

Formation WordPress > Dans les entrailles de WordPress > Comment est fait le contenu du Web

Une URL (Uniform Resource Locator) est l’adresse qui permet de localiser une ressource sur Internet. Elle est composée de plusieurs parties : le protocole (comme HTTP ou HTTPS), le nom de domaine (exemple.com), et éventuellement un chemin vers une ressource spécifique (/page.html). Les URLs servent à identifier les ressources de manière unique et à guider le navigateur vers les informations correctes.

Pour comprendre comment fonctionne un site Web, l'architecture client/serveur, le rôle des navigateurs et du HTML, et la structure des URLs, voir :
Formation WordPress > Fondations > Fonctionnement d'un site Web

Le protocole HTTP (HyperText Transfer Protocol) permet la communication entre un navigateur (client) et un serveur. Il définit comment les données sont envoyées et reçues sur le web.

HTTPS est la version sécurisée d'HTTP, où les données sont cryptées via un certificat SSL (Secure Socket Layer). Ce cryptage protège les informations échangées, notamment les mots de passe et les données sensibles, contre les interceptions malveillantes.

Exemple : Les sites de e-commerce utilisent HTTPS pour sécuriser les transactions bancaires des clients.

Les cookies sont de petits fichiers stockés sur l’ordinateur de l’utilisateur par un site web pour mémoriser des informations, comme les préférences de l'utilisateur ou les sessions de connexion.

Les cookies servent aussi à suivre le comportement des visiteurs pour personnaliser l’expérience ou mesurer l’audience.

Exemple : Un cookie peut retenir vos préférences de langue sur un site.

Le front-end concerne tout ce que l'utilisateur voit et avec quoi il interagit sur un site web. Cela inclut le design, les animations et l'interface utilisateur. Il est principalement construit à l'aide de HTML, CSS et JavaScript.

Le back-end, quant à lui, gère la logique serveur, les bases de données et les interactions entre le site et les systèmes externes. Les langages courants pour le back-end incluent PHP, Python, Node.js, et Ruby.

Exemple : Lorsque vous remplissez un formulaire sur une page (front-end), vos informations sont envoyées au serveur (back-end) pour être stockées dans une base de données.

Les bases de données permettent de stocker, organiser et récupérer des informations de manière structurée. Elles sont indispensables pour les sites web dynamiques qui nécessitent des mises à jour fréquentes du contenu, comme les sites e-commerce ou les réseaux sociaux.

Les bases de données relationnelles (MySQL, PostgreSQL) utilisent des tables et des relations, tandis que les bases de données NoSQL (MongoDB) sont plus flexibles pour le stockage de données non structurées.

Exemple : Lorsqu'un utilisateur achète un produit en ligne, ses informations sont enregistrées dans une base de données pour permettre la gestion des commandes, pour gérer le stock, suivre les commandes et personnaliser l’expérience utilisateur.

Les API (Application Programming Interface) permettent aux sites web de communiquer avec d'autres systèmes ou services pour échanger des données ou accéder à des fonctionnalités externes.

Par exemple, un site web peut utiliser une API de paiement pour traiter les transactions ou une API de météo pour afficher les conditions météorologiques actuelles. Les API facilitent l'intégration de services tiers tout en gardant les systèmes indépendants.

Exemple : Un site de réservation de voyages peut utiliser l’API de Google Maps pour afficher des cartes interactives des destinations.

Un CDN (Content Delivery Network) est un réseau de serveurs distribués géographiquement qui permet de délivrer du contenu rapidement en fonction de la localisation de l'utilisateur. Les fichiers statiques comme les images, les vidéos ou les scripts JavaScript sont mis en cache dans ces serveurs pour réduire le temps de chargement des pages web et améliorer les performances.

Exemple : Une image d’un site hébergé aux États-Unis sera plus rapide à charger pour un utilisateur en Europe si elle est servie par un serveur CDN européen.

La sécurité des sites web protège les données des utilisateurs et limite les attaques malveillantes.

Exemples de menaces :

• Les injections SQL : Cette attaque vise les bases de données d'un site en insérant des requêtes SQL malveillantes dans les champs de saisie utilisateur (comme les formulaires de connexion). Cela permet à l'attaquant de manipuler la base de données, par exemple, pour extraire des informations sensibles ou même en modifier le contenu.

• Les attaques XSS (Cross-Site Scripting) : Une attaque XSS injecte du code malveillant, souvent du JavaScript, dans une page web que d'autres utilisateurs vont consulter. Cela permet à l'attaquant de voler des informations, comme les cookies, ou de manipuler les actions des utilisateurs sur le site.

• Les attaques CSRF (Cross-Site Request Forgery) : Ces attaques forcent un utilisateur authentifié à exécuter des actions non désirées sur un site web sur lequel il est connecté. Par exemple, cela pourrait permettre à un attaquant de faire des transferts d'argent ou de modifier des informations de compte à l'insu de l'utilisateur.

• Les attaques DDoS (Distributed Denial of Service) : ces attaques consistent à submerger un serveur avec un grand nombre de requêtes simultanées, rendant le site web inaccessible pour les utilisateurs légitimes.

• Le phishing : Les pirates créent de fausses pages web ou envoient des emails malveillants pour inciter les utilisateurs à divulguer des informations sensibles comme leurs identifiants de connexion ou leurs données bancaires.

• Le ransomware : Ce type d'attaque chiffre les données du site ou des utilisateurs et demande une rançon en échange de leur déchiffrement. Les attaques de ransomware ciblent souvent les serveurs et les bases de données.

• Le vol de session (Session Hijacking) : Il s'agit d'une attaque où un pirate s'empare de la session active d'un utilisateur en interceptant son cookie de session, permettant ainsi au pirate de se faire passer pour l'utilisateur légitime.

• L'élévation de privilèges : Lors de cette attaque, un utilisateur malveillant parvient à obtenir des droits d'accès plus élevés que ceux qui lui sont normalement accordés, ce qui peut lui permettre de modifier des données sensibles ou d'accéder à des parties protégées du site.

Pour se prémunir contre ces menaces, les développeurs utilisent des techniques de validation des données, des protocoles sécurisés comme HTTPS, et des pare-feu applicatifs web (WAF).

Exemple : Les sites e-commerce mettent en place des certificats SSL et des validations strictes des formulaires pour protéger les transactions et les données des utilisateurs.

Ces éléments techniques sont les fondations sur lesquelles reposent tous les sites web, quelle que soit leur taille ou leur complexité.

Voir : Formation WordPress > Module 15 > Sécurité