Travaux Pratiques : Protocole HTTP

1.1 Ouvrir les DevTools
Chrome/Firefox : F12 ou Ctrl+Shift+I → onglet Network. Cochez Preserve log.

1.2 Observer une requête simple
Naviguez vers https://httpbin.org/get. Cliquez sur la requête.

• Code de statut : 200 OK
• En-têtes de requête : User-Agent, Accept, Accept-Encoding, Host, etc.
• Content-Type de la réponse : application/json

1.3 Tester différentes méthodes (Console)

fetch('https://httpbin.org/get').then(r => r.json()).then(console.log);
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 Codes de statut
Tester :
https://httpbin.org/status/200 → code 200
https://httpbin.org/status/404 → code 404
https://httpbin.org/status/500 → code 500
https://httpbin.org/redirect/3 → redirige 3 fois avant d'arriver.

Tableau à compléter (exemple de réponses)

2.1 GET simple

curl https://httpbin.org/get
curl -i https://httpbin.org/get   # inclus les en-têtes
curl -v https://httpbin.org/get   # mode verbeux

2.2 POST avec données

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

2.3 En-têtes personnalisés

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

2.4 Suivre les redirections

curl https://httpbin.org/redirect/3      # s'arrête
curl -L https://httpbin.org/redirect/3    # suit les redirections

2.5 Télécharger un fichier

curl -o image.png https://httpbin.org/image/png
curl -O https://example.com/fichier.pdf

3.1 GET basique

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => console.log(users));

async function getUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await response.json();
  console.log(users);
}

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();
}
createPost({ title: 'Mon article', body: 'Contenu', 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;
}

4.1 Vérifier les en-têtes d'un site

curl -I https://google.com
curl -s -D - https://github.com -o /dev/null | grep -i "strict\|x-frame\|x-content\|content-security"

4.2 Security Headers : https://securityheaders.com

5.1 Observer le cache

curl -i https://httpbin.org/cache/60   # Cache-Control, ETag, Expires

5.2 Requête conditionnelle

curl -i https://httpbin.org/etag/test123
curl -i -H "If-None-Match: test123" https://httpbin.org/etag/test123   # retourne 304 Not Modified

5.3 Simulation navigateur : DevTools → Network, recharger (F5) vs rechargement forcé (Ctrl+Shift+R).

Exercice 1 – Client HTTP minimaliste

Formulaire complet avec URL, méthode, corps (body), affichage du statut, des en-têtes et du corps de la réponse.

Exercice 2 – Questions théoriques (réponses intégrées)