OUJOOD.COM
Introduction : Qu’est-ce qu’un Cookie et Pourquoi l’Utiliser ?
Un cookie est une petite information que votre serveur envoie au navigateur de l’utilisateur (comme Chrome ou Firefox). Le navigateur le garde et le renvoie à chaque visite. Avec ExpressJS, les cookies peuvent servir à se souvenir d’un utilisateur, par exemple pour afficher "Bienvenue, Marie" à chaque fois qu’elle revient. Nous allons utiliser un outil appelé cookie-parser pour rendre ça facile.
Étape 1 : Préparer Votre Environnement
Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Sinon, voici les étapes :
- Vérifiez Node.js : Ouvrez un terminal (Invite de commandes sur Windows, Terminal sur Mac/Linux) et tapez la commande :
node -v. Si vous voyez une version (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org. - Créez un dossier projet : Faites un dossier nommé "cookies-express" sur votre ordinateur.
- Initialisez le projet : Dans le terminal, allez dans ce dossier avec la commande :
cd chemin/vers/cookies-express, puis tapeznpm init -y. Cela crée un fichierpackage.json. - Installez ExpressJS et cookie-parser : Tapez
npm install express cookie-parser. Express est pour le serveur, etcookie-parsernous aide à gérer les cookies.
Étape 2 : Créer un Serveur avec un Cookie Simple
Commençons par un exemple où le serveur envoie un cookie au visiteur et affiche un message avec ce cookie.
Exemple de Code : Définir et Lire un Cookie
Créez un fichier nommé index.js dans votre dossier "cookies-express" et ajoutez ce code. Il définit un cookie avec un nom et le lit.
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
// Activer la gestion des cookies
app.use(cookieParser());
// Route principale
app.get('/', function(req, res) {
// Vérifier si un cookie "nom" existe
var nom = req.cookies.nom;
if (!nom) {
// Si pas de cookie, en définir un
res.cookie('nom', 'Visiteur');
res.send(`
<html>
<body>
<h1>Bienvenue !</h1>
<p>Un cookie a été créé pour vous appeler "Visiteur". Rechargez la page pour voir.</p>
</body>
</html>
`);
} else {
// Si le cookie existe, l'utiliser
res.send(`
<html>
<body>
<h1>Bienvenue de nouveau, ${nom} !</h1>
<p>Votre cookie a été lu.</p>
</body>
</html>
`);
}
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Explication Détaillée du Code
Voici chaque ligne expliquée très simplement pour les débutants :
- var express = require('express'); : On importe ExpressJS pour faire notre serveur.
- var cookieParser = require('cookie-parser'); : On importe
cookie-parser, un outil qui lit et écrit des cookies facilement. - var app = express(); : On crée une application Express, comme une boîte pour notre code.
- app.use(cookieParser()); : On active
cookie-parser. C’est un "middleware" (un assistant) qui ajoute des fonctions pour gérer les cookies. - app.get('/', function(req, res) { ... }); : Quand quelqu’un visite la page principale ("/"), on fait quelque chose. "req" est ce que l’utilisateur envoie, "res" est ce qu’on renvoie.
- var nom = req.cookies.nom; : On regarde si un cookie nommé "nom" existe.
req.cookiescontient tous les cookies envoyés par le navigateur. - if (!nom) { ... } : Si aucun cookie "nom" n’existe (c’est la première visite), on entre dans cette partie.
- res.cookie('nom', 'Visiteur'); : On crée un cookie nommé "nom" avec la valeur "Visiteur". Ce cookie est envoyé au navigateur.
- res.send(`...`); : On affiche une page disant qu’un cookie a été créé.
- else { ... } : Si le cookie existe (deuxième visite ou plus), on utilise sa valeur pour dire "Bienvenue de nouveau, [nom] !".
- app.listen(3000, ...); : On démarre le serveur sur le port 3000. Le message dans la console confirme que ça marche.
Pour exécuter : Sauvegardez index.js, tapez node index.js dans le terminal, puis ouvrez <a href="http://localhost:3000" title="Tester les cookies">http://localhost:3000</a> dans votre navigateur. La première fois, vous verrez "Un cookie a été créé". Rechargez la page (F5), et vous verrez "Bienvenue de nouveau, Visiteur !".
Étape 3 : Laisser l’Utilisateur Choisir son Nom
Allons plus loin : ajoutons un formulaire pour que l’utilisateur définisse son propre nom dans un cookie.
Exemple de Code : Cookie Personnalisé avec Formulaire
Mettez à jour index.js avec ce code. Il ajoute un formulaire pour définir un cookie personnalisé.
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
// Activer la gestion des cookies et des formulaires
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));
// Route principale
app.get('/', function(req, res) {
var nom = req.cookies.nom || "Visiteur";
res.send(`
<html>
<body>
<h1>Bienvenue, ${nom} !</h1>
<form method="POST" action="/definir-nom">
<label>Changer votre nom : </label>
<input type="text" name="nom">
<button type="submit">Définir</button>
</form>
</body>
</html>
`);
});
// Route pour définir un nouveau cookie
app.post('/definir-nom', function(req, res) {
var nouveauNom = req.body.nom;
res.cookie('nom', nouveauNom);
res.send(`
<html>
<body>
<h1>Nouveau nom défini : ${nouveauNom} !</h1>
<p><a href="/" title="Retour à la page principale">Retour</a></p>
</body>
</html>
`);
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Explication Détaillée du Code
Voici chaque nouvelle partie expliquée pour les débutants :
- app.use(express.urlencoded({ extended: false })); : On ajoute un outil pour lire les données des formulaires (comme dans le tutoriel sur "Form Data").
- var nom = req.cookies.nom || "Visiteur"; : On récupère le cookie "nom". S’il n’existe pas, on utilise "Visiteur" par défaut.
- res.send(`...`); : On affiche une page avec un message de bienvenue et un formulaire pour changer le nom.
- app.post('/definir-nom', function(req, res) { ... }); : Quand le formulaire est envoyé à "/definir-nom", on fait quelque chose.
- var nouveauNom = req.body.nom; : On récupère le nom tapé dans le champ "nom" du formulaire.
- res.cookie('nom', nouveauNom); : On met à jour le cookie avec ce nouveau nom.
- res.send(`...`); : On confirme le changement et ajoute un lien pour revenir.
Pour exécuter : Sauvegardez index.js, tapez node index.js, allez à <a href="http://localhost:3000" title="Tester le formulaire">http://localhost:3000</a>. Vous verrez "Bienvenue, Visiteur !". Entrez un nom (ex. : "Marie"), cliquez sur "Définir", puis revenez à la page principale. Vous verrez "Bienvenue, Marie !".
Étape 4 : Utiliser les Cookies pour Suivre la Dernière Visite
Les cookies ne servent pas seulement à stocker un nom. Ils peuvent aussi garder des informations utiles, comme la date de la dernière visite d’un utilisateur. Dans cet exemple, nous allons utiliser un cookie pour enregistrer quand quelqu’un visite la page, puis calculer combien de temps s’est écoulé depuis sa dernière visite. Suivez ces étapes pour voir comment faire.
Exemple de Code : Suivre la Dernière Visite avec un Cookie
Ajoutez ce code à votre fichier index.js existant ou remplacez la partie précédente. Ce code définit un cookie avec la date actuelle et affiche un message personnalisé avec le temps écoulé depuis la dernière visite.
var express = require('express');
var cookieParser = require('cookie-parser');
var app = express();
// Activer la gestion des cookies
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));
// Route principale
app.get('/', function(req, res) {
var nom = req.cookies.nom || "Visiteur";
var derniereVisite = req.cookies.derniereVisite;
var messageVisite = "";
// Si un cookie de dernière visite existe, calculer le temps écoulé
if (derniereVisite) {
var dateDerniere = new Date(parseInt(derniereVisite));
var dateActuelle = new Date();
var differenceMs = dateActuelle - dateDerniere;
var jours = Math.floor(differenceMs / (1000 * 60 * 60 * 24));
var heures = Math.floor((differenceMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
messageVisite = `Votre dernière visite était il y a ${jours} jour(s) et ${heures} heure(s).`;
} else {
messageVisite = "C’est votre première visite !";
}
// Définir ou mettre à jour le cookie de dernière visite avec la date actuelle
res.cookie('derniereVisite', Date.now());
// Afficher la page avec le message
res.send(`
<html>
<body>
<h1>Bonjour, ${nom} !</h1>
<p>${messageVisite}</p>
<form method="POST" action="/definir-nom">
<label>Changer votre nom : </label>
<input type="text" name="nom">
<button type="submit">Définir</button>
</form>
</body>
</html>
`);
});
// Route pour définir un nouveau cookie de nom
app.post('/definir-nom', function(req, res) {
var nouveauNom = req.body.nom;
res.cookie('nom', nouveauNom);
res.send(`
<html>
<body>
<h1>Nouveau nom défini : ${nouveauNom} !</h1>
<p><a href="/" title="Retour à la page principale">Retour</a></p>
</body>
</html>
`);
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Options de Sécurité & Durée des Cookies
Il est recommandé de définir des options pour sécuriser vos cookies et contrôler leur durée de vie : httpOnly (non accessible en JS), secure (HTTPS), sameSite (CSRF), maxAge ou expires.
app.get('/set-securise', (req, res) => {
const prod = process.env.NODE_ENV === 'production';
res.cookie('nom', 'Visiteur', {
maxAge: 7*24*60*60*1000, // 7 jours
httpOnly: true, // pas accessible via JS (protège d'une partie des XSS)
sameSite: 'Lax', // atténue le CSRF basique
secure: prod // seulement via HTTPS en production
});
res.send('<h1>Cookie sécurisé défini !</h1> <a href="/">Retour</a>');
});
Cookies Signés (Intégrité)
Un cookie signé permet de détecter sa modification (intégrité), mais il n’est pas chiffré. Utilisez une “secret key” côté serveur.
const cookieParser = require('cookie-parser');
app.use(cookieParser(process.env.COOKIE_SECRET || 'dev-secret'));
app.get('/set-pref', (req, res) => {
res.cookie('pref', 'dark', { signed: true, httpOnly: true, sameSite: 'Lax' });
res.send('<h1>Cookie signé défini !</h1>');
});
app.get('/voir-pref', (req, res) => {
const pref = req.signedCookies.pref; // lecture côté signé
res.send('<h1>Préférence: ' + (pref || 'aucune') + '</h1>');
});
Supprimer un Cookie
Pour supprimer un cookie, utilisez res.clearCookie. Reprenez les mêmes options que lors de l’écriture si nécessaire (nom, domaine, chemin, etc.).
app.get('/logout', (req, res) => {
res.clearCookie('nom', { httpOnly: true, sameSite: 'Lax' });
res.send('<h1>Cookie supprimé.</h1> <a href="/">Retour</a>');
});
Conclusion
Félicitations ! Vous savez maintenant utiliser les cookies avec ExpressJS pour stocker et lire des informations. C’est utile pour personnaliser l’expérience des utilisateurs. Essayez ce code dans utiliser-cookies-expressjs.html. Pour aller plus loin, découvrez notre prochain tutoriel sur Gérer les Sessions dans ExpressJS ou consultez la documentation ExpressJS.