Les cookies sont des donnés stockées sous forme de petites chaîne de caractères directement dans le navigateur. Ils font parti du protocole HTTP, ils sont définis par la spécification RFC 6265.
Les cookies sont en général définis par le serveur web en utilisant l’entête HTTP Set-Cookie. Alors, le navigateur les ajoutent automatiquement à (presque) toutes les requêtes provenant du même domaine en utilisant l’entête HTTP Cookie.
L’un des cas d’utilisation les plus répandus est l’authentification :
- Une fois connecté, le serveur utilise l’entête HTTP
Set-Cookiedans la réponse pour définir un cookie avec un “identifiant de session” unique. - La prochaine fois lorsque la requête est envoyée au même domaine, le navigateur envoie le cookie sur le réseau en utilisant l’entête HTTP
Cookie. - Alors le serveur sait qui a fait la requête.
Nous pouvons aussi accéder aux cookies depuis le navigateur, en utilisant la propriété document.cookie.
Il y a beaucoup de chose malignes à faire à propos des cookies et leurs options. Dans ce chapitre nous les couvrirons en détail.
Lire depuis document.cookie
Votre navigateur stocke t-il des cookies depuis ce site ? Voyons voir :
// Sur javascript.info, nous utilisons Google Analytics pour les statistiques,
// Donc il devrait y avoir quelques cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...La valeur de document.cookie consiste en des paires name=value, délimitées par ;. Chacune étant un cookie séparé.
Pour trouver un cookie en particulier, nous pouvons diviser document.cookie par ;, et donc trouver le bon nom. Nous pouvons utiliser soit une expression régulière (regex) ou des fonctions de tableau pour faire cela.
Nous laissons cela en tant qu’exercice pour le lecteur. Aussi, à la fin du chapitre vous trouverez des fonctions utilitaires pour manipuler les cookies.
Écrire dans document.cookie
Nous pouvons écrire dans document.cookie. Mais ce n’est pas une propriété de données, c’est un accesseur (getter/setter). Une affectation à ce dernier est traitée spécialement.
Une opération d’écriture dans document.cookie met à jour seulement les cookies mentionnés dedans, mais ne touche pas les autres cookies.
Par exemple, cet appel définit un cookie avec le nom user et la valeur John :
document.cookie = "user=John"; // Met à jour uniquement le cookie nommé 'user'
alert(document.cookie); // Affiche tous les cookiesSi vous exécutez cela, vous verrez probablement plusieurs cookies. Car l’opération document.cookie= ne réécrit pas tous les cookies. Elle définit uniquement le cookie user mentionné.
Techniquement, le nom et la valeur peuvent être n’importe quel caractère. Pour garder le formattage valide, ils devraient être échappés en utilisant la fonction integrée encodeURIComponent :
// Les caractères spéciaux ont besoin d'encodage
let name = "my name";
let value = "John Smith"
// Encode le cookie en tant que my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(document.cookie); // ...; my%20name=John%20SmithIl y a quelques limites :
- La paire
name=value, aprèsencodeURIComponent, ne peut pas excéder 4KB. Donc on ne peut pas stocker quelque chose de trop lourd sur un cookie. - Le nombre total de cookie par domaine est limité à ~ 20+, la limite exacte dépend du navigateur.
Les cookies ont plusieurs options, beaucoup d’entre elles sont importantes et devraient être définies.
Les options sont listées après key=value, délimité par ;, comme ceci :
document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"path
path=/mypath
Le préfix du chemin de l’URL doit être absolu. Ça rend le cookie accessible pour les pages du même chemin. Par défaut, il s’agit du chemin courant.
Si un cookie est défini avec path=/admin, il est visible aux pages /admin et /admin/something, mais pas à /home ou /adminpage.
Généralement, nous devons définir path à la racine path=/ pour rendre le cookie accessible depuis toutes les pages du site.
domain
domain=site.com
Un domaine définit par où le cookie est accessible. Cependant en pratique, il y a des limites. Nous ne pouvons pas définir n’importe quel domaine.
Il n’y a pas de moyen de laisser un cookie être accessible depuis un domaine de second niveau, donc other.com ne recevra jamais un cookie défini à site.com
Il s’agit d’une restriction de sécurité, pour nous permettre de stocker des données sensibles dans nos cookies qui ne seront disponibles que sur un site.
Par défaut, un cookie est accessible uniquement depuis le domaine qui l’a défini.
Veuillez noter, par défaut un cookie n’est pas partagé avec un sous-domaine, tel que