Comment stocker en toute sécurité JWT dans une application Web React

Il existe de nombreux articles sur les différentes manières de sécuriser votre jeton Web JSON (JWT) lorsque vous développez une application à l'aide de React JS ou de l'un des autres frameworks basés sur JavaScript.

Il est en fait un peu délicat de cacher votre JWT aux attaquants lorsque vous implémentez une application côté client.

Il y a quelques mois, j'ai mené une enquête approfondie sur la manière la meilleure et la plus sûre de le faire et j'ai fini par définir une solution utilisant les cookies et la récupération de jetons personnalisés.

J'ai donc décidé de publier un article à ce sujet pour ceux qui utilisent .NET Core/.NET 5 SPA, IndentityServer4 et React JS pour implémenter leurs applications Web.

Voici comment nous procédons.

Tout d'abord, nous créons un contrôleur pour gérer le stockage, la suppression et la validation de notre JWT.

Appelons-le AuthController.

Comme vous pouvez le voir, il existe 3 méthodes ici. La méthode Check sera appelée du côté client pour voir si notre jeton est toujours valide. La méthode Save sera utilisée pour stocker le jeton une fois qu'il sera généré par notre IdentityServer. L'application cliente appellera cette méthode et ne lui transmettra le jeton qu'une seule fois. La méthode Delete est utilisée lorsqu'un utilisateur se déconnecte de l'application et lorsque nous voulons supprimer le jeton.

Le jeton sera envoyé au serveur dans un en-tête nommé x-jwt et nous écrirons un Custom Token Retriever pour le lire à partir de cet en-tête particulier.

Écrivons notre CustomTokenRetriever.

Maintenant, nous ajoutons le récupérateur de jetons ci-dessus au code de configuration de notre IdentityServer dans Startup.cs.

options.TokenRetriever = CustomTokenRetriever.FromHeaderAndCookies;

Maintenant, ce dont nous avons besoin, c'est d'un attribut personnalisé pour décorer nos contrôleurs protégés afin d'actualiser le jeton avant son expiration si l'utilisateur continue de travailler avec l'application.

Écrivons cet attribut.

Cet attribut vérifie le jeton à chaque appel d'API et l'actualise si sa durée de vie tombe en dessous de 120 secondes. Vous pouvez modifier cette valeur en fonction de vos besoins. Si vous l'avez remarqué, nous utilisons un service appelé IdentityServerService qui est un service personnalisé qui prend en charge le renouvellement du jeton à l'aide du Refresh Token , du Client Id et du Client Secret .

Je vous laisse cette mise en œuvre de service.

Maintenant, tout ce que nous devons faire pour terminer notre implémentation backend, est de décorer notre contrôleur avec l'attribut.

[JWTRefresher]

J'utilise fetch comme client http et crée le service JavaScript suivant pour prendre en charge ma partie authentification.

Facile!!!

Le service ci-dessus peut être utilisé pour envoyer notre token au serveur, le valider et le supprimer quand on veut.

Comme vous pouvez le voir, aucune utilisation du stockage local pour quoi que ce soit. Le jeton est stocké dans un cookie sécurisé et actualisé côté serveur.