I am developing a project using Django REST API (backend) and React JS (front end). I am using Json Web token for authentication. But I am confused at the point that whether should I store Json Web token in local storage or in the cookies? Which one is more safe and why? How big companies handle this kind of security between API and client side?
The fundamental question is more secure against what?
The primary threat is cross-site scripting (xss). With regard to that, a cookie is definitely more secure, if and only if it is set as httpOnly.
However, if the auth info is in a cookie, cross-site request forgery (csrf) becomes an issue, and you have to implement csrf protection. Not the end of the world, but you need to care about it. If you store the auth token in localstorage and send it as a header, csrf is not an issue.
Also cookies with an expiry (persistent cookies) often get saved to plaintext files on the client, which may or may not be a valid threat in your threat model.
So in short, it depends. Overall, storing the token in an httpOnly, secure cookie is usually considered the most secure, but it has implications as described above. Storing the token in localstorage is acceptable too in most cases. Even more so because if you need to send the token to multiple backends (on different origins), you can't have it in a cookie, because that would only be sent to its own origin.
As always, the devil is in the (implementation) details.
Related
which one is better and why :
set JWT token in request headers by frontend developers
or set in cookie by backend developers ?
For security reasons, it's recommended for the token not be accessed by client applications directly as it leaves it vulnerable to many client side attacks, like XSS and etc. HTTPS cookies are considered the secure option when handling tokens between server and client (XSRF is usually considered less of a problem to deal with). There are some catches, like maximum size of a cookie, client support, but it shouldn't be an issue in most cases. For more information about vulnerabilities and how to deal with them, checkout the OWASP cheat sheet: https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
I've spent a few days trying to figure out a secure authentication method for SPA/React (client-side).
Most of the tutorials I've read in the wild contradict each other.
One says have to store in Cookies another in Local Storage, one says don't need to use refresh token, one says have to use a refresh token.
I'm building a React SPA app for the frontend and Express for the API (backend). Both are stored in the same domain:
React: example.com
Express: api.example.com or example.com/api
Is it enough to secure my application by using Cookie (access token JWT):
httpOnly:✅
secure: ✅
sameSite: strict
without refresh token
This matches the answer here: https://stackoverflow.com/a/57779076/11340631
The question is:
Is this safe enough?
How long does it take to set the expiration of the access token?
Is this as per Oauth recommendation?: https://datatracker.ietf.org/doc/html/draft-ietf-oauth-browser-based-apps
What if my access token is stolen? For example, my friend is using my PC and he stole my cookies and use it in his PC browser.
I really hope to get the answer here, any answer is appreciated.
It's safe against extracting the token with Cross Site-Scripting, but, without other security controls it might be prone to Cross Site Request Forgery (cookies are automatically attached to a request). Is API accepting key in the cookie or must it be sent in the Authorization Bearer header?
My concern is, that if you're not using refresh token, the access token must have a relative long expiration. OAuth2 was not intended to be used to authentication alone, but together with some session-like solution, for example OpenID Connect and SSO.
The shorter the better, unless it can be revoked any time server-side. If there's no way to revoke the key, the 5 minutes expiration date is, in my opinion maximum. That's why refresh token and session-like endpoint is the must.
OAuth is not designed for web application client's authentication at all. That's the common anti-pattern in many projects I've pentested. https://oauth.net/articles/authentication/
I'm glad for your awareness of such a threat. Access tokens must either live very shortly, or they must be revoked server-side in a some way, for example by utilizing some kind of revoke-list. Or the refresh token with server-side-like session endpoint should be utilized.
so I was was wondering, since react escapes HTML, and doesn't really allow XSS when using normal input/ forms, is it safe to store JWT in Storage, and then sending it using the Authorization HTTP header, or would it be safer to store the jwt in a secure/HTTPonly/SameSite cookie?
I'm sorry if this is a noob question, but I've read a lot of articles on the subject but none that has clearly answared the question, I get that using cookies is more secure against XSS (With the HTTP only flag) but more vulnerable to CSRF attacks (Less so with the sameSite flag), but since we are using react (Which doesn't allow XSS) and sending it in an Authorization header (Which doesn't allow CSRF) wouldn't that be safer?
the main point is that web-storage are accessible from javascript. Due to this reason your code or some of your dependencies can contain a security hole that will steal your token. However, old-school cookie allow you to configure a data that will not accessible by javascript (Http-Only) and a data that will be stored only on secure connection (Secure).
I need some advice regarding using session tokens to authenticate users. I am building an AngularJS app which uses an API to tie in with the backend. I am only building the front end, not the backend. The documentation states that all calls to the API have a session token attached in the body of the request (POST).
I would like to know about the security of storing this token in localStorage. That is where I am storing it now and retrieving and attaching it to each API request. After login, the server sends the session token in the body and I save it from there.
There is no documentation about an x-access-token header that should be sent with the request made to the server. It is not being checked server side. What are the implications of this? I feel that it is susceptible to attacks without this added layer of security.
My main concern is the security of this setup. I want to know what the best setup is to make sure this app is as secure as possible and recommend changes to the way the backend is setup to facilitate this.
Thanks!
As you tell, you are only working on the UI part and not the backend. It is up to the backend team to ensure headers are properly evaluated and security is enforced (btw request headers do not belong to request body). Just put the token into the x-access-token header as they tell.
Storing the token inside the localStorage gives you a little more control over the cookie: You will not accidentally send it to unnecessary URLs. However, older browsers do not support it - you may need to use a shim for that.
In a case of SPA, you may consider not storing the token at all: It could be fetched each time your application is accessed and then stored within a service in angularjs, but it depends how your fetch/login operation is implemented (is it always interactive, how long does it take, etc).
I would suggest use $cookies rather than localstorage. As localstorage does not support some legacy browser.
I am using cookies to store token in my project
I've read almost every answer on SO and some blog postings, but I can't figure out one simple thing. In a simple token authentication scheme where the server generates a token and sends it back to the user after verifying credentials, how does the client store and then resend that token in each request? I have seen both cookie examples and header examples. I would like to use the HTTP Headers if possible, but I can't figure out the mechanics of how to send the token to the client, where it will sit, and then have it sent back in the header upon requesting a REST resource.
I am using Jersey/Guice with AngularJS on the front end. Here are the resources I started with:
http://porterhead.blogspot.co.uk/2013/01/writing-rest-services-in-java-part-6.html
Session management : How to generate Authentication token for REST service ? (Jersey)
It depends on your needs. You can use HTTP basic or digest auth, if it is appropriate for you. If not, then if you don't need a permanent storage, you can store credentials in memory. If you need a permanent storage, then you can store them in localstorage, or any other client side storage, but aware, that they are considered not secure.
Anyways I think if your client or service is compromised somehow with xss, then you lost, and it does not matter what else you do about it. Otherwise you can send the credentials in plain text securely as long as you use HTTPS with proper settings. (But that's just an opinion, I am not a security expert, at least not in this topic.) So I think you should concentrate on not being xss vulnerable. For example you should use the proper headers and filter the input against js injection (and by firefox data URI injection). And use TextNode in your client instead of innerHTML wherever it is possible.
For example if you are using Javascript you can store the token in localstorage like window.localStorage["token_id"] on the client side.