JavaScript et les cookies

Articles

Cet article explique JavaScript et les cookies.

Nous expliquerons tout en détail étape par étape, des bases des cookies, de la lecture et de l'écriture, de la sécurité, jusqu’à des exemples pratiques.

YouTube Video

javascript-cookie.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-cookie.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-cookie.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-cookie.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

JavaScript et les cookies

Un cookie désigne de petites portions de données stockées dans le navigateur de l’utilisateur. Ils sont principalement utilisés pour les raisons suivantes :.

Authentification de l’utilisateur (maintien de l’état de connexion)
Sauvegarde des paramètres utilisateur (langue, thème, etc.)
Suivi (historique de navigation, etc.)

En JavaScript, vous pouvez lire et écrire des cookies en utilisant document.cookie.

Créer (écrire) des cookies

Les cookies sont créés avec la syntaxe suivante :.

1document.cookie = "username=JohnDoe";

Ce code enregistre un cookie nommé "username=JohnDoe" dans le navigateur.

Créer des cookies avec une date d’expiration

Les cookies peuvent avoir une date d’expiration définie. Si aucune date d’expiration n’est définie, il s’agit d’un cookie de session et il est supprimé lorsque le navigateur est fermé.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3const cookieText = "username=JohnDoe; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4document.cookie = cookieText;
5console.log(`Cookie Text  : ${cookieText}`);
6console.log(`Cookie Value : ${document.cookie}`);

L’attribut expires spécifie la date d’expiration du cookie au format UTC.
L’attribut path spécifie le chemin pour lequel le cookie sera envoyé. / signifie l’ensemble du site.
Si vous spécifiez SameSite=None, le Cookie sera envoyé même lors de requêtes intersites. Cependant, dans ce cas, vous devez toujours inclure l'attribut Secure.
Spécifier Secure limite le Cookie à la communication HTTPS uniquement, renforçant ainsi la sécurité.
En consultant document.cookie, vous pouvez obtenir tous les Cookies disponibles sur la page courante sous forme de chaîne.
En utilisant console.log, vous pouvez vérifier la différence entre les valeurs réelles des Cookies définies dans le navigateur et les valeurs pouvant être récupérées.

Lire (récupérer) des cookies

Vous pouvez récupérer tous les cookies sous forme de chaîne avec document.cookie.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3document.cookie = "theme=dark; expires=" + date.toUTCString() + "; path=/; SameSite=None; Secure"
4
5console.log(document.cookie);
6// Output: "username=JohnDoe; theme=dark"

La valeur renvoyée par document.cookie est une seule chaîne où tous les Cookies sont concaténés au format 'clé=valeur;'.
Il est pratique d’utiliser une fonction pour analyser cette chaîne et extraire la valeur souhaitée.

Fonction pour obtenir la valeur d’un cookie

 1function getCookie(name) {
 2    const cookies = document.cookie.split('; ');
 3    for (const cookie of cookies) {
 4        const [key, value] = cookie.split('=');
 5        if (key === name) {
 6            return decodeURIComponent(value);
 7        }
 8    }
 9    return null;
10}
11
12console.log(getCookie("username")); // "JohnDoe"

Cette fonction sépare les clés et les valeurs en utilisant split() et renvoie la valeur si elle correspond à la clé spécifiée.
En utilisant decodeURIComponent, vous pouvez correctement récupérer les caractères encodés.
Si la clé correspondante n'existe pas, elle retourne null.

Supprimer des cookies

Un cookie peut être supprimé en définissant sa date d’expiration à une date passée.

1document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=None; Secure";
2
3console.log(document.cookie);
4// Output: "theme=dark"

En attribuant une valeur vide à username et en fixant la date d'expiration dans le passé, il sera supprimé.
Lors de la suppression d'un Cookie, vous devez également faire correspondre les attributs path, SameSite et Secure avec ceux utilisés lors de sa création.
Dans cet exemple, username est supprimé et d'autres Cookies comme theme=dark restent.

Options de cookies

Vous pouvez spécifier diverses options pour contrôler le comportement d’un cookie. Les principales sont les suivantes :.

Spécifie la date d’expiration du cookie au format UTC. Si non spécifié, le cookie devient un cookie de session et est supprimé à la fermeture du navigateur.

Spécifie la date d’expiration du cookie en secondes. Ceci prend le dessus sur `expires`.

Spécifie le chemin pour lequel le cookie sera envoyé. Par exemple, si vous spécifiez `/admin`, le cookie ne sera envoyé qu’aux pages sous ce chemin.

Spécifie le domaine pour lequel le cookie est valide. Habituellement, il est défini pour le domaine actuel, mais vous pouvez l’appliquer à tous les sous-domaines, comme `.example.com`.

Lorsque cet attribut est spécifié, le cookie est envoyé uniquement via HTTPS. Pour une meilleure sécurité, définissez toujours cet attribut pour les informations sensibles.

Contrôle l’envoi des cookies lors de requêtes intersites. Vous pouvez spécifier l’une des trois valeurs suivantes :.

- `Strict`
    Les cookies sont envoyés uniquement pour des requêtes provenant du même site.

- `Lax`
    Les cookies sont envoyés pour la navigation normale, mais avec certaines limitations.

- `None`
    Les cookies peuvent être envoyés même lors de requêtes intersites. Cependant, l’attribut `Secure` est également requis.

Exemple : Cookie sécurisé

1document.cookie = "sessionId=abc123; secure; SameSite=Strict";

Si vous spécifiez secure, le Cookie ne sera envoyé que via une communication HTTPS.
Si vous spécifiez SameSite=Strict, le Cookie ne sera pas envoyé lors des requêtes intersites, ce qui le rend efficace comme mesure contre les attaques CSRF.
De tels attributs de sécurité sont essentiels pour les Cookies importants utilisés pour l'authentification ou la gestion de session.

Encodage et décodage

Comme les valeurs des cookies peuvent contenir des caractères spéciaux, il est plus sûr d’utiliser encodeURIComponent.

1const date = new Date();
2date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
3
4const username = "JohnDoe";
5document.cookie =
6    "username=" + encodeURIComponent(username) +
7    "; max-age=604800; path=/; SameSite=None; Secure";
8
9console.log(decodeURIComponent(getCookie("username"))); // "JohnDoe"

En utilisant encodeURIComponent, vous pouvez stocker en toute sécurité des espaces, des symboles, etc. dans un Cookie.
Lors de la lecture, utilisez decodeURIComponent pour retrouver la chaîne d'origine.
Dans cet exemple, max-age=604800 est utilisé pour définir la période d'expiration à 7 jours (604 800 secondes). Ceci est une méthode pour spécifier la date d'expiration, similaire à expires. max-age peut être spécifié en secondes et est souvent plus facile à utiliser.

Exemple pratique : Sauvegarder et charger un thème

Voici un exemple de sauvegarde du thème choisi par l’utilisateur dans un cookie et de son application automatique lors de la prochaine visite.

 1function setTheme(theme) {
 2    document.cookie =
 3        "theme=" + encodeURIComponent(theme) +
 4        "; max-age=604800; path=/; SameSite=None; Secure"; // 1 week
 5    applyTheme(theme);
 6}
 7
 8function applyTheme(theme) {
 9    document.body.style.backgroundColor = theme === "dark" ? "#333" : "#fff";
10    document.body.style.color = theme === "dark" ? "#fff" : "#000";
11}
12
13function getCookie(name) {
14    const cookies = document.cookie.split('; ');
15    for (const cookie of cookies) {
16        const [key, value] = cookie.split('=');
17        if (key === name) {
18            return decodeURIComponent(value);
19        }
20    }
21    return null;
22}
23
24const savedTheme = getCookie("theme");
25if (savedTheme) {
26    applyTheme(savedTheme);
27}

1<button onclick="setTheme('light')">Light</button>
2<button onclick="setTheme('dark')">Dark</button>

La fonction setTheme enregistre le thème sélectionné dans un Cookie et appelle immédiatement applyTheme pour mettre à jour l'écran.
La fonction applyTheme modifie les couleurs de fond et de texte du body en fonction du thème.
Dans cet exemple, puisque max-age=604800 est défini, le paramètre du thème est conservé pendant une semaine.
Comme le choix de l'utilisateur peut être conservé lors d'une visite ultérieure sur la page, l'expérience utilisateur est améliorée.

Limitations et précautions concernant les cookies

Gardez à l’esprit les points suivants lors de l’utilisation des cookies :.

Limites de taille La taille d’un cookie individuel est limitée à environ 4 Ko.
Limite sur le nombre de cookies pouvant être enregistrés Selon le navigateur, seuls 20 à 50 peuvent être enregistrés par domaine.
Précautions de sécurité Le contenu des cookies est généralement enregistré en texte brut, il n'est donc pas adapté au stockage d'informations confidentielles telles que les mots de passe.
Cookies inaccessibles depuis JavaScript Les cookies ayant l'attribut HttpOnly ne peuvent pas être lus depuis JavaScript pour des raisons de sécurité.

Serveur et `cookies`

1Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

Certains attributs de cookie, tels que HttpOnly, ne peuvent pas être définis via JavaScript. Ceux-ci doivent être définis côté serveur.

Résumé

Manipuler les cookies avec JavaScript peut améliorer l'expérience utilisateur et maintenir l'état. Cependant, veuillez garder à l'esprit les points suivants pour les gérer en toute sécurité et de manière appropriée.

Conservez uniquement les informations strictement nécessaires Du point de vue de la confidentialité et de la sécurité, évitez de stocker des informations personnelles ou sensibles et n'enregistrez que les données nécessaires.
Définissez correctement les attributs de sécurité Définissez des attributs comme Secure et SameSite pour empêcher les attaques inter-sites telles que XSS et CSRF.
Encodage et décodage des données Utilisez encodeURIComponent et decodeURIComponent pour enregistrer et lire en toute sécurité les valeurs des cookies afin que les caractères spéciaux et le japonais soient correctement pris en charge.

En apprenant la bonne utilisation des cookies, vous pouvez concevoir des applications web plus avancées et sécurisées.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Shared Worker en JavaScript

JavaScript et les cookies

YouTube Video

JavaScript et les cookies

Créer (écrire) des cookies

Créer des cookies avec une date d’expiration

Lire (récupérer) des cookies

Fonction pour obtenir la valeur d’un cookie

Supprimer des cookies

Options de cookies

Exemple : Cookie sécurisé

Encodage et décodage

Exemple pratique : Sauvegarder et charger un thème

Limitations et précautions concernant les cookies

Serveur et cookies

Résumé

YouTube Video

Serveur et `cookies`