5.1 Propriétés principales des cookies
Les cookies sont de petits fragments de données que les sites web peuvent stocker côté client (dans le navigateur de l'utilisateur). Ils sont apparus 20 ans avant le localStorage et ont aidé pendant tout ce temps à remplir leurs fonctions. Même aujourd'hui, ils sont souvent utilisés pour sauvegarder des informations sur l'état de la session, les préférences de l'utilisateur, le suivi et d'autres tâches.
Principales propriétés des cookies :
- Nom et valeur (name=value): paire clé-valeur qui stocke les données.
- Domaine et chemin (domain, path): définissent à quelles URLs et domaines les cookies s'appliquent.
- Durée de vie (expires, max-age): définit quand le cookie expire et est supprimé.
- Sécurité (secure, HttpOnly): indique comment et quand les cookies peuvent être transmis.
Installer un cookie
Les cookies peuvent être installés avec JavaScript ou du code serveur. En JavaScript, on utilise la propriété document.cookie pour cela.
Exemple d'installation de cookie avec JavaScript :
document.cookie = "username=JohnDoe";
Paramètres supplémentaires des cookies :
- expires : indique la date d'expiration du cookie. Après cette date, le cookie sera supprimé.
- path : définit le chemin pour lequel le cookie est valide. Habituellement, on utilise / pour rendre le cookie accessible sur tout le site.
- domain : définit le domaine pour lequel le cookie est valide.
- secure : si défini, le cookie sera transmis uniquement via HTTPS.
- HttpOnly : si défini, le cookie ne peut pas être accessible via JavaScript (seulement côté serveur).
Exemple d'installation de cookie avec des paramètres supplémentaires :
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Gestion des cookies
1. Lecture des cookies
Tous les cookies pour le document actuel sont stockés dans une longue chaîne dans document.cookie. Pour obtenir la valeur d'un cookie, il faut analyser cette chaîne.
Exemple de lecture de cookie :
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Récupération de la valeur du cookie "username"
const username = getCookie('username');
console.log(username); // Affichera : JohnDoe
2. Mise à jour des cookies
Pour mettre à jour la valeur d'un cookie, il suffit de le définir à nouveau avec le même nom mais une nouvelle valeur et des paramètres.
Exemple de mise à jour de cookie :
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Suppression des cookies
Pour supprimer un cookie, il est nécessaire de lui attribuer une date d'expiration passée.
Exemple de suppression de cookie :
// Fixer une date d'expiration passée
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Exemples de travail avec les cookies
Explication :
setCookie: configure un cookie avec le nom, la valeur et la durée de vie (en jours) donnésgetCookie: renvoie la valeur d'un cookie pour le nom donnédeleteCookie: supprime un cookie pour le nom donné
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Cookie</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" a été fixé à "JohnDoe" pour 7 jours');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" a pour valeur : ' + cookieValue);
} else {
alert('Cookie "username" introuvable');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" a été supprimé');
}
</script>
</body>
</html>
5.4 Installer un cookie côté serveur
Voyons comment travailler avec les cookies HttpOnly et Secure sur le serveur (Node.js).
Exemple :
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 jours
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Secure server cookie set');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie value: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
Exemples d'utilisation des cookies :
- Authentification : les cookies sont souvent utilisés pour stocker des jetons de session qui authentifient l'utilisateur entre les requêtes.
- Préférences utilisateur : les cookies peuvent stocker des paramètres utilisateur comme la langue d'interface ou les thèmes.
- Suivi des utilisateurs : les cookies peuvent être utilisés pour suivre le comportement des utilisateurs sur le site pour l'analyse et la personnalisation du contenu.
GO TO FULL VERSION