web-dev-qa-db-fra.com

React frontal et REST API, CSRF

Réagissez frontend avec REST API en tant que backend, autorisation de JWT, mais comment gérer la session? Par exemple, après la connexion, je reçois un jeton JWT auprès de REST. Si je l'enregistre sur localStorage, je suis vulnérable à XSS, si je l’enregistre dans les cookies, les mêmes problèmes que si je ne configure pas HttpOnly, mais que réagir ne peut pas lire les cookies HttpOnly (j’ai besoin de lire un cookie pour prendre JWT, et utiliser ce JWT avec des demandes de repos). mentionnez le problème CSRF, si vous utilisez REST comme backend, vous ne pouvez pas utiliser le jeton CSRF.

En conséquence React avec REST semble être une mauvaise solution et je dois repenser mon architecture. Comment être?? Est-il possible d'offrir à vos utilisateurs une application de réaction sécurisée qu'est-ce que toute la logique commerciale a gérée du côté de l'API REST) sans craindre de perdre leurs données?

Mise à jour:

Autant que je sache, il y a possibilité de faire ceci:

  1. React effectue AJAX appel à REST API
  2. React obtient le jeton JWT de REST
  3. React écrit le cookie httponly
  4. Parce que react ne peut pas lire le cookie httponly, nous l’utilisons tel quel dans tous nos appels REST pour lesquels nous avons besoin d’une authentification
  5. Les appels REST vérifient l'en-tête XMLHttpRequest, ce qui est une sorte de protection CSRF
  6. REST côté vérifier les cookies, lire JWT et faire des choses

Je manque de connaissances théoriques ici, mais cela semble logique et assez sécurisé, mais il me faut quand même une réponse à mes questions et approuver ce "flux de travail".

restapireactjscookiescsrf
37
MyMomSaysIamSpecial
  1. React effectue AJAX appel à REST API

assuré, beaucoup de librairie client reposante disponible

  1. React obtient le jeton JWT de REST

c'est ce que JWT devrait faire

  1. React écrit le cookie httponly

Je ne pense pas, cela ne devrait pas fonctionner, mais la session n'est pas une chose aussi importante, elle va bientôt devenir obsolète, et revérifier le mot de passe sur les opérations clés, même les hackers l'ont compris très rapidement, vous pouvez associez le jeton de session avec l'adresse IP lorsque l'utilisateur se connecte et vérifiez-le dans vos API d'arrière-plan. Si vous voulez que le contenu soit le plus sécurisé possible, conservez simplement le jeton en mémoire et relancez la connexion lorsque vous ouvrez une nouvelle page ou une actualisation de page.

  1. Parce que react ne peut pas lire le cookie httponly, nous l’utilisons tel quel dans notre tout REST appel pour lequel nous avons besoin d’une authentification

assuré, vérifiez les utilisateurs et les autorisations via un jeton de connexion, comme csrf, vous pouvez mettre votre jeton de connexion dans l'en-tête de votre demande et le vérifier dans votre apis backend. Lier le jeton de connexion à votre propre bibliothèque vous économisera beaucoup de codes

  1. REST on call vérifie l'en-tête XMLHttpRequest, qui est une sorte de protection CSRF REST contrôle de cookie, lit JWT et effectue des tâches

assuré, comme le font la plupart des gens. En outre, lier le jeton csrf à votre propre bibliothèque reposante vous épargnera beaucoup de codes

utiliser un jeton utilisateur dans l'en-tête https://www.npmjs.com/package/express-jwt-tokenAuthorization JWT < jwt token >

utilisez le jeton csrf dans l'en-tête https://github.com/expressjs/csurfreq.headers['csrf-token'] - the CSRF-Token HTTP request header.

client reposant https://github.com/cujojs/rest

réagir avec jwt https://github.com/joshgeller/react-redux-jwt-auth-example

16
Josh Lin

Votre serveur peut définir le cookie JWT directement en réponse à la demande de connexion.

Le serveur répond à POST /login avec Set-Cookie: JWT=xxxxxx. Ce cookie est uniquement http et donc non vulnérable à XSS, et sera automatiquement inclus dans toutes les demandes de récupération du client (tant que vous utilisez withCredentials: true).

La CSRF est mitigée, comme vous l'avez mentionné, voir OWASP pour détails .

2
user3099140