Passer au contenu principal

Qu'est-ce qu'un Cookie? 🍪

Lorsque vous accédez à un site web, vous voyez souvent le message "Acceptez-vous l'utilisation de cookies?". Je vais expliquer ce qu'est exactement un cookie et pourquoi il est nécessaire, de manière simple pour que même les débutants puissent comprendre!

Comparer les cookies à la vie quotidienne?​

Comparons les cookies à un reçu.

L'histoire du reçu de café ☕​

Première visite:
Client: "Un café américain s'il vous plaît"
Café: "Voici votre café et votre reçu"
      [Reçu: numéro client #123, menu préféré: café américain]

Visite suivante:
Client: [Montre le reçu]
Café: "Ah, client #123! Un café américain pour vous?"

Les cookies fonctionnent de la même façon!

Première visite:
Navigateur: "C'est ma première visite sur ce site"
Site web: "Voici un cookie"
         [Cookie: ID utilisateur, préférences, etc.]

Visite suivante:
Navigateur: [Montre le cookie]
Site web: "Ah, vous êtes de retour! Je maintiens votre connexion"

Cookie

  • Petit fichier texte que le site web stocke dans le navigateur
  • La façon dont le site web se "souvient" de vous
  • Taille: généralement moins de 4 Ko

Où sont stockés les cookies?​

Mon ordinateur/smartphone
└── Navigateur (Chrome, Safari, etc.)
    └── Stockage de cookies
        ├── Cookie google.com
        ├── Cookie lemonde.fr
        └── Cookie github.com

Ce que font les cookies​

1. Maintenir la connexion 🔐​

Sans cookie:

1. Connexion
2. Navigation vers une autre page
3. Déconnecté... 😭
4. Reconnexion
5. Navigation vers une autre page
6. Déconnecté à nouveau... 😭

Avec cookie:

1. Connexion
2. Informations de connexion sauvegardées dans le cookie
3. Connexion maintenue même en naviguant! ✅
4. Connexion maintenue même après fermeture du navigateur! ✅

2. Se souvenir du panier 🛒​

Sur un site e-commerce:
1. Ajouter le produit A au panier
2. Aller voir d'autres produits
3. Le produit A est toujours dans le panier! ✅

3. Paramètres personnalisés ⚙️​

Paramètres du site web:
- Langue: Français
- Thème: Mode sombre
- Taille du texte: Grande

→ Appliqué automatiquement à la prochaine visite! ✅

4. Suivi et publicité 📊​

Produits que vous avez vus:
- Chaussures A
- Sac B

→ Affichage de publicités liées sur d'autres sites

Les cookies sont stockés au format nom=valeur:

Nom: user_id
Valeur: 12345
Domaine: example.com
Chemin: /
Expiration: 2025-12-31
Sécurité: Secure, HttpOnly
session_id=abc123xyz; Domain=example.com; Path=/; Expires=Fri, 31 Dec 2025 23:59:59 GMT; Secure; HttpOnly

Types de cookies​

1. Cookie de session (Session Cookie) 🕐​

Cookie supprimé à la fermeture du navigateur

Cycle de vie: Uniquement pendant l'exécution du navigateur
Usage: Connexion temporaire, panier
Caractéristique: Pas de date d'expiration

Exemple:

Ouvrir navigateur → Shopping → Fermer navigateur → Panier vidé

2. Cookie persistant (Persistent Cookie) 📅​

Cookie maintenu jusqu'à une date spécifiée

Cycle de vie: Jusqu'à expiration ou suppression manuelle
Usage: "Rester connecté", paramètres personnalisés
Caractéristique: Date d'expiration spécifiée

Exemple:

Cocher "Rester connecté"
→ Connexion automatique pendant 30 jours ✅

3. Cookie first-party 🏠​

Cookie créé directement par le site web visité

Visite de example.com
→ Cookie défini par example.com
→ Utilisé uniquement sur example.com

Utilisations:

  • Maintenir la connexion
  • Panier
  • Paramètres du site

Cookie créé par un autre site web (principalement pour la publicité)

Visite de example.com
→ Exécution d'un script publicitaire sur la page
→ ads.com définit un cookie
→ Vous suit sur plusieurs sites

Utilisations:

  • Suivi publicitaire
  • Analyse du comportement utilisateur
  • Publicité personnalisée
Avertissement

Les cookies third-party sont progressivement bloqués en raison de problèmes de confidentialité! Chrome, Safari, etc. bloquent les cookies third-party.

Processus de fonctionnement des cookies​

Navigateur → Requête au site web
Site web → Réponse + envoi du cookie

Réponse HTTP:
Set-Cookie: user_id=12345; Expires=...
Le navigateur stocke le cookie dans son espace de stockage
Navigateur → Nouvelle requête au site web + envoi du cookie

Requête HTTP:
Cookie: user_id=12345
Le site web lit le cookie et identifie l'utilisateur
→ "Ah, c'est l'utilisateur 12345!"

Attributs des cookies​

Domain (Domaine)​

Le cookie example.com
est utilisé uniquement sur example.com

Path (Chemin)​

Path=/shop
→ Cookie envoyé uniquement sur le chemin /shop

Expires/Max-Age (Expiration)​

Expires=2025-12-31
→ Maintenu jusqu'à cette date

Max-Age=3600
→ Supprimé après 3600 secondes (1 heure)

Secure (Sécurité)​

Drapeau Secure
→ Cookie envoyé uniquement sur HTTPS
Pas envoyé sur HTTP

HttpOnly​

Drapeau HttpOnly
→ Inaccessible via JavaScript
Défense contre les attaques XSS

SameSite​

SameSite=Strict
→ Cookie envoyé uniquement sur le même site
Défense contre les attaques CSRF

Avantages des cookies​

✅ Amélioration de l'expérience utilisateur​

  • Maintien de la connexion
  • Contenu personnalisé
  • Shopping pratique

✅ Maintien de l'état​

  • HTTP est sans état (Stateless)
  • Cookies permettent de maintenir l'état

✅ Implémentation simple​

  • Facile à utiliser côté serveur et client
  • Presque aucune configuration supplémentaire nécessaire

Inconvénients des cookies​

❌ Risques de sécurité​

  • Possibilité de vol (attaques XSS, CSRF)
  • Inapproprié pour stocker des informations sensibles

❌ Problèmes de confidentialité​

  • Suivi des utilisateurs possible
  • Suivi publicitaire via cookies third-party

❌ Limitation de taille​

  • Limitation de 4 Ko par cookie
  • Limitation du nombre de cookies par domaine (généralement 20~50)

❌ Envoyé à chaque requête​

  • Cookie inclus dans toutes les requêtes HTTP
  • Augmentation du trafic
CaractéristiqueCookieLocal StorageSession Storage
Taille4 Ko5-10 Mo5-10 Mo
Cycle de vieExpiration définiePermanentSupprimé à la fermeture de l'onglet
Envoi serveur✅ À chaque fois❌ Non envoyé❌ Non envoyé
AccèsServeur/JSJS uniquementJS uniquement
UsageAuthentification, suiviDonnées volumineusesDonnées temporaires

Quand utiliser quoi?​

Cookie: Jeton de connexion, informations que le serveur doit connaître
Local Storage: Paramètres utilisateur, données hors ligne
Session Storage: Données de formulaire temporaires, informations à usage unique

Sécurité des cookies​

1. Utiliser le drapeau Secure 🔒​

Set-Cookie: token=abc; Secure
→ Envoyé uniquement sur HTTPS

2. Utiliser le drapeau HttpOnly 🛡️​

Set-Cookie: session=xyz; HttpOnly
→ Bloquer l'accès JavaScript
→ Défense contre les attaques XSS

3. Utiliser le drapeau SameSite 🚫​

Set-Cookie: id=123; SameSite=Strict
→ Défense contre les attaques CSRF

4. Interdire le stockage d'informations sensibles ⚠️​

❌ Mots de passe
❌ Numéros de carte de crédit
❌ Numéro de sécurité sociale

✅ ID de session (jeton crypté)
✅ Paramètres utilisateur

Gestion des cookies​

Voir les cookies dans le navigateur​

Chrome:

Paramètres → Confidentialité et sécurité → Cookies et autres données de site
→ Voir tous les cookies et données de site

Outils de développement:

F12 → Onglet Application → Storage → Cookies

Supprimer les cookies​

1. Supprimer uniquement les cookies d'un site spécifique
2. Supprimer tous les cookies
3. Paramétrer la suppression automatique des cookies (à la fermeture du navigateur)

Manipuler les cookies avec JavaScript​

Définir un cookie:

document.cookie = "username=Jean Dupont; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Lire un cookie:

console.log(document.cookie);
// "username=Jean Dupont; theme=dark; ..."

Supprimer un cookie:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Exemples d'utilisation réelle​

Exemple 1: Maintenir la connexion 🔐​

// Lors de la connexion réussie
Set-Cookie: auth_token=eyJhbGc...;
            Expires=Mon, 31 Jan 2025 23:59:59 GMT;
            Secure;
            HttpOnly;
            SameSite=Strict

// À chaque requête suivante automatiquement:
Cookie: auth_token=eyJhbGc...

Exemple 2: Paramètres de thème 🎨​

// L'utilisateur sélectionne le mode sombre
document.cookie = "theme=dark; max-age=31536000; path=/";

// Au chargement de la page
if (document.cookie.includes("theme=dark")) {
  enableDarkMode();
}

Exemple 3: Paramètres de langue 🌏​

// Sélection de la langue
Set-Cookie: lang=fr; Max-Age=31536000; Path=/

// Le serveur lit le cookie et fournit du contenu en français

Pourquoi demander le consentement aux cookies?​

RGPD (Règlement général sur la protection des données):

Les sites web doivent obtenir
le consentement de l'utilisateur avant d'utiliser des cookies

Cookies essentiels vs cookies optionnels:

Essentiels: Connexion, panier (consentement non requis)
Optionnels: Suivi publicitaire, analyse (consentement requis)

Questions fréquemment posées (FAQ)​

Q1: Que se passe-t-il si je bloque les cookies?​

R: De nombreux sites web ne fonctionneront pas correctement.

  • Impossible de se connecter
  • Impossible d'utiliser le panier
  • Paramètres non sauvegardés

Q2: Les cookies sont-ils sûrs?​

R: Oui, s'ils sont utilisés correctement.

  • Utiliser les drapeaux Secure, HttpOnly
  • Ne pas stocker d'informations sensibles
  • Utiliser HTTPS

Q3: Peut-on être infecté par un virus via les cookies?​

R: Non! Les cookies sont de simples fichiers texte.

  • Ne peut pas exécuter de code
  • Ne peut pas contenir de virus

Q4: Faut-il supprimer fréquemment les cookies?​

R: C'est un choix personnel.

  • Avantage: Amélioration de la confidentialité
  • Inconvénient: Déconnexion, réinitialisation des paramètres

Q5: Les cookies en mode navigation privée?​

R: Utilisés temporairement.

  • Tout supprimé à la fermeture de la fenêtre privée
  • Amélioration de la prévention du suivi

L'avenir des cookies​

1. Abandon des cookies third-party​

Chrome, Safari, etc. bloquent les cookies third-party
→ Les entreprises publicitaires recherchent des alternatives

2. Technologies alternatives​

- Privacy Sandbox (Google)
- FLoC (Federated Learning of Cohorts)
- Nouvelles normes avec protection renforcée de la vie privée

Prochaines étapes 🚀​

Si vous avez compris les cookies:

  1. ✅ Qu'est-ce que le Cache? - Une autre façon de charger rapidement les données
  2. ✅ Qu'est-ce qu'un VPN? - Protection de la confidentialité en ligne
  3. ✅ Comprendre les requêtes/réponses HTTP - Comment les cookies sont envoyés

Conclusion​

Les cookies sont la façon dont les sites web se souviennent de vous! 🍪

Points à retenir:

  • Cookie = Petit fichier texte
  • Stocké dans le navigateur
  • Maintien de connexion, panier, sauvegarde des paramètres
  • Attention à la sécurité (utiliser Secure, HttpOnly)
  • Les cookies third-party sont pour le suivi (peuvent être bloqués)

Grâce aux cookies, nous pouvons utiliser le web de manière pratique, mais il faut aussi faire attention à la confidentialité! 🔐