Tutoriel sur les cookies JavaScript : comment définir, récupérer et gérer les cookies en toute sécurité

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

Dans le développement web avec JavaScript, les cookies sont largement utilisés comme un mécanisme essentiel pour stocker des informations liées à l’utilisateur.
Par exemple, ils sont couramment employés pour maintenir les sessions de connexion ou stocker les données du panier d’achat, améliorant ainsi considérablement le confort de l’utilisateur.

Cependant, pour les débutants, des concepts tels que « Qu’est‑ce qu’un cookie ? » ou « Comment manipuler les cookies avec JavaScript ? » peuvent être difficiles à comprendre.

Dans cet article, nous proposons une explication détaillée de la gestion des cookies en JavaScript, des concepts de base aux usages avancés.
Avec des exemples de code pratiques, ce guide est conçu pour être utile tant aux débutants qu’aux développeurs intermédiaires.

2. What Is a Cookie?

Basic Concept of Cookies

Un cookie est une petite quantité de données stockée dans le navigateur web.
Il est principalement utilisé aux fins suivantes :

• Stocker les informations saisies par les utilisateurs sur un site (par ex. les identifiants de connexion).
• Enregistrer le comportement des visiteurs à des fins de marketing et d’analyse.
• Conserver les paramètres de configuration (par ex. les préférences de langue ou le thème) afin d’améliorer l’expérience utilisateur.

How Cookies Work

Les cookies sont composés de paires clé‑valeur et sont stockés au format suivant :

name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/

Dans cet exemple, la clé name se voit attribuer la valeur value, ainsi qu’une date d’expiration et un chemin spécifié.

Main Components of a Cookie

1. Nom et valeur (name=value) – L’information de base du cookie.
2. Expiration (expires ou max-age) – Indique la durée de validité du cookie.
3. Path – Définit le répertoire ou les pages où le cookie est accessible.
4. Attribut Secure – Garantit que le cookie n’est envoyé que via des connexions HTTPS.
5. Attribut SameSite – Aide à protéger contre les attaques de type cross‑site request forgery (CSRF).

Ces réglages flexibles rendent les cookies utiles pour améliorer l’expérience utilisateur tout en renforçant la sécurité.

3. Basic Cookie Operations in JavaScript

En JavaScript, les cookies sont manipulés à l’aide de la propriété document.cookie.
Cette section présente les opérations de base.

Setting a Cookie

Voici un exemple de création d’un nouveau cookie.

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Points clés :

• username=John : Spécifie la clé et la valeur.
• expires : Définit la date d’expiration. Si omis, le cookie est supprimé à la fermeture du navigateur.
• path=/ : Rend le cookie disponible sur l’ensemble du site.

Getting Cookies

Tous les cookies peuvent être récupérés comme suit :

console.log(document.cookie);

Exemple de sortie :

username=John; theme=dark; lang=ja

Comme plusieurs cookies sont séparés par des points‑virgules (;), il faut scinder la chaîne lors du traitement des valeurs individuelles.

Deleting a Cookie

Pour supprimer un cookie, il suffit de définir sa date d’expiration à une date passée.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Ce code supprime le cookie nommé username.

4. Cookie Attribute Settings

Les attributs des cookies jouent un rôle important dans la sécurité et le contrôle de l’expiration.

Setting Expiration

1. Utilisation de l’attribut expires (basé sur une date)

   document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
   

2. Utilisation de l’attribut max-age (basé sur des secondes)

   document.cookie = "username=John; max-age=3600; path=/";
   

Cette configuration supprime automatiquement le cookie après une heure.

Security Attributes

1. Attribut secure (HTTPS uniquement)

   document.cookie = "username=John; secure";
   

2. Attribut SameSite (protection contre les requêtes inter‑sites)

   document.cookie = "username=John; SameSite=Strict";
   

En configurant correctement ces attributs, vous pouvez améliorer de façon significative la sécurité et la protection de la vie privée.

5. Practical Code Examples

Counting User Visits

function getCookie(name) {
  let cookies = document.cookie.split('; ');
  for (let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if (parts[0] === name) return parts[1];
  }
  return null;
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + value + expires + "; path=/";
}

let visits = getCookie("visits") ? parseInt(getCookie("visits")) : 0;
visits++;
setCookie("visits", visits, 365);
alert("Your number of visits: " + visits);

Ce code stocke le nombre de visites de l’utilisateur dans un cookie et met à jour le compteur à chaque visite.

6. Utilisation de bibliothèques tierces

Bien que les cookies puissent être gérés à l’aide de la propriété document.cookie en JavaScript, la manipulation des chaînes et la définition des attributs peuvent devenir fastidieuses. Cela conduit souvent à un code plus long et à une lisibilité réduite.

Pour simplifier la gestion des cookies, l’utilisation de bibliothèques tierces est une approche courante et efficace. Dans cette section, nous nous concentrons sur l’une des bibliothèques les plus populaires : js-cookie.

1. Qu’est‑ce que la bibliothèque js-cookie ?

js-cookie est une bibliothèque JavaScript légère qui simplifie les opérations sur les cookies. Ses principales fonctionnalités comprennent :

• API simple : Définir, récupérer et supprimer facilement les cookies.
• Extensibilité et flexibilité : Prend en charge les options de sécurité et les configurations personnalisées.
• Légèreté : Environ 2 KB après minification.

2. Installation de js-cookie

Chargement via CDN

Ajoutez le code suivant à l’intérieur de la balise <head> de votre fichier HTML.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

Installation via npm ou yarn

Si vous gérez les dépendances dans votre projet, utilisez l’une des commandes suivantes :

npm install js-cookie

or

yarn add js-cookie

3. Utilisation de base

Définir un cookie

Cookies.set('username', 'John', { expires: 7 }); // Valid for 7 days

Récupérer un cookie

let username = Cookies.get('username');
console.log(username); // Output: John

Supprimer un cookie

Cookies.remove('username');

4. Paramètres d’options avancés

Définir l’expiration et le chemin

Cookies.set('session', 'active', { expires: 1, path: '/' });

• expires : Expire après 1 jour.
• path : Rend le cookie disponible sur tout le site.

Ajout de l’attribut secure

Cookies.set('secureData', 'secret', { secure: true });

• secure: true : Envoie le cookie uniquement via HTTPS.

Spécification de l’attribut SameSite

Cookies.set('strictCookie', 'value', { sameSite: 'Strict' });

• sameSite: ‘Strict’ : Bloque les requêtes inter‑sites et renforce la sécurité.

7. Considérations de sécurité et de confidentialité

Lorsqu’on travaille avec les cookies en JavaScript, les mesures de sécurité et la protection de la vie privée sont extrêmement importantes. Une mauvaise gestion peut entraîner des fuites de données ou un accès non autorisé. Cette section explique les meilleures pratiques pour une gestion sécurisée des cookies.

1. Mesures de sécurité

Utilisation de HTTPS et de l’attribut Secure

Définissez l’attribut Secure afin que les cookies ne soient envoyés que via des connexions HTTPS. Cela aide à prévenir l’interception et la falsification des données.

Exemple :

document.cookie = "sessionID=abc123; Secure";

Lorsque vous utilisez la bibliothèque tierce js-cookie, vous pouvez la configurer comme suit :

Cookies.set('sessionID', 'abc123', { secure: true });

Utilisation de l’attribut HttpOnly (configuration côté serveur)

JavaScript ne peut pas définir l’attribut HttpOnly côté client. Cependant, le configurer côté serveur aide à prévenir les attaques XSS (Cross‑Site Scripting).

Exemple : configuration côté serveur (PHP)

setcookie('sessionID', 'abc123', [
    'httponly' => true,
    'secure' => true,
    'samesite' => 'Strict'
]);

Prévention des attaques CSRF avec l’attribut SameSite

Pour prévenir les attaques CSRF (Cross-Site Request Forgery),
configurez l’attribut SameSite.

Exemple :

document.cookie = "token=secureToken; SameSite=Strict";

2. Protection de la vie privée

Limiter le type d’informations stockées

Évitez de stocker des informations personnelles ou sensibles (comme les mots de passe) dans les cookies.
À la place, stockez des identifiants anonymes tels que les ID de session et validez-les côté serveur.

Exemple : Utilisation d’un ID de session

Cookies.set('sessionID', 'randomString123', { secure: true, httpOnly: true });

Conformité au RGPD et aux réglementations sur la vie privée

En raison de réglementations telles que le RGPD (Règlement Général sur la Protection des Données) dans l’UE
et la Loi japonaise sur la protection des informations personnelles,
les exigences suivantes s’appliquent lors de l’utilisation des cookies :

1. Consentement obligatoire de l’utilisateur Les utilisateurs doivent être informés de la finalité de l’utilisation des cookies et donner leur consentement explicite.
2. Offrir des options d’acceptation et de refus Les utilisateurs doivent pouvoir refuser les cookies non essentiels.

Exemple : Bannière de consentement aux cookies (JavaScript)

if (!Cookies.get('cookieConsent')) {
  let consent = confirm('This site uses cookies. Do you allow cookies?');
  if (consent) {
    Cookies.set('cookieConsent', 'true', { expires: 365 });
  }
}

8. Comment vérifier les cookies dans votre navigateur

Lors de la création, la récupération ou la suppression de cookies avec JavaScript,
vous pouvez vérifier leur comportement à l’aide des outils de développement du navigateur.
Cette section explique comment vérifier les cookies dans les principaux navigateurs.

1. Vérification des cookies dans Google Chrome

Ouvrir les outils de développement

1. Cliquez avec le bouton droit sur la page et sélectionnez « Inspecter » ou « Inspecter l’élément » .
2. Ou appuyez sur F12 ou Ctrl + Shift + I (sur Mac : Cmd + Opt + I ).

Étapes pour afficher les cookies

1. Sélectionnez l’onglet « Application » dans les outils de développement.
2. Dans le menu de gauche, cliquez sur « Storage » → « Cookies » .
3. Sélectionnez le domaine cible dans la liste.

Afficher les détails des cookies

Les cookies du site sélectionné sont affichés sous forme de tableau.
Chaque colonne représente les informations suivantes :

Modifier et supprimer les cookies

• Modifier : double-cliquez sur une ligne pour modifier sa valeur.
• Supprimer : sélectionnez une ligne et appuyez sur la touche Delete, ou cliquez avec le bouton droit et choisissez Delete .

2. Vérification des cookies dans Firefox

Ouvrir les outils de développement

1. Cliquez avec le bouton droit sur la page et sélectionnez « Inspecter » .
2. Ou appuyez sur F12 ou Ctrl + Shift + I .

Afficher les cookies

1. Sélectionnez l’onglet « Storage ».
2. Cliquez sur « Cookies » dans le menu de gauche.
3. Sélectionnez le site cible parmi les domaines affichés.

Modifier et supprimer

Comme dans Chrome, vous pouvez directement modifier les valeurs ou supprimer les cookies.

3. Vérification des cookies dans Safari (pour les utilisateurs Mac)

Activer les outils de développement

1. Ouvrez « Paramètres » depuis le menu Safari.
2. Sélectionnez l’onglet « Avancé » et cochez « Afficher le menu Développer dans la barre de menus » .

Ouvrir les outils de développement

1. Cliquez avec le bouton droit sur la page et sélectionnez « Inspecter l’élément » .
2. Ou appuyez sur Cmd + Opt + I .

Afficher les cookies

1. Sélectionnez l’onglet « Storage ».
2. Choisissez « Cookies » pour examiner leur contenu.

4. Vérification des cookies via la console

Les cookies peuvent également être inspectés à l’aide de la console JavaScript.

Exemple : Afficher tous les cookies

console.log(document.cookie);

Exemple : Récupérer un cookie spécifique

let cookies = document.cookie.split('; ');
let username = cookies.find(row => row.startsWith('username=')).split('=')[1];
console.log(username);

Les cookies peuvent également être ajoutés ou supprimés directement depuis la console.

9. Résumé

Dans les sections précédentes, nous avons couvert la gestion des cookies en JavaScript des concepts de base aux cas d’utilisation avancés. Cette section passe en revue les points clés et résume les meilleures pratiques pratiques.

1. Notions de base sur les cookies et leur fonctionnement

Les cookies sont un mécanisme permettant de stocker de petites quantités de données dans un navigateur web.

• Cas d’utilisation : Maintenir les sessions de connexion, gérer les préférences utilisateur et suivre le comportement.
• Composants : Paires clé‑valeur, paramètres d’expiration, chemins, domaines et attributs de sécurité.

Comprendre ces fondamentaux vous permet d’adapter les cookies de manière flexible à divers scénarios.

2. Opérations sur les cookies en JavaScript

En JavaScript, vous pouvez facilement créer, récupérer et supprimer des cookies en utilisant la propriété document.cookie.

Exemple : Création d’un cookie

document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

Exemple : Récupération des cookies

console.log(document.cookie);

Exemple : Suppression d’un cookie

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Ces exemples couvrent les bases, mais pour des exigences plus complexes, il est recommandé d’utiliser une bibliothèque tierce.

3. Utilisation de bibliothèques tierces

Les bibliothèques rendent la gestion des cookies nettement plus simple et plus lisible.

Exemple avec js-cookie

Cookies.set('username', 'John', { expires: 7, secure: true });
let username = Cookies.get('username');
Cookies.remove('username');

Avantages :

• Code court et intuitif.
• Configuration facile des attributs de sécurité et des options.
• Compatibilité inter‑navigateurs fluide.

4. Mesures de sécurité et de confidentialité

Les cookies doivent toujours être utilisés avec des paramètres de sécurité et une protection de la vie privée appropriés.

Pratiques de sécurité essentielles

1. Utiliser HTTPS et l’attribut Secure : Empêche l’interception des données.
2. Définir l’attribut SameSite : Protège contre les attaques CSRF.
3. Utiliser l’attribut HttpOnly : Réduit les attaques XSS (configuration côté serveur).

Pratiques de confidentialité essentielles

1. Ne pas stocker d’informations personnelles : Conservez uniquement des ID ou des jetons et gérez les données réelles sur le serveur.
2. Respecter les réglementations : Mettre en place une gestion du consentement conforme au RGPD et aux lois connexes.
3. Chiffrer les données sensibles : Chiffrez toujours les informations critiques avant de les stocker.

5. Vérification et débogage des cookies

L’utilisation des outils de développement vous aide à vérifier et déboguer efficacement le comportement des cookies.

Outils spécifiques aux navigateurs

• Google Chrome : Interface très fonctionnelle et conviviale.
• Firefox : Fonctionnalités avancées de gestion du stockage.
• Edge et Safari : Gérés à l’aide d’étapes similaires à Chrome.

Utilisation de la console JavaScript

console.log(document.cookie);

Cela permet des tests et un débogage rapides.

6. Bonnes pratiques concrètes

Voici des recommandations concrètes pour une gestion des cookies sûre et efficace :

1. Ne stocker que les données strictement nécessaires : Évitez les cookies superflus et gérez les données critiques sur le serveur.
2. Définir des périodes d’expiration appropriées : Utilisez des durées d’expiration courtes et supprimez les cookies inutilisés.
3. Renforcer les paramètres de sécurité : Configurez toujours les attributs Secure, HttpOnly et SameSite.
4. Obtenir le consentement de l’utilisateur : Déployez une bannière de consentement conforme au RGPD et aux autres réglementations de confidentialité.
5. Utiliser efficacement les outils de débogage : Inspectez régulièrement les cookies à l’aide des outils de développement du navigateur.
6. Exploiter les bibliothèques tierces : Utilisez des bibliothèques comme js-cookie pour simplifier la gestion et améliorer la lisibilité.

Conclusion

Cet article a fourni un aperçu complet de la gestion des cookies en JavaScript, couvrant tout, de l’utilisation de base aux considérations de sécurité et de confidentialité.

Points clés à retenir

• Les bases du fonctionnement des cookies et quand les utiliser.
• Comment créer, récupérer et supprimer des cookies avec JavaScript.
• L’importance des mesures de sécurité et de la conformité légale.
• Des flux de travail efficaces en utilisant les outils de développement et les bibliothèques tierces.

Prochaines étapes
Utilisez ce guide comme référence pour implémenter la gestion des cookies dans des projets réels.
Pour rester sécurisé et conforme aux lois sur la confidentialité en évolution,
l’apprentissage continu et les revues régulières des meilleures pratiques sont essentiels.

Continuez à intégrer de nouvelles technologies et connaissances pour créer des applications web plus sûres,
plus conviviales pour les utilisateurs.