💾 LocalStorage vs SessionStorage

-

 🧠 Petit rappel : c’est quoi ces machins ?

LocalStorage et SessionStorage, ce sont deux petits coffres-forts dans ton navigateur.
Ils permettent aux sites web de stocker des infos côté client (donc chez toi, pas sur un serveur).

Mais attention : ils ont des différences cruciales, et... des pièges bien planqués.

⚔️ Le match : qui fait quoi ?

LocalStorage 🗃️SessionStorage 🧳
DuréePersistant (même après redémarrage)Temporaire (effacé à la fermeture onglet)
PortéePar domainePar onglet
CapacitéEnviron 5 à 10 MoEnviron 5 Mo
PartageAccessible par toutes les pages du sitePropre à chaque onglet
Utilisation typiquePréférences, tokens, thèmesÉtapes d’un formulaire, état temporaire


🔥 Pourquoi c’est risqué ?

1. Accessible par tout le JS du site

→ Si ton site se fait injecter un script malveillant (XSS), boom : tout est lisible.

2. Pas chiffré, pas protégé

→ Les données sont stockées en clair dans ton navigateur.
→ Un utilisateur malveillant ou un plugin fou peut fouiller dedans.

3. Pas conçu pour stocker des infos sensibles

→ Jetons, sessions, identifiants ? Évite absolument.
→ Ce n’est pas un coffre-fort. Plutôt une boîte à biscuits... sans couvercle.

4. Pas synchronisé entre appareils

→ Tu stockes un thème ? Très bien. Mais ne t’attends pas à le retrouver sur un autre appareil.


🧼 Bonnes pratiques (à suivre les yeux fermés)

✅ Stocke uniquement ce qui n’est pas confidentiel
→ Préférences d’UI, langue, thème, état temporaire.

✅ Purge ce que tu n’utilises plus
→ Nettoyer, c’est sécuriser. Tu n’habites pas dans un garage rempli d’objets oubliés, si ?

✅ Évite d’y stocker des tokens ou données critiques
→ Si t’as besoin de sécuriser, pense plutôt à des cookies HttpOnly ou à un serveur.

✅ Utilise SessionStorage pour les choses éphémères
→ Une étape de formulaire, un switch temporaire… et pouf, ça disparaît.

✅ Protège-toi des failles XSS
→ C’est LA menace principale pour ces stockages. Valide, encode, filtre, désactive les scripts non fiables.


🧩 À ne pas confondre…

  • Ce n’est pas du cache.

  • Ce n’est pas sécurisé.

  • Ce n’est pas partagé entre utilisateurs.

🧊 Ce sont juste des pense-bêtes du navigateur. Pas des coffres-forts.


📌 En résumé

Ce qu’on peut faireCe qu’on doit éviter
Stocker un thème, un toggle, une langueMettre un token d’auth, une adresse mail
Sauvegarder un état temporaireLaisser les données traîner indéfiniment
Préférer SessionStorage pour l’éphémèreConfondre stockage local et base de données
Nettoyer au logoutCompter dessus pour sécuriser quoi que ce soit

 

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

🔐 La double authentification : deux coups valent mieux qu’un

-
  Imagine ta maison. Tu as une jolie porte d’entrée, solide, avec une serrure rutilante. Bravo ! Mais si un cambrioleur possède la clé (traduction : ton mot de passe), que se passe-t-il ? Exactement : il entre tranquillement pendant que tu bois ton chocolat chaud. C'est là qu'intervient la double authentification , ou 2FA (Two-Factor Authentication, pour les bilingues en pyjama). C’est l’équivalent numérique d’avoir deux portes blindées, un digicode, et un laser anti-intrus : même si on force la première serrure, la deuxième barrière rend la tâche bien plus ardue — presque décourageante pour un voleur en manque d'effort. Concrètement, qu’est-ce que la 2FA ? La 2FA ajoute une deuxième preuve que c’est vraiment toi qui te connectes. Après ton mot de passe, on te demande quelque chose d’autre : Un code envoyé par SMS (un peu fragile, mais mieux que rien) Un code généré par une application dédiée (Google Authenticator, Authy…) Une clé de sécurité physique ...
Lire la suite

📧 “Juste une adresse mail” : pourquoi c’est déjà trop

-
  🎣 “Tu peux me donner ton mail ? C’est juste pour...” Ah, cette phrase. Si douce, si banale. Mais si tu t’arrêtes deux secondes… tu réalises que “juste une adresse mail” , c’est déjà une donnée personnelle de grande valeur . Et voici pourquoi 👇 🧬 Une adresse mail = une identité numérique Ton adresse mail, c’est souvent : Ton identifiant de connexion principal Ta clé de récupération pour à peu près tous tes comptes Un liant entre services (Discord, GitHub, Netflix, etc.) Un morceau de ta réputation numérique Elle peut révéler ton nom, ton âge, ton fournisseur, et même ton historique. 🧟 Que peut-on faire avec une adresse mail ? (spoiler : trop de choses) 1. Lister tous tes comptes en ligne → Grâce aux pages “Mot de passe oublié”, un attaquant peut savoir si tu es inscrit sur tel ou tel service. 2. Lancer une attaque de phishing ciblée → “Salut Charles, ton compte GitHub a été suspendu. Clique ici.” → Si le mail a ton nom + ton service préféré = bea...
Lire la suite

💣 La faille XSS : Qu'est-ce que c'est et pourquoi tu dois t'en méfier

-
  🎭 Qu’est-ce que le Cross-Site Scripting (XSS) ? Le XSS, c’est un type d'attaque où un attaquant injecte du code malveillant (généralement en JavaScript) dans des pages web que d'autres utilisateurs vont consulter . En gros, un script malveillant dans un site de confiance . Ce code peut ensuite voler des données sensibles , prendre le contrôle de sessions , rediriger les utilisateurs vers des pages malveillantes, ou même exécuter des actions sans leur consentement . 🧠 Comment ça fonctionne ? Injection du script malveillant Un attaquant soumet du code malicieux dans un champ de formulaire (comme un champ de recherche, commentaire, ou même une URL). Le serveur accepte ce code sans le valider correctement. Exécution du script Lorsque l'utilisateur visite la page, le navigateur de l'utilisateur exécute ce code comme si c’était du code normal , ce qui permet à l'attaquant d'accéder à des informations sensibles (cookies, stockages locaux, etc.). ...
Lire la suite