React frontend with REST API as backend, authorisation by JWT, but how to handle session ? For example after login i get JWT token from REST, if i save it to localStorage i am vulnerable to XSS, if i save it to Cookies, same problems only if am not setting HttpOnly, but react can't read HttpOnly Cookies (i need to read cookie to take jwt from it, and use this jwt with rest requests), also i didn't mention CSRF problem, if you using REST as backend, you can't use CSRF Token.
As a result React with REST seems like bad solution and i need to rethink my architecture, how to be? Is it possible to offer your users secure react application what have all business logic handled on REST API side without fear to lose their data?
Update:
As far as i understood, there is possibility to do this:
- React makes AJAX call to REST API
- React gets JWT token from REST
- React writes httponly cookie
- Because react can't read httponly cookie, we use it as-is in our all REST call where we need authentication
- REST on calls checks XMLHttpRequest header, what is some kind of CSRF protection
- REST side check for cookie, read JWT from it and do stuff
I have lack of theoretical knowledge here, but looks logic and pretty secure, but i still need an answer to my questions and approve of this "workflow".
2 Answers
Answers 1
1.React makes AJAX call to REST API
assured, lots of restful resource client lib available
2.React gets JWT token from REST
assured, this is what JWT should do
3.React writes httponly cookie
I don't think so, It should not work, but session is not such a important thing, it'll soon get out of date, and recheck password on key operations, even the hackers got it in a very shot time, you can bind session token together with IP when user login and check it in your backend apis. If you want it most secured, just keep token in memory, and redo login when open new page or page refreshes
4.Because react can't read httponly cookie, we use it as-is in our all REST call where we need authentication
assured, check user and permissions through login token, like csrf you can put your login token into your request header, and check it in your backend apis. Bind login token to your own restful lib will save you a lot codes
5.REST on calls checks XMLHttpRequest header, what is some kind of CSRF protection REST side check for cookie, read JWT from it and do stuff
assured, as most people do. Also, bind csrf token to your own restful lib will save you a lot codes
use user token in header https://www.npmjs.com/package/express-jwt-token Authorization JWT < jwt token >
use csrf token in header https://github.com/expressjs/csurf req.headers['csrf-token'] - the CSRF-Token HTTP request header.
restful client https://github.com/cujojs/rest
react with jwt https://github.com/joshgeller/react-redux-jwt-auth-example
Answers 2
Your server can set the JWT cookie directly as a response to the login request.
The server responds to POST /login with Set-Cookie: JWT=xxxxxx. That cookie is http only and therefore not vulnerable to XSS, and will be automatically included on all fetch requests from the client (as long as you use withCredentials: true).
CSRF is mitigated as you mentioned, see OWASP for details.
0 comments:
Post a Comment