Un cookie est un fragment de données stocké dans le navigateur et utilisé pour conserver l'état ainsi que d'autres informations dont un site Web a besoin pour exécuter ses fonctionnalités.
Un cookie est un petit fichier que les sites Web stockent sur l'ordinateur de leurs utilisateurs. Les informations qu'il stocke transitent entre le navigateur et le site Web.
Chaque cookie est une paire clé-valeur associée à un certain nombre d'attributs qui contrôlent quand et où ce cookie est utilisé. Ces attributs servent à définir des dates d'expiration ou à indiquer que le cookie ne doit être envoyé que via HTTPS. Vous pouvez définir un cookie dans un en-tête HTTP ou via une interface JavaScript.
Les cookies constituent l’une des méthodes disponibles pour ajouter un état persistant aux sites Web. Au fil des ans, ses fonctionnalités se sont développées et ont évolué, mais la plate-forme s'est retrouvée confrontée à d'anciens problèmes problématiques. Pour résoudre ce problème, les navigateurs (y compris Chrome, Firefox et Edge) changent de comportement afin d'appliquer plus de paramètres par défaut protégeant la confidentialité.
Les cookies en action
Imaginons que vous possédiez un blog sur lequel vous souhaitez proposer un message promotionnel "Nouveautés" à vos utilisateurs. Les utilisateurs peuvent ignorer la promotion. Ils ne la verront plus pendant un certain temps. Vous pouvez stocker cette préférence dans un cookie, la définir pour qu'elle expire dans un mois (2 600 000 secondes) et ne l'envoyer que via HTTPS. Cet en-tête ressemblerait à ceci:
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
![Trois cookies envoyés à un navigateur depuis un serveur dans une réponse](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-1.png?authuser=5&hl=fr)
Set-Cookie
.
Lorsque votre lecteur consulte une page qui répond à ces exigences (qu'il utilise une connexion sécurisée et que le cookie a moins d'un mois), son navigateur envoie cet en-tête dans sa requête:
Cookie: promo_shown=1
![Trois cookies envoyés d'un navigateur à un serveur dans une requête](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-2.png?authuser=5&hl=fr)
Cookie
.
Vous pouvez également ajouter et lire les cookies disponibles sur ce site en JavaScript à l'aide de document.cookie
. Une attribution à document.cookie
entraîne la création ou le remplacement d'un cookie avec cette clé. Par exemple, vous pouvez essayer l'une des méthodes suivantes dans la console JavaScript de votre navigateur:
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
La lecture de document.cookie
renvoie tous les cookies accessibles dans le contexte actuel, chaque cookie étant séparé par un point-virgule:
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
![JavaScript accédant aux cookies dans le navigateur](https://web.dev/static/articles/understanding-cookies/image/javascript-accessing-cook-4ae4ebde94edc.png?authuser=5&hl=fr)
document.cookie
.
Si vous essayez cette fonctionnalité sur un certain nombre de sites populaires, vous remarquerez que la plupart d'entre eux définissent beaucoup plus que trois cookies. Dans la plupart des cas, ces cookies sont envoyés lors de chaque requête adressée à ce domaine, ce qui a plusieurs conséquences. La bande passante d'importation est souvent plus limitée que le téléchargement pour vos utilisateurs. Par conséquent, la surcharge de toutes les requêtes sortantes augmente le délai de latence du premier octet. Soyez prudent quant au nombre et à la taille des cookies que vous définissez. Utilisez l'attribut Max-Age
pour vous assurer que les cookies ne restent pas plus longtemps que nécessaire.
Que sont les cookies propriétaires et tiers ?
Si vous revenez à la même sélection de sites que vous consultiez auparavant, vous avez probablement remarqué que des cookies étaient présents pour différents domaines, et pas seulement pour celui que vous consultiez. Les cookies qui correspondent au domaine du site actuel, c'est-à-dire qui s'affiche dans la barre d'adresse du navigateur, sont appelés cookies propriétaires. De même, les cookies provenant de domaines autres que celui du site actuel sont appelés cookies tiers. Il ne s'agit pas d'un libellé absolu, mais il dépend du contexte de l'utilisateur. Le même cookie peut être propriétaire ou tiers selon le site sur lequel l'utilisateur se trouve à ce moment-là.
![Trois cookies envoyés à un navigateur à partir de différentes requêtes sur la même page](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-93367a53e4231.png?authuser=5&hl=fr)
Pour reprendre l'exemple ci-dessus, disons que l'un de vos articles de blog contient une photo d'un chat particulièrement étonnant et qu'il est hébergé sur /blog/img/amazing-cat.png
. Parce que c'est une image incroyable, une autre personne l'utilise directement sur son site. Si un visiteur a consulté votre blog et qu'il possède le cookie promo_shown
, lorsqu'il consulte amazing-cat.png
sur le site de l'autre personne, ce cookie est envoyé dans cette demande d'image. Cela n'est particulièrement utile pour personne, car promo_shown
n'est utilisé pour rien sur le site de cet utilisateur. Il ne fait qu'ajouter une surcharge à la requête.
S'il s'agit d'un effet imprévu, pourquoi ? Ce mécanisme permet aux sites de conserver l'état lorsqu'ils sont utilisés dans un contexte tiers. Par exemple, si vous intégrez une vidéo YouTube sur votre site, l'option "À regarder plus tard" s'affiche dans le lecteur. Si l'internaute est déjà connecté à YouTube, la session est rendue disponible dans le lecteur intégré par un cookie tiers. Ainsi, le bouton "À regarder plus tard" enregistre la vidéo d'un coup, sans l'inviter à se connecter ni à quitter votre page pour retourner sur YouTube.
![Le même cookie est envoyé dans trois contextes différents.](https://web.dev/static/articles/understanding-cookies/image/the-same-cookie-being-sen-8e25fd5cdbf86.png?authuser=5&hl=fr)
L'une des propriétés culturelles du Web est qu'il a tendance à être ouvert par défaut. Cela fait partie de ce qui a permis à tant de personnes de créer leurs propres contenus et applications sur cette plate-forme. Cependant, cela a également suscité un certain nombre de préoccupations en matière de sécurité et de confidentialité. Les attaques par falsification de requête intersites (CSRF) reposent sur le fait que les cookies sont associés à toute requête à une origine donnée, quelle que soit la personne à l'origine de la requête. Par exemple, si vous accédez à evil.example
, cela peut déclencher des requêtes vers your-blog.example
, et votre navigateur associe alors les cookies associés. Si votre blog ne fait pas attention à la manière dont il valide ces requêtes, evil.example
peut déclencher des actions telles que la suppression d'articles ou l'ajout de son propre contenu.
Les utilisateurs sont également de plus en plus conscients de la façon dont les cookies peuvent être utilisés pour suivre leur activité sur plusieurs sites. Toutefois, jusqu'à présent, il n'existait aucun moyen d'indiquer explicitement votre intent avec le cookie. Votre cookie promo_shown
ne doit être envoyé que dans un contexte propriétaire, tandis qu'un cookie de session pour un widget destiné à être intégré à d'autres sites est intentionnellement là pour fournir l'état de connexion dans un contexte tiers.
Vous pouvez indiquer explicitement votre intent avec un cookie en définissant l'attribut SameSite approprié.
Pour identifier vos cookies propriétaires et définir les attributs appropriés, consultez Recettes de cookies propriétaires.