Comprendre les cookies

Un cookie est un bloc de données stocké dans le navigateur qui permet de conserver l'état et 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 la machine de leurs utilisateurs. Les informations qu'il contient sont transmises 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 permettent de définir des éléments tels que les dates d'expiration ou d'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 sont l'une des méthodes disponibles pour ajouter un état persistant aux sites Web. Au fil des ans, leurs capacités ont augmenté et évolué, mais la plate-forme a hérité de problèmes hérités. Pour résoudre ce problème, les navigateurs (y compris Chrome, Firefox et Edge) modifient leur comportement afin d'appliquer des paramètres par défaut plus respectueux de la confidentialité.

Cookies en action

Supposons que vous ayez un blog sur lequel vous souhaitez afficher une promotion "Nouveautés" à vos utilisateurs. Les utilisateurs peuvent fermer la promotion et ne la verront plus pendant un certain temps. Vous pouvez stocker cette préférence dans un cookie, le définir pour qu'il expire dans un mois (2 600 000 secondes) et ne l'envoyer que via HTTPS. L'en-tête se présente comme suit :

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
Trois cookies envoyés à un navigateur depuis un serveur dans une réponse
Les serveurs définissent les cookies à l'aide de l'en-tête Set-Cookie.

Lorsque votre lecteur consulte une page qui répond à ces exigences (il est sur une connexion sécurisée et le cookie date de 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
Votre navigateur renvoie les cookies dans l'en-tête Cookie.

Vous pouvez également ajouter et lire les cookies disponibles sur ce site en JavaScript à l'aide de document.cookie. L'attribution à document.cookie crée ou remplace un cookie avec cette clé. Par exemple, vous pouvez essayer ce qui suit 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 génère 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
JavaScript peut accéder aux cookies à l'aide de document.cookie.

Si vous essayez cette méthode sur une sélection de sites populaires, vous remarquerez que la plupart d'entre eux définissent bien plus de trois cookies. Dans la plupart des cas, ces cookies sont envoyés à chaque requête adressée à ce domaine, ce qui a plusieurs implications. La bande passante de mise en ligne est souvent plus limitée que celle de téléchargement pour vos utilisateurs. Par conséquent, cette surcharge sur toutes les requêtes sortantes ajoute un délai à votre délai de transmission 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 les cookies tiers ?

Si vous revenez à la même sélection de sites que vous avez consultée précédemment, vous avez probablement remarqué que des cookies étaient présents pour différents domaines, et pas seulement celui que vous visitiez actuellement. Les cookies qui correspondent au domaine du site actuel, c'est-à-dire ce 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 le site actuel sont appelés cookies tiers. Il ne s'agit pas d'une étiquette absolue, mais relative au 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
Les cookies peuvent provenir de différents domaines sur une même page.

Pour reprendre l'exemple précédent, supposons que l'un de vos articles de blog contienne une photo d'un chat particulièrement incroyable, hébergée sur /blog/img/amazing-cat.png. Comme il s'agit d'une image incroyable, une autre personne l'utilise directement sur son site. Si un visiteur a consulté votre blog et possède le cookie promo_shown, lorsqu'il consulte amazing-cat.png sur le site de l'autre personne, ce cookie sera envoyé dans la requête de l'image. Cela n'est particulièrement utile à personne, car promo_shown n'est utilisé pour rien sur le site de cette autre personne. Il ne fait qu'ajouter une surcharge à la requête.

Si c'est un effet indésirable, pourquoi procéder ainsi ? C'est ce mécanisme qui permet aux sites de conserver leur état lorsqu'ils sont utilisés dans un contexte tiers. Par exemple, si vous intégrez une vidéo YouTube sur votre site, les visiteurs verront une option "À regarder plus tard" dans le lecteur. Si votre visiteur est déjà connecté à YouTube, cette session est mise à disposition dans le lecteur intégré par un cookie tiers. Cela signifie que le bouton "À regarder plus tard" enregistre la vidéo en une seule fois au lieu de l'inviter à se connecter ou de le rediriger vers votre page et vers YouTube.

Le même cookie envoyé dans trois contextes différents
Un cookie dans un contexte tiers est envoyé lors de la visite de différentes pages.

L'une des propriétés culturelles du Web est qu'il a tendance à être ouvert par défaut. C'est en partie ce qui a permis à tant de personnes de créer leur propre contenu et leurs propres applications. Toutefois, cela a également entraîné un certain nombre de problèmes de sécurité et de confidentialité. Les attaques de falsification de requêtes intersites (CSRF) reposent sur le fait que les cookies sont associés à toute requête adressée à une origine donnée, quel que soit l'initiateur de la requête. Par exemple, si vous consultez evil.example, cela peut déclencher des requêtes vers your-blog.example, et votre navigateur associera les cookies correspondants. Si votre blog ne fait pas attention à la façon dont il valide ces requêtes, evil.example peut déclencher des actions telles que la suppression de posts 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 intention 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é sur d'autres sites est intentionnellement présent pour fournir l'état de connexion dans un contexte tiers.

Vous pouvez indiquer explicitement votre intention 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.