Comment puis-je gérer la sécurité dans mon API de réaction avec des rails?

Question

J'ai cherché des réponses toute la journée et je n'ai rien trouvé qui m'a aidé.

Je travaille actuellement sur une plateforme développée dans React et une API Rails. L'API My Rails utilise devise-devise pour gérer la sécurité et l'authentification (https://github.com/lynndylanhurley/devise_token_auth). Je n'utilise pas React-Redux.

Le frontend React a des pages publiques (comme une connexion) et des pages privées, où la connexion est requise (un jeton d'accès valide).

Je stocke le jeton d'accès, l'uid et le client dans le stockage de session (ces 3 paramètres proviennent de la réponse de connexion) et le jeton d'accès est envoyé dans l'en-tête de chaque requête.

C'est ce que je pensais:

1. Une fois l'utilisateur connecté, stocker la réponse dans la mémoire de session et aussi dans un objet javascript. Cet objet sera présent sauf si l'utilisateur actualise la page ou la ferme et la rouvre.
2. Chaque fois que l'utilisateur accède à une page privée, avant que le routeur réactif ne renvoie le composant, je vérifie si mon objet javascript LoggedInUser a quelque chose. S'il n'y a rien, j'appellerai le point de terminaison "validate_token" avec le contenu de stockage de session, car cela signifie qu'il s'agit d'un utilisateur qui revient. Si c'est valide, enregistrez-le dans l'objet javascript appelé "LoggedInUser". Si ce n'est pas le cas, redirigez-vous vers la page de connexion.
3. Si je n'ai rien sur mon objet LoggedInUser ou dans le stockage de session, je redirige vers la connexion.

Mes questions est:

1. Comment puis-je faire mes pages privées sûr, si nous parlons toujours des variables javascript et ajax appels (côté client)? Un utilisateur non autorisé peut déboguer mon fichier javascript, créer du contenu dans l'objet "LoggedInUser" et voir mes pages privées. La personne ne pourra pas voir de contenu car toutes les demandes avec le jeton non valide renverront un 401, mais elles pourront toujours voir mes fichiers HTML ou statiques, ainsi que les requêtes existantes vers l'API.

Merci beaucoup!

Answer 1

Comment puis-je faire mes pages privées sécurisées

Si sont tous regroupés dans votre pkg, vous ne pouvez pas. Cependant, vous pouvez servir les modèles et charger les données du serveur uniquement pour les utilisateurs autorisés.

Une autre option:

votre application hôte privée sur le serveur, et servir uniquement aux utilisateurs autorisés. Webpack vous permet de charger des modules particuliers en cas de besoin (chargement paresseux). Je crois qu'avec cette technique, vous pourriez empêcher certains modules d'être servis à des utilisateurs non autorisés.

Mais la logique doit être fait sur le côté serveur:

https://webpack.js.org/guides/lazy-load-react/