web-dev-qa-db-fra.com

Stockage sécurisé du jeton d'authentification dans React Frontend

Je travaille actuellement sur une seule application de réaction de page. Cette application ne nécessitera aucune connexion et sera disponible publiquement. Je fais une demande POST à un Webhook d'une autre API à laquelle je n'ai pas accès et que je ne gère pas. Cette API m'a obligé à envoyer un jeton d'authentification via le POST. Je me demande comment je peux stocker ce jeton en toute sécurité pour qu'il ne soit pas mis en vente. Je dois l'envoyer tel quel, le stocker dans un cookie fourni par un serveur n'est pas une option. Stocker dans JWT ne fonctionnera pas car je peux décoder cela sans le secret. 

Y a-t-il même un moyen de stocker le jeton sans l'exposer au monde?

J'espère que le problème est clair, sinon laissez-moi savoir et je vous expliquerai mieux.

Merci à tous pour votre temps!

4
Timbo

Je voudrais généralement avoir un serveur Express local en cours d'exécution et proxy la demande par le biais.

Vous devez configurer un itinéraire dans votre application Express que vous souhaitez POST depuis votre interface React, ce gestionnaire d’itinéraires Express appelle ensuite l’API externe du côté serveur qui dispose du jeton à placer dans le dossier. entête. La réponse est ensuite renvoyée à votre serveur React sans que rien ne le sache à propos de l'API externe ou des jetons.

5
Ben Barber

Si vous utilisez create-react-app pour instancier votre projet React, avez-vous envisagé d'utiliser une variable d'environnement pour stocker le jeton? Ce n'est pas sûr à 100%, vérifiez ici pour les inconvénients, mais peut être une solution rapide sans demande de proxy séparée. Vous pouvez créer un fichier .env (assurez-vous de l'ajouter à votre .gitignore si vous utilisez git) à la racine de votre répertoire et y définir des variables. Ils doivent commencer par REACT_APP, comme REACT_APP_SECRET=1234, et peuvent ensuite être référencés là où vous en avez besoin dans votre application avec process.env.REACT_APP_SECRET

En savoir plus sur les environnements dans React ici.

3
Shirley

Vous ne pouvez pas stocker le jeton en face avant. soit vous devez utiliser cookies/session pour stocker le jeton. Si vous voulez stocker le jeton, vous besoin de le chiffrer et de le stocker sera la meilleure option.

Veuillez cocher ici pour comprendre le mécanisme de jeton JWT

si l'application Web ne dispose pas d'un identifiant. vous ne pouvez pas générer de jeton sans les détails de l'utilisateur.

Le jeton doit être passé dans l'en-tête de la demande de meilleures pratiques.

0
Japar Sathik