Chapitre 6 : Le Protocole HTTP - Travaux Pratiques

TP 1 : Exploration avec les DevTools

Objectifs

• Analyser les requêtes/réponses HTTP
• Comprendre les headers
• Observer les codes de statut

Étapes

1.1 Ouvrir les DevTools

1. Ouvrez Chrome ou Firefox
2. Appuyez sur F12 ou Ctrl+Shift+I
3. Allez dans l'onglet Network (Réseau)

1.2 Observer une requête simple

1. Cochez "Preserve log" pour garder l'historique
2. Naviguez vers https://httpbin.org/get
3. Cliquez sur la requête dans la liste

Questions :

• Quel est le code de statut ?
• Quels headers de requête sont envoyés ?
• Quel est le Content-Type de la réponse ?

1.3 Tester différentes méthodes

Utilisez l'onglet Console pour envoyer des requêtes :

// GET fetch('https://httpbin.org/get') .then(r => r.json()) .then(console.log); // POST fetch('https://httpbin.org/post', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name: 'John', age: 30}) }) .then(r => r.json()) .then(console.log);

1.4 Observer les codes de statut

Testez ces URLs et notez les codes :

• https://httpbin.org/status/200
• https://httpbin.org/status/404
• https://httpbin.org/status/500
• https://httpbin.org/redirect/3

Exercice

Remplissez le tableau :

TP 2 : Maîtrise de cURL

Objectifs

• Utiliser cURL en ligne de commande
• Comprendre les options principales
• Envoyer différents types de requêtes

Prérequis

• Terminal (Linux/macOS) ou Git Bash (Windows)
• cURL installé (curl --version)

Exercices

2.1 Requête GET simple

# Requête basique curl https://httpbin.org/get # Avec headers de réponse curl -i https://httpbin.org/get # Mode verbose (debug) curl -v https://httpbin.org/get

Question : Quelle est la différence entre -i et -v ?

2.2 Requête POST avec données

# Form data curl -X POST -d "name=John&email=john@example.com" \ https://httpbin.org/post # JSON curl -X POST \ -H "Content-Type: application/json" \ -d '{"name": "John", "email": "john@example.com"}' \ https://httpbin.org/post

2.3 Headers personnalisés

# Ajouter des headers curl -H "Authorization: Bearer mon-token-secret" \ -H "Accept: application/json" \ https://httpbin.org/headers

2.4 Suivre les redirections

# Sans -L (s'arrête à la redirection) curl https://httpbin.org/redirect/3 # Avec -L (suit les redirections) curl -L https://httpbin.org/redirect/3

2.5 Télécharger un fichier

# Sauvegarder la sortie curl -o image.png https://httpbin.org/image/png # Garder le nom original curl -O https://example.com/fichier.pdf

Exercice avancé

Écrivez une commande cURL qui :

1. Envoie une requête POST à https://httpbin.org/post
2. Avec le header Content-Type: application/json
3. Avec le header X-Custom-Header: MonHeader
4. Avec le body {"action": "test", "value": 42}
5. Affiche les headers de réponse

TP 3 : API REST avec JavaScript

Objectifs

• Utiliser l'API Fetch
• Gérer les promesses et async/await
• Traiter les erreurs HTTP

Étapes

3.1 GET basique

// Avec .then() fetch('https://jsonplaceholder.typicode.com/users') .then(response => response.json()) .then(users => console.log(users)) .catch(error => console.error('Erreur:', error)); // Avec async/await async function getUsers() { try { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const users = await response.json(); console.log(users); } catch (error) { console.error('Erreur:', error); } }

3.2 POST - Créer une ressource

async function createPost(data) { const response = await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } return response.json(); } // Utilisation createPost({ title: 'Mon article', body: 'Contenu de l\'article', userId: 1 }).then(console.log);

3.3 PUT - Modifier une ressource

async function updatePost(id, data) { const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); return response.json(); }

3.4 DELETE - Supprimer une ressource

async function deletePost(id) { const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { method: 'DELETE' }); return response.ok; }

Exercice pratique

Créez une fonction fetchWithRetry(url, options, maxRetries) qui :

1. Effectue une requête HTTP
2. En cas d'erreur 5xx, réessaie jusqu'à maxRetries fois
3. Attend 1 seconde entre chaque tentative
4. Retourne la réponse ou lève une erreur

TP 4 : Analyse des Headers de Sécurité

Objectifs

• Comprendre les headers de sécurité
• Analyser la configuration d'un site
• Identifier les améliorations possibles

Étapes

4.1 Vérifier les headers d'un site

# Voir tous les headers curl -I https://google.com # Headers importants à chercher curl -s -D - https://github.com -o /dev/null | grep -i "strict\|x-frame\|x-content\|content-security"

4.2 Analyser avec Security Headers

1. Allez sur https://securityheaders.com
2. Entrez l'URL d'un site (ex: github.com)
3. Analysez le rapport

Headers à vérifier

Exercice

Analysez 3 sites de votre choix et remplissez le tableau :

TP 5 : Cache HTTP

Objectifs

• Comprendre le fonctionnement du cache
• Observer les headers de cache
• Tester la validation avec ETag

Étapes

5.1 Observer le cache

# Première requête curl -i https://httpbin.org/cache/60 # Vérifier les headers # Cache-Control, ETag, Expires

5.2 Requête conditionnelle

# Obtenir l'ETag curl -i https://httpbin.org/etag/test123 # Requête avec If-None-Match curl -i -H "If-None-Match: test123" https://httpbin.org/etag/test123 # Devrait retourner 304 Not Modified

5.3 Simulation de cache dans le navigateur

1. Ouvrez DevTools > Network
2. Chargez une page avec des images
3. Rechargez (F5) et observez "(from cache)"
4. Rechargez avec Ctrl+Shift+R (ignorer le cache)

Exercice

Créez une page HTML avec :

• Une image
• Un fichier CSS
• Un fichier JS

Configurez les headers de cache appropriés pour chaque type de fichier.

Exercices Récapitulatifs

Exercice 1 : Client HTTP minimaliste

Créez un script JavaScript qui :

1. Affiche un formulaire avec URL, méthode, body
2. Envoie la requête
3. Affiche le statut, headers et corps de la réponse

Exercice 2 : Questions théoriques

1. Quelle est la différence entre no-cache et no-store ?
2. Pourquoi POST n'est-il pas idempotent ?
3. Que se passe-t-il si le serveur renvoie un code 301 ?
4. À quoi sert le header Origin ?
5. Pourquoi utiliser HttpOnly sur les cookies de session ?