Dans ce cours, nous allons explorer les interactions client-serveur dans le développement web. Nous étudierons en détail les requêtes HTTP, la construction et gestion des formulaires, ainsi que les aspects sécuritaires essentiels. Nous verrons comment créer des applications web robustes qui communiquent efficacement entre le navigateur et le serveur.

📋 Mémo rapide : Client demande → Serveur traite → Serveur répond → Client affiche

   📨 Exemple de requête HTTP GET :
   
   GET /api/users?page=1 HTTP/1.1
   Host: monsite.com
   User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
   Accept: application/json
   Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
   
   📨 Exemple de requête HTTP POST :
   
   POST /api/users HTTP/1.1
   Host: monsite.com
   Content-Type: application/json
   Content-Length: 87
   
   {
     "nom": "Dupont",
     "email": "dupont@email.com",
     "age": 25
   }
   

⚡ Points importants : Les en-têtes définissent le format, l'authentification, la langue, etc.

   📝 Structure d'un formulaire complet :
   
   <form action="/traitement.php" method="POST" enctype="multipart/form-data">
       <!-- Champs de saisie -->
       <label for="nom">Nom :</label>
       <input type="text" id="nom" name="nom" required maxlength="50">
       
       <label for="email">Email :</label>
       <input type="email" id="email" name="email" required>
       
       <label for="age">Âge :</label>
       <input type="number" id="age" name="age" min="18" max="120">
       
       <!-- Upload de fichier -->
       <label for="photo">Photo :</label>
       <input type="file" id="photo" name="photo" accept="image/*">
       
       <!-- Protection CSRF -->
       <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
       
       <button type="submit">Envoyer</button>
   </form>
   

⚠️ Important : Toujours utiliser `enctype="multipart/form-data"` pour les uploads de fichiers !

   🔄 Traitement sécurisé des formulaires PHP :
   
   <?php
   // Vérification de la méthode
   if ($_SERVER['REQUEST_METHOD'] === 'POST') {
       
       // Validation CSRF
       if (!hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
           die('Token CSRF invalide');
       }
       
       // Nettoyage et validation des données
       $nom = filter_input(INPUT_POST, 'nom', FILTER_SANITIZE_STRING);
       $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
       $age = filter_input(INPUT_POST, 'age', FILTER_VALIDATE_INT, 
                          ['options' => ['min_range' => 18, 'max_range' => 120]]);
       
       // Vérification des erreurs
       $erreurs = [];
       if (empty($nom)) $erreurs[] = "Le nom est requis";
       if (!$email) $erreurs[] = "Email invalide";
       if ($age === false) $erreurs[] = "Âge invalide";
       
       if (empty($erreurs)) {
           // Traitement des données (base de données, etc.)
           // Utilisation de requêtes préparées pour éviter l'injection SQL
           $stmt = $pdo->prepare("INSERT INTO users (nom, email, age) VALUES (?, ?, ?)");
           $stmt->execute([$nom, $email, $age]);
           
           // Redirection après traitement réussi
           header('Location: /success.php');
           exit;
       }
   }
   ?>
   

   🔒 Exemple de protection CSRF :
   
   <?php
   // Génération du token CSRF
   if (empty($_SESSION['csrf_token'])) {
       $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
   }
   ?>
   
   <!-- Dans le formulaire -->
   <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
   
   🛡️ Protection contre l'injection SQL :
   
   // ❌ DANGEREUX - Vulnérable à l'injection
   $sql = "SELECT * FROM users WHERE email = '" . $_POST['email'] . "'";
   
   // ✅ SÉCURISÉ - Requête préparée
   $stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
   $stmt->execute([$_POST['email']]);
   
   🔐 Échappement pour éviter XSS :
   
   // Affichage sécurisé
   echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');
   

🚨 Règle d'or :
• Ne jamais faire confiance aux données utilisateur
• Valider côté client ET serveur
• Utiliser HTTPS pour les données sensibles
• Maintenir les systèmes à jour

   🚀 Requête AJAX moderne avec Fetch API :
   
   // Envoi de données avec fetch()
   async function envoyerDonnees(donnees) {
       try {
           const response = await fetch('/api/users', {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json',
                   'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
               },
               body: JSON.stringify(donnees)
           });
           
           if (!response.ok) {
               throw new Error(`Erreur ${response.status}: ${response.statusText}`);
           }
           
           const resultat = await response.json();
           console.log('Succès:', resultat);
           
       } catch (error) {
           console.error('Erreur:', error);
           // Gestion d'erreur côté client
           document.getElementById('message-erreur').textContent = 
               'Une erreur est survenue. Veuillez réessayer.';
       }
   }
   
   // Utilisation
   const formData = {
       nom: 'Dupont',
       email: 'dupont@email.com',
       age: 25
   };
   
   envoyerDonnees(formData);
   

   💡 Système d'inscription complet :
   
   <!-- HTML -->
   <form id="inscriptionForm" action="/inscription.php" method="POST">
       <div>
           <label for="nom">Nom complet :</label>
           <input type="text" id="nom" name="nom" required minlength="2" maxlength="50">
           <span class="erreur" id="erreur-nom"></span>
       </div>
       
       <div>
           <label for="email">Email :</label>
           <input type="email" id="email" name="email" required>
           <span class="erreur" id="erreur-email"></span>
       </div>
       
       <div>
           <label for="motdepasse">Mot de passe :</label>
           <input type="password" id="motdepasse" name="motdepasse" required minlength="8">
           <span class="erreur" id="erreur-motdepasse"></span>
       </div>
       
       <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
       <button type="submit">S'inscrire</button>
   </form>
   
   <!-- JavaScript pour validation temps réel -->
   <script>
   document.getElementById('inscriptionForm').addEventListener('submit', async function(e) {
       e.preventDefault();
       
       // Validation côté client
       const nom = document.getElementById('nom').value.trim();
       const email = document.getElementById('email').value.trim();
       const motdepasse = document.getElementById('motdepasse').value;
       
       let erreurs = false;
       
       if (nom.length < 2) {
           document.getElementById('erreur-nom').textContent = 'Le nom doit contenir au moins 2 caractères';
           erreurs = true;
       }
       
       if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
           document.getElementById('erreur-email').textContent = 'Email invalide';
           erreurs = true;
       }
       
       if (motdepasse.length < 8) {
           document.getElementById('erreur-motdepasse').textContent = 'Le mot de passe doit contenir au moins 8 caractères';
           erreurs = true;
       }
       
       if (!erreurs) {
           // Envoi via fetch
           const formData = new FormData(this);
           
           try {
               const response = await fetch('/inscription.php', {
                   method: 'POST',
                   body: formData
               });
               
               const result = await response.json();
               
               if (result.success) {
                   window.location.href = '/connexion.php?inscription=success';
               } else {
                   // Affichage des erreurs serveur
                   result.erreurs.forEach(erreur => {
                       console.error(erreur);
                   });
               }
           } catch (error) {
               console.error('Erreur réseau:', error);
           }
       }
   });
   </script>
   

💡 Points clés à retenir :

• 🔸 HTTP est un protocole stateless avec structure requête/réponse
• 🔸 Choisir GET pour récupérer, POST pour envoyer des données sensibles
• 🔸 Toujours valider les données côté client ET serveur
• 🔸 Implémenter les protections CSRF, XSS et injection SQL
• 🔸 Utiliser HTTPS pour chiffrer les échanges et protéger les données
• 🔸 Gérer proprement les erreurs (codes HTTP appropriés)
• 🔸 Optimiser les performances (compression, cache, requêtes minimes)
• 🔸 Documenter clairement les APIs (Swagger/OpenAPI)
• 🔸 Mettre en place un système d'authentification sécurisé (JWT/OAuth)
• 🔸 Respecter les bonnes pratiques REST pour les APIs (verbes HTTP, URLs)
• 🔸 Prévoir des mécanismes de limitation de requêtes (rate limiting)
• 🔸 Tester différents scénarios (succès, échec, edge cases)

Objectif pédagogique : Comprendre les requêtes HTTP GET et manipuler les réponses JSON.

Énoncé :
1. Créez un bouton qui déclenche une requête GET vers l'API JSONPlaceholder (https://jsonplaceholder.typicode.com/posts/1)
2. Affichez le titre du post reçu dans un élément HTML
Conseil : Utilisez fetch().then() pour gérer la réponse asynchrone.

Objectif pédagogique : Maîtriser l'envoi de données via POST et la prévention du rechargement de page.

Énoncé :
1. Créez un formulaire avec champs "nom" et "email" qui envoie les données en POST à https://jsonplaceholder.typicode.com/users
2. Empêchez le rechargement de page et affichez la réponse du serveur
Astuce : Utilisez preventDefault() et FormData pour collecter les données.

Objectif pédagogique : Implémenter des mesures de sécurité basiques côté client.

Énoncé :
Créez un formulaire de connexion avec :
1. Validation de l'email (format valide)
2. Validation du mot de passe (8 caractères minimum, 1 majuscule, 1 chiffre)
3. Protection contre les attaques XSS en échappant les entrées utilisateur

Objectif pédagogique : Gérer l'authentification JWT côté client (stockage, envoi, expiration).

Énoncé :
1. Après une "connexion" réussie, stockez le JWT reçu de manière sécurisée
2. Ajoutez le JWT aux en-têtes des requêtes suivantes
3. Implémentez une déconnexion qui supprime le token
4. Vérifiez l'expiration du token avant de l'utiliser

Objectif pédagogique : Gérer l'upload de fichiers avec suivi de progression et validation.

Énoncé :
1. Créez un formulaire d'upload acceptant uniquement les images (max 2MB)
2. Affichez la progression de l'upload
3. Prévisualisez l'image avant envoi
4. Affichez un message de succès/erreur