Est-il sûr de stocker un jwt dans localStorage avec reactjs?

Je construis actuellement une application d'une seule page en utilisant reactjs. J'ai lu que la plupart des raisons de ne pas utiliser localStorage sont dues aux vulnérabilités XSS. Puisque React échappe à toutes les entrées de l'utilisateur, serait-il maintenant sûr d'utiliser localStorage?

Dans la plupart des applications modernes à une seule page, nous devons en effet stocker le jeton quelque part du côté client (cas d'utilisation le plus courant - pour garder l'utilisateur connecté après une actualisation de la page).

Il y a un total de 2 options disponibles: Stockage Web (stockage de session, stockage local) et un cookie côté client. Les deux options sont largement utilisées, mais cela ne signifie pas qu'elles sont très sécurisées.

Tom Abbott résume bien la sécurité JWT sessionStorage et localStorage :

Le stockage Web (localStorage / sessionStorage) est accessible via JavaScript sur le même domaine. Cela signifie que tout JavaScript s'exécutant sur votre site aura accès au stockage Web et, de ce fait, peut être vulnérable aux attaques de scripts intersites (XSS) . XSS, en un mot, est un type de vulnérabilité dans lequel un attaquant peut injecter du JavaScript qui s'exécutera sur votre page. Les attaques XSS de base tentent d'injecter du JavaScript via des entrées de formulaire, où l'attaquant le met <script>alert('You are Hacked');</script>dans un formulaire pour voir s'il est exécuté par le navigateur et peut être consulté par d'autres utilisateurs.

Pour empêcher XSS, la réponse courante consiste à échapper et à encoder toutes les données non approuvées. React le fait (principalement) pour vous! Voici une excellente discussion sur le niveau de protection contre les vulnérabilités XSS dont React est responsable .

Mais cela ne couvre pas toutes les vulnérabilités possibles! Une autre menace potentielle est l'utilisation de JavaScript hébergé sur des CDN ou une infrastructure externe .

Voici à nouveau Tom:

Les applications Web modernes incluent des bibliothèques JavaScript tierces pour les tests A / B, les analyses d'entonnoir / marché et les publicités. Nous utilisons des gestionnaires de packages comme Bower pour importer le code d'autres personnes dans nos applications.

Et si un seul des scripts que vous utilisez est compromis? Un code JavaScript malveillant peut être intégré à la page et le stockage Web est compromis. Ces types d'attaques XSS peuvent obtenir le stockage Web de tout le monde qui visite votre site, à leur insu. C'est probablement pourquoi de nombreuses organisations conseillent de ne pas stocker quoi que ce soit de valeur ou de ne faire confiance à aucune information dans le stockage Web. Cela inclut les identifiants de session et les jetons.

Par conséquent, ma conclusion est qu'en tant que mécanisme de stockage, le stockage Web n'applique aucune norme de sécurité pendant le transfert . Quiconque lit le stockage Web et l'utilise doit faire preuve de diligence raisonnable pour s'assurer qu'il envoie toujours le JWT via HTTPS et jamais via HTTP.

Je sais que c'est une vieille question, mais selon ce que @ mikejones1477 a dit, les bibliothèques et les frameworks frontaux modernes échappent au texte et vous protègent contre XSS. La raison pour laquelle les cookies ne sont pas une méthode sécurisée utilisant des informations d'identification est que les cookies n'empêchent pas CSRF lorsque localStorage le fait (rappelez-vous également que les cookies sont également accessibles par javascript, donc XSS n'est pas le gros problème ici), cette réponse résume pourquoi .

La raison pour laquelle stocker un jeton d'authentification dans le stockage local et l'ajouter manuellement à chaque demande protège contre CSRF est ce mot clé: manuel. Étant donné que le navigateur n'envoie pas automatiquement ce jeton d'authentification, si je visite evil.com et qu'il parvient à envoyer un POST http://example.com/delete-my-account , il ne pourra pas envoyer mon jeton d'authentification, donc la demande est ignorée.

Bien sûr, httpOnly est le Saint Graal, mais vous ne pouvez pas accéder à partir de reactjs ou de tout autre framework js à côté de vous avez toujours une vulnérabilité CSRF. Ma recommandation serait localstorage ou si vous souhaitez utiliser des cookies, assurez-vous d'implémenter une solution à votre problème CSRF comme le fait django .

En ce qui concerne les CDN, assurez-vous que vous n'utilisez pas de CDN étranges, par exemple CDN comme google ou bootstrap, sont maintenus par la communauté et ne contiennent pas de code malveillant, si vous n'êtes pas sûr, vous êtes libre de les examiner.

Fondamentalement, vous pouvez stocker votre JWT dans votre stockage local.

Et je pense que c'est un bon moyen. Si nous parlons de XSS, XSS utilisant CDN, c'est également un risque potentiel d'obtenir également le login / pass de votre client. Le stockage des données dans le stockage local empêchera au moins les attaques CSRF.

Vous devez être conscient des deux et choisir ce que vous voulez. Les deux attaques ne sont pas tout ce dont vous avez besoin d'être conscient, rappelez-vous simplement: VOTRE APPLICATION ENTIÈRE EST UNIQUEMENT AUSSI SÉCURISÉE QUE LE POINT LE MOINS SÉCURISÉ DE VOTRE APP.

Encore une fois, le stockage est OK, soyez vulnérable à XSS, CSRF, ... n'est pas

Ce n'est pas sûr si vous utilisez des CDN:

Un code JavaScript malveillant peut être intégré à la page et le stockage Web est compromis. Ces types d'attaques XSS peuvent obtenir le stockage Web de tout le monde qui visite votre site, à leur insu. C'est probablement pourquoi de nombreuses organisations conseillent de ne rien stocker de valeur ou de ne faire confiance à aucune information dans le stockage Web. Cela inclut les identifiants de session et les jetons.

via Stormpath

Tout script dont vous avez besoin de l'extérieur pourrait potentiellement être compromis et récupérer n'importe quel JWTS du stockage de votre client et renvoyer des données personnelles au serveur de l'attaquant.

Localstorage est conçu pour être accessible par javascript, il ne fournit donc aucune protection XSS. Comme mentionné dans d'autres réponses, il existe un tas de façons possibles de faire une attaque XSS, contre laquelle le stockage local n'est pas protégé par défaut.

Cependant, les cookies ont des indicateurs de sécurité qui protègent des attaques XSS et CSRF. L'indicateur HttpOnly empêche le javascript côté client d'accéder au cookie, l'indicateur Secure permet uniquement au navigateur de transférer le cookie via SSL et l'indicateur SameSite garantit que le cookie est envoyé uniquement à l'origine. Bien que je viens de vérifier et que SameSite n'est actuellement pris en charge que dans Opera et Chrome, il est donc préférable d'utiliser d'autres stratégies pour se protéger du CSRF. Par exemple, envoyer un jeton chiffré dans un autre cookie avec des données utilisateur publiques.

Les cookies sont donc un choix plus sûr pour stocker les données d'authentification.

Une façon de voir cela est de considérer le niveau de risque ou de préjudice.

Construisez-vous une application sans utilisateurs, POC / MVP? Êtes-vous une startup qui a besoin de se lancer sur le marché et de tester votre application rapidement? Si oui, je mettrais probablement en œuvre la solution la plus simple et je resterais concentré sur la recherche de produits adaptés au marché. Utilisez localStorage car il est souvent plus facile à implémenter.

Construisez-vous une version v2 d'une application avec de nombreux utilisateurs actifs quotidiens ou une application dont les personnes / entreprises dépendent fortement. Se faire pirater signifierait-il peu ou pas de place pour la récupération? Si tel est le cas, j'examinerais longuement vos dépendances et envisagerais de stocker les informations de jeton dans un cookie http uniquement.

L'utilisation à la fois de localStorage et de cookie / session de stockage a ses propres avantages et inconvénients.

Comme indiqué dans la première réponse: si votre application présente une vulnérabilité XSS, aucune des deux ne protégera votre utilisateur. Étant donné que la plupart des applications modernes ont une douzaine de dépendances différentes ou plus, il devient de plus en plus difficile de garantir qu'une des dépendances de votre application n'est pas vulnérable à XSS.

Si votre application présente une vulnérabilité XSS et qu'un pirate informatique a pu l'exploiter, le pirate informatique pourra effectuer des actions au nom de votre utilisateur. Le pirate informatique peut effectuer des requêtes GET / POST en récupérant le jeton de localStorage ou peut effectuer des requêtes POST si le jeton est stocké dans un cookie http uniquement.

Le seul inconvénient du stockage de votre jeton dans le stockage local est que le pirate pourra lire votre jeton.

Le cookie localStorage ou httpOnly n'est-il pas acceptable? En ce qui concerne une bibliothèque tierce compromise, la seule solution que je connaisse qui réduira / empêchera le vol d'informations sensibles serait l'application de l' intégrité des sous-ressources .

L'intégrité des sous-ressources (SRI) est une fonction de sécurité qui permet aux navigateurs de vérifier que les ressources qu'ils récupèrent (par exemple, à partir d'un CDN) sont livrées sans manipulation inattendue. Cela fonctionne en vous permettant de fournir un hachage cryptographique auquel une ressource extraite doit correspondre.

Tant que la bibliothèque tierce compromise est active sur votre site Web, un keylogger peut commencer à collecter des informations telles que le nom d'utilisateur, le mot de passe et tout ce que vous saisissez sur le site.

Un cookie httpOnly empêchera l'accès depuis un autre ordinateur mais ne fera rien pour empêcher le pirate de manipuler l'ordinateur de l'utilisateur.

Vous pouvez stocker votre jeton en toute sécurité dans localStorage tant que vous le chiffrez. Vous trouverez ci-dessous un extrait de code compressé montrant l'une des nombreuses façons de le faire.

    import SimpleCrypto from 'simple-crypto-js';

    const saveToken = (token = '') => {
          const encryptInit = new SimpleCrypto('PRIVATE_KEY_STORED_IN_ENV_FILE');
          const encryptedToken = encryptInit.encrypt(token);

          localStorage.setItem('token', encryptedToken);
     }

Ensuite, avant d'utiliser votre token, décryptez-le en utilisant PRIVATE_KEY_STORED_IN_ENV_FILE