React frontend y REST API, CSRF

reactjs cookies

Question

Reaccione frontend con REST API como backend, autorización por JWT, pero ¿cómo manejar la sesión? Por ejemplo, después de iniciar sesión recibo el token JWT de REST, si lo guardo en localStorage soy vulnerable a XSS, si lo guardo en Cookies, los mismos problemas solo si no estoy configurando HttpOnly, pero reacciono no puedo leer las Cookies de HttpOnly (Necesito para leer la cookie para quitarle JWT, y usar este JWT con solicitudes de descanso), tampoco mencioné el problema CSRF, si usa REST como backend, no puede usar el token CSRF.

Como resultado, React con REST parece ser una mala solución y necesito repensar mi arquitectura, ¿cómo puedo ser? ¿Es posible ofrecer a sus usuarios una aplicación de reacción segura, qué han manejado todas las lógicas de negocios en la API REST sin temor a perder sus datos?

Actualizar:

Por lo que he entendido, existe la posibilidad de hacer esto:

1. React realiza una llamada AJAX a la API REST
2. React obtiene el token JWT de REST
3. Reacciona escribe httponly cookie
4. Debido a que reaccion no puede leer la cookie httponly, la usamos como está en todas nuestras llamadas REST donde necesitamos autenticación
5. Las llamadas REST verifican el encabezado XMLHttpRequest, ¿qué es algún tipo de protección CSRF?
6. RESTO revisa la cookie, lee JWT y haz cosas

No tengo conocimientos teóricos aquí, pero parece lógico y bastante seguro, pero todavía necesito una respuesta a mis preguntas y aprobar este "flujo de trabajo".

Answer 1

1. React realiza una llamada AJAX a la API REST

asegurado, un montón de recursos relajantes cliente lib disponible

2. React obtiene el token JWT de REST

Asegurado, esto es lo que JWT debería hacer.

3. Reacciona escribe httponly cookie

No lo creo. No debería funcionar, pero la sesión no es algo tan importante, pronto quedará desactualizada y volverá a verificar la contraseña en las operaciones clave, incluso los hackers la obtuvieron en muy poco tiempo, puede vincule el token de sesión junto con IP cuando el usuario inicie sesión y verifíquelo en las APIs de back-end. Si desea que esté más seguro, solo mantenga el token en la memoria y vuelva a iniciar sesión cuando abra una página nueva o las actualizaciones de la página

4. Debido a que reaccion no puede leer la cookie httponly, la usamos como está en nuestra llamada REST donde necesitamos autenticación

asegurado, verifique el usuario y los permisos a través del token de inicio de sesión, como csrf, puede poner su token de inicio de sesión en el encabezado de su solicitud y verificarlo en las APIs de fondo. Vincular el token de inicio de sesión a su propia biblioteca tranquila le ahorrará muchos códigos

5. REST en las llamadas verifica el encabezado XMLHttpRequest, ¿qué es algún tipo de comprobación lateral de REST de protección CSRF para las cookies, lee JWT desde allí y hace cosas?

Asegurado, como la mayoría de la gente lo hace. Además, vincular el token csrf a tu propia lib relajante te ahorrará muchos códigos

use el token del usuario en el encabezado https://www.npmjs.com/package/express-jwt-token Authorization JWT < jwt token >

use el token csrf en el encabezado https://github.com/expressjs/csurf req.headers[''csrf-token''] - the CSRF-Token HTTP request header.

cliente tranquilo https://github.com/cujojs/rest

reaccionar con jwt https://github.com/joshgeller/react-redux-jwt-auth-example

Answer 2

Su servidor puede configurar la cookie JWT directamente como respuesta a la solicitud de inicio de sesión.

El servidor responde a POST /login con Set-Cookie: JWT=xxxxxx . Esa cookie es solo http y, por lo tanto, no es vulnerable a XSS, y se incluirá automáticamente en todas las solicitudes de recuperación del cliente (siempre que use withCredentials: true ).

CSRF se mitiga como lo mencionó, vea OWASP para más details .