Cookies : document.cookie
Dans le monde du développement web, gérer les données efficacement est crucial. L'une des méthodes fondamentales pour manipuler les données côté client est l'utilisation des cookies. Les cookies sont de petits morceaux de données stockés dans le navigateur de l'utilisateur. Ils jouent un rôle essentiel dans l'amélioration de l'expérience utilisateur et des fonctionnalités en mémorisant les informations d'état pour la page web. Dans ce guide, nous explorerons comment gérer les cookies à l'aide de JavaScript, en vous fournissant des exemples de code pratiques à intégrer dans vos projets.
Créer des cookies avec JavaScript
Pour créer un cookie, il vous suffit d'assigner une chaîne de caractères à document.cookie. Cette chaîne doit contenir une paire clé-valeur représentant le nom et la valeur du cookie. Vous pouvez également définir des attributs facultatifs tels que l'expiration, le chemin, le domaine et la sécurité du cookie. L'attribut domain contrôle la portée : par défaut, les cookies sont limités à l'hôte actuel et à ses sous-domaines. Définir domain=.example.com rend le cookie disponible pour tous les sous-domaines, tandis que domain=app.example.com le restreint à ce sous-domaine spécifique.
Voici comment créer un cookie basique :
Cette ligne de code crée un cookie nommé username avec la valeur John Doe (encodée pour gérer correctement l'espace), le définit pour qu'il expire le 8 juin 2025 et le rend accessible à l'ensemble du site web. Si la valeur contient des espaces ou des caractères spéciaux, encodez-la toujours à l'aide de encodeURIComponent pour éviter les problèmes d'analyse.
Définir les dates d'expiration
Pour garantir qu'un cookie soit stocké pendant une période spécifique, vous devez définir une date d'expiration au format UTC à l'aide de l'attribut expires. Vous pouvez également utiliser l'attribut max-age pour spécifier la durée de vie du cookie en secondes.
WARNING
Spécifiez toujours une date d'expiration pour vos cookies afin de garantir qu'ils ne persistent que pour la durée prévue.
Ce cookie, userSettings, expirera après 24 heures (86 400 secondes) à partir de sa création.
Récupérer des cookies avec JavaScript
La récupération des cookies consiste à lire la chaîne document.cookie, comme vous l'avez déjà vu dans l'exemple ci-dessus. Cette chaîne contient tous les cookies du domaine actuel, stockés dans une liste séparée par des points-virgules. Pour trouver un cookie spécifique, vous pouvez diviser cette chaîne et parcourir le tableau résultant :
Supprimer des cookies
Pour supprimer un cookie, vous pouvez définir sa date d'expiration à une date passée. Cela se fait effectivement en définissant l'attribut expires sur une date déjà écoulée. Remarque : Vous devez également correspondre exactement aux attributs path et domain utilisés lors de la création du cookie, sinon le navigateur ne le supprimera pas.
En définissant la date d'expiration au 1er janvier 1970, le cookie est supprimé immédiatement par le navigateur.
Gérer les attributs des cookies en toute sécurité
Lorsque vous manipulez des cookies contenant des informations sensibles, la sécurité devient primordiale. Pour renforcer la sécurité des cookies, vous pouvez utiliser les attributs Secure et SameSite via JavaScript. Notez que l'attribut HttpOnly ne peut pas être défini côté client ; il doit être configuré sur le serveur.
Secure: Garantit que le cookie est envoyé uniquement via HTTPS, empêchant toute exposition via une connexion HTTP.SameSite: Restreint la manière dont les cookies sont envoyés avec les requêtes intersites, aidant à prévenir les attaques CSRF.
WARNING
Si votre site web est servi via HTTPS, ajoutez l'attribut Secure à tous les cookies pour empêcher leur transmission sur des connexions non sécurisées.
document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";Ce cookie est sécurisé et restreint les requêtes intersites. (La protection HttpOnly doit être gérée côté serveur.)
Conclusion
Les cookies sont un outil puissant pour gérer les données et les paramètres spécifiques aux utilisateurs dans les applications web. En comprenant comment créer, récupérer et gérer en toute sécurité les cookies avec JavaScript, les développeurs peuvent considérablement améliorer l'expérience utilisateur sur leurs sites web. N'oubliez jamais de manipuler les cookies avec soin, surtout lorsque vous traitez des informations personnelles ou sensibles.
Pratique
Quels attributs pouvez-vous utiliser pour renforcer la sécurité des cookies en JavaScript ?