Le protocole HTTP ne se souvient de rien : chaque requête arrive comme si elle était la première. Le cookie a été inventé pour combler ce trou, et il porte toujours la connexion de la plupart des sites.
Son interface en JavaScript n'a jamais été modernisée. Elle se résume à une propriété unique, qui se lit et s'écrit d'une manière franchement inhabituelle.
Définition
Un cookie est une petite valeur nommée que le navigateur conserve pour un domaine et renvoie automatiquement dans l'en-tête de chaque requête vers ce domaine. Côté page, document.cookie donne accès à ceux qui ne sont pas réservés au serveur.
document.cookie = "theme=sombre; Max-Age=31536000; Path=/; SameSite=Lax";
console.log(document.cookie);
// "consentement=1; theme=sombre"
const lus = Object.fromEntries(
document.cookie.split("; ").map((paire) => {
const i = paire.indexOf("=");
return [paire.slice(0, i), paire.slice(i + 1)];
})
);
console.log(lus.theme); // "sombre"La lecture rend une seule chaîne, sans les attributs, et l'écriture n'ajoute qu'un cookie à la fois : affecter la propriété n'écrase donc pas les autres. Une valeur contenant un point-virgule ou un espace doit passer par encodeURIComponent.
Les attributs qui comptent
Tout ce qui suit le premier point-virgule règle le comportement du cookie. Le tableau les présente sur deux colonnes : l'attribut et ce qu'il change.
| Attribut | Ce qu'il change |
|---|---|
Max-Age, Expires | La durée de vie. Sans eux, le cookie meurt à la fermeture du navigateur |
Path | Les chemins du site qui recevront le cookie |
Domain | L'extension de l'envoi aux sous-domaines |
Secure | L'envoi réservé aux connexions chiffrées |
SameSite | L'envoi lors d'une arrivée depuis un autre site |
HttpOnly | L'invisibilité totale pour les scripts de la page |
Supprimer un cookie consiste à le réécrire avec une durée nulle, en répétant le même Path et le même Domain : document.cookie = "theme=; Max-Age=0; Path=/". Un chemin différent laisse l'ancien cookie en place.
Le dernier attribut du tableau est celui qui protège une session. Un cookie HttpOnly ne peut être posé que par le serveur, et aucun script ne peut le lire, même injecté par une faille. D'où l'écart avec un jeton rangé dans localStorage.
Le coût de chaque cookie
Contrairement aux autres espaces de stockage du navigateur, un cookie voyage : il part avec chaque requête vers son domaine, images comprises. C'est un mauvais endroit pour des données volumineuses.
- Environ quatre kilooctets par cookie, attributs compris.
- Une limite par domaine sur le nombre de cookies conservés.
- Un aller-retour permanent : cent octets inutiles, multipliés par chaque requête.
Questions fréquentes
Pourquoi mon cookie n'apparaît-il pas dans document.cookie ?
Trois causes couvrent presque tous les cas. Le cookie porte l'attribut HttpOnly, et il est alors invisible par conception. Son Path ou son Domain ne correspondent pas à la page en cours. Ou il est marqué Secure alors que la page est servie sans chiffrement.
Cookie ou localStorage ?
La question se tranche sur un seul critère : le serveur a-t-il besoin de la valeur ? Si oui, le cookie s'impose, puisqu'il part tout seul dans chaque requête. Sinon, localStorage évite d'alourdir le trafic et offre bien plus de place.
Un bandeau de consentement est-il obligatoire ?
Pas pour tous les cookies. Les règles européennes exemptent ceux qui sont strictement nécessaires au service demandé, comme le maintien d'une connexion ou le contenu d'un panier. La mesure d'audience et la publicité, en revanche, demandent un consentement recueilli avant le dépôt du cookie.