Découvrez comment fonctionnent les cookies HTTP

Les cookies sont une partie fondamentale du Web, car ils permettent des sessions et en général de reconnaître les utilisateurs pendant la navigation

introduction

En utilisant des cookies, nous pouvons échanger des informations entre le serveur et le navigateur pour fournir un moyen de personnaliser une session utilisateur et pour que les serveurs reconnaissent l'utilisateur entre les demandes.

HTTP est sans état, ce qui signifie que toutes les origines des demandes vers un serveur sont exactement les mêmes et qu'un serveur ne peut pas déterminer si une demande provient d'un client qui a déjà fait une demande auparavant, ou si c'est une nouvelle.

Les cookies sont envoyés par le navigateur au serveur lors du démarrage d'une requête HTTP, et ils sont renvoyés par le serveur, qui peut modifier leur contenu.

Les cookies sont essentiellement utilisés pour stocker un identifiant de session.

Dans le passé, les cookies étaient utilisés pour stocker différents types de données, car il n'y avait pas d'alternative. Mais de nos jours avec leAPI de stockage Web(Stockage local et stockage de session) etIndexedDB, nous avons de bien meilleures alternatives.

Surtout parce que les cookies ont une limite très faible dans les données qu'ils peuvent contenir, car ils sont envoyés dans les deux sens pour chaque requête HTTP à notre serveur - y compris les demandes d'actifs tels que des images ou CSS /JavaScriptdes dossiers.

Les cookies ont une longue histoire, ils ont eu leur première version en 1994 et au fil du temps, ils ont été standardisés dans de multiples révisions RFC.

RFC signifie Request for Comments, la façon dont les normes sont définies par l'Internet Engineering Task Force (IETF), l'entité responsable de la définition des normes pour Internet.

La dernière spécification des cookies est définie dans leRFC 6265, which is dated 2011.

Restrictions des cookies

  • Les cookies ne peuvent stocker que4 Ko de données
  • Les cookies sontprivé au domaine. Un site ne peut lire que les cookies qu'il a définis, pas les cookies d'autres domaines
  • Vous pouvez avoir jusqu'à 20 limites de cookies par domaine (mais le nombre exact dépend de l'implémentation spécifique du navigateur)
  • Les cookies sont limités dans leur nombre total (mais le nombre exact dépend de l'implémentation spécifique du navigateur). Si ce nombre est dépassé, de nouveaux cookies remplacent les plus anciens.

Les cookies peuvent être définis ou lus côté serveur ou côté client.

Côté client, les cookies sont exposés par leobjet de documentcommedocument.cookie

Définir les cookies

L'exemple le plus simple pour définir un cookie est:

document.cookie = 'name=Flavio'

Cela ajoutera un nouveau cookie aux cookies existants (il n'écrasera pas les cookies existants)

La valeur du cookie doit être encodée avec une URLencodeURIComponent(), pour vous assurer qu'il ne contient aucun espace, virgule ou point-virgule non valide dans les valeurs des cookies.

Si vous ne définissez rien d'autre, le cookie expirera lorsque le navigateur sera fermé. Pour éviter cela, ajoutez une date d'expiration, exprimée au format UTC (Mon, 26 Mar 2018 17:04:05 UTC)

document.cookie = 'name=Flavio; expires=Mon, 26 Mar 2018 17:04:05 UTC'

Un simple extrait de code JavaScript pour définir un cookie qui expire dans 24 heures est:

const date = new Date()
date.setHours(date.getHours() + 24)
document.cookie = 'name=Flavio; expires=' + date.toUTCString()

Vous pouvez également utiliser lemax-ageparamètre pour définir une expiration exprimée en nombre de secondes:

document.cookie = 'name=Flavio; max-age=3600' //expires in 60 minutes
document.cookie = 'name=Flavio; max-age=31536000' //expires in 1 year

LepathLe paramètre spécifie un emplacement de document pour le cookie, il est donc affecté à un chemin spécifique et envoyé au serveur uniquement si le chemin correspond à l'emplacement actuel du document ou à un parent:

document.cookie = 'name=Flavio; path=/dashboard'

ce cookie est envoyé le/dashboard,/dashboard/todayet autres sous-URL de/dashboard/, mais pas sur/postspar exemple.

Si vous ne définissez pas de chemin, il utilise par défaut l'emplacement actuel du document. Cela signifie que pour appliquer un cookie global à partir d'une page interne, vous devez spécifierpath=/.

Ledomainpeut être utilisé pour spécifier un sous-domaine pour votre cookie.

document.cookie = 'name=Flavio; domain=mysite.com;'

S'il n'est pas défini, il est défini par défaut sur la partie hôte, même si vous utilisez un sous-domaine (s'il se trouve sur subdomain.mydomain.com, par défaut, il est défini sur mydomain.com). Les cookies de domaine sont inclus dans les sous-domaines.

Secure

Ajout duSecureLe paramètre garantit que le cookie ne peut être transmis que de manière sécurisée via HTTPS et qu'il ne sera pas envoyé via des connexions HTTP non chiffrées:

document.cookie = 'name=Flavio; Secure;'

Notez que cela ne sécurise en aucun cas les cookies - évitez toujours d'ajouter des informations sensibles aux cookies

HttpOnly

Un paramètre utile estHttpOnly, ce qui rend les cookies inaccessibles via ledocument.cookieAPI, ils ne sont donc modifiables que par le serveur:

document.cookie = 'name=Flavio; Secure; HttpOnly'

SameSite

SameSite, malheureusement toujours pas pris en charge par tous les navigateurs (mais beaucoup le font!https://caniuse.com/#feat=same-site-cookie-attribute, permet aux serveurs d'exiger qu'un cookie ne soit pas envoyé sur les demandes intersites, mais uniquement sur les ressources dont l'origine est le domaine du cookie, ce qui devrait être d'une grande aide pour réduire le risque d'attaques CSRF (Cross Site Request Forgery).

Pour mettre à jour la valeur d'un cookie, attribuez simplement une nouvelle valeur au nom du cookie:

document.cookie = 'name=Flavio2'

Similaire à la mise à jour de la valeur, pour mettre à jour la date d'expiration, réaffectez la valeur avec un nouveauexpiresoumax-agebiens:

document.cookie = 'name=Flavio; max-age=31536000' //expires in 1 year

N'oubliez pas d'ajouter également tous les paramètres supplémentaires que vous avez ajoutés en premier lieu, commepathoudomain.

Pour supprimer un cookie, désactivez sa valeur et passez une date dans le passé:

document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC;'

(et encore une fois, avec tous les paramètres que vous avez utilisés pour le définir)

Accéder aux valeurs des cookies

Pour accéder à un cookie, recherchezdocument.cookie:

const cookies = document.cookie

Cela renverra une chaîne avec tous les cookies définis pour la page, séparés par des points-virgules:

'name1=Flavio1; name2=Flavio2; name3=Flavio3'
//ES5
if (
  document.cookie.split(';').filter(item => {
    return item.indexOf('name=') >= 0
  }).length
) {
  //name exists
}

//ES2016 if ( document.cookie.split(’;’).filter(item => { return item.includes(‘name=’) }).length ) { //name exists }

Bibliothèques d'abstractions

Il existe un certain nombre de bibliothèques différentes qui fourniront une API plus conviviale pour gérer les cookies. L'un d'eux esthttps://github.com/js-cookie/js-cookie, qui prend en charge jusqu'à IE7, et a beaucoup d'étoiles sur GitHub (ce qui est toujours bon).

Quelques exemples de son utilisation:

Cookies.set('name', 'value')
Cookies.set('name', 'value', {
  expires: 7,
  path: '',
  domain: 'subdomain.site.com',
  secure: true
})

Cookies.get(‘name’) // => ‘value’ Cookies.remove(‘name’)

//JSON Cookies.set(‘name’, { name: ‘Flavio’ }) Cookies.getJSON(‘name’) // => { name: ‘Flavio’ }

Utiliser cela ou l'API native des cookies?

Tout se résume à ajouter plus de kilo-octets à télécharger pour chaque utilisateur, c'est donc votre choix.

Utiliser des cookies côté serveur

Chaque environnement utilisé pour créer un serveur HTTP vous permet d'interagir avec les cookies, car les cookies sont un pilier du Web moderne et il n'y a pas grand-chose qui pourrait être construit sans eux.

PHP a $ _COOKIE Go a des installations de cookies dans lenet/httpbibliothèque standard

etc.

Faisons un exemple avec Node.js

Lorsque vous utilisez Express.js, vous pouvez créer des cookies en utilisant leres.cookieAPI:

res.cookie('name1', '1Flavio', {
  domain: '.example.com',
  path: '/admin',
  secure: true
})
res.cookie('name2', 'Flavio2', {
  expires: new Date(Date.now() + 900000),
  httpOnly: true
})
res.cookie('name3', 'Flavio3', { maxAge: 900000, httpOnly: true })

//takes care of serializing JSON res.cookie(‘name4’, { items: [1, 2, 3] }, { maxAge: 900000 })

Pour analyser les cookies, un bon choix est d'utiliser lehttps://github.com/expressjs/cookie-parsermiddleware. Chaque objet Request aura des informations sur les cookies dans lereq.cookiebiens:

req.cookies.name //Flavio
req.cookies.name1 //Flavio1

Si vous créez vos cookies en utilisantsigned: true:

res.cookie('name5', 'Flavio5', { signed: true })

ils seront disponibles dans lereq.signedCookiesobjet à la place. Les cookies signés sont protégés contre les modifications du client. La signature utilisée pour signer une valeur de cookie garantit que vous pouvez savoir, côté serveur, si le client l'a modifiée.

https://github.com/expressjs/sessionethttps://github.com/expressjs/cookie-sessionsont deux options de middleware différentes pour créer une authentification basée sur les cookies, laquelle à utiliser dépend de vos besoins.

Inspectez les cookies avec les outils de développement du navigateur

Tous les navigateurs de leurDevToolsfournir une interface pour inspecter et modifier les cookies.

Chrome

Chrome devtools cookies

Firefox

Firefox devtools cookies

Safari

Safari devtools cookies

Alternatives aux cookies

Les cookies sont-ils le seul moyen de créer une authentification et des sessions sur le Web?

Non! Il existe une technologie qui est récemment devenue populaire, appeléeJetons Web JSON(JWT), qui est unAuthentification basée sur les jetons.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: