JS hybrid app - storing token in localStorage - javascript

I'm developing a hybrid app where the user has the possibility to click "remember me" when logging in with username and password. In case user has only 1 "stored" account it automatically logs him in, but in case he has more than 1 "stored" account, the app shows him the list of the available accounts (like the one when logging into Gmail).
To implement the above behaviour, I have come up with this procedure:
At the first login the username and password are sent to server via HTTPS
If the credentials are correct, the server generates a token with such procedure:
merge username and password hash into a string
hash the string again with SHA and a server secret
substitute the chars in the string
create a N-char string (token) from the string
This token is then sent back to the device and the username and this token are stored to LocalStorage
From now on the user logs in with the username and this token (automatically or when clicking the account he wants to login into)
Would this be secure enough or should I improve something? I'm a bit worried though about storing usernames into LS, but that's the only information I have when showing the user what account he's logging into.
Edit: There can be several different people (for instance family members) logged in the account, because the app controls a device.

For the part about generating tokens you can look into something called JWT. As said on the page JWT is a "method for representing claims securely between two parties", which means you can use it to verify that the user using your page is in fact who he states to be. For the other parts, what you came up with is a preety standard strategy (user signs in, gets token, uses this token to use the app without needing to sign in again).
Simple explaination about JWT since you had a lot of questions:
JWT consists of three parts Header, Payload and Signature. Header and Payload are public (ie. user having the token can read them, they are only Base64 encoded), so don't store secret data inside them (althrough username and password hashed with salt should be fine). When you generate jwt, server calculates hash of header+payload+secret (secret known only to server) and puts it in the signature. Then when user tries to authenticate the signature must match with the data (since server again hashes header+payload+secret and compares it with signature) and only then it is accepted by server. This way without knowing the secret user can't change the data by himself.
JWT also implement "out of the box" one additional feature you might be interested in - expiration time. This way you can automatically logout users if they haven't used the page for certain periods of time. As to refreshing tokens there are a couple of ways and you need to deicide yourself whats the right way for you, Link

Related

How should I encrypt passwords for API access without showing off the algorithm to the client?

I have a REST API (.net) which for the initial login requires the password to be encrypted (RSA with OAEP). The reason was to obscure the users passwords from local logs.
Performing this encryption with javascript is complicated and I would need to let the client know the public key. The end user would be able to reverse engineer the encryption method then could use it to brute-force (or worse) access. So why bother, right (it is SSL Secure).
Thing is, I still need that password to be encrypted. Should I have some sort of encryption service at the server side that gives me the password to throw at the token endpoint? Why not have the service just log in for me then return the token. How should I proceed?
Thanks ^_^
This seems like a general authentication question. You can solve it like you would solve user authentication. Think of it this way:
When a user signs-in into your app, they provide their data on the client, and then it is validated on the server. In order for them to stay logged in, they get some sort of token, either via a Cookie session, JWT or whatever. Which is then saved on the client and sent on each request to the server in order to verify they are authenticated.
The above is how websites can show "registered users only" content. By validating a previously given token on each new request.
Now, applying this method to your REST Api. A user needs to request a token (which should not be your master password, but a uniquely generated one, in a per-user basis), and then save it locally for X amount of time. Every time the user makes a request to the API they send that token, which is validated.
This is also how normal APIs do it. You will need a token or some sort either way. If it's really sensitive information you're showing, the token should update every now and then (from minutes to days depending on how sensitive). You keep a record of valid tokens in your server. That way, if any token is "stolen", then it will only be valid for a small amount of time.

Passport js - Should I return the users encrypted password or token?

This is a pretty open question but I just can't get a straight answer no matter where I look. The question is in the title but...
Should I return the user's encrypted password or token on user login
Extra Info
I'm running a MEAN stack application with Angular5. I'm using sessions for the user and storing it in MongoDB. So from what I understand, the session cookie is what used to authenticate the user for extended sessions and not the password (I haven't gotten to Facebook or Twitter strategies but from what I understand the cookie verifies the user instead of the token that Facebook/Twitter gives me correct?).
I do want to pass user data to my Angular application and store in the browser local storage for quick, non-server-side verification that the user is logged in. This is only for aesthetic reasons such as displaying username and profile picture. Restricted POSTs and GETs still require server-side verification using a passport. So my question is since the session is saved in the cookie, is there any reason to send the password or token to the user/browser? Even though the password is encrypted (using bcrypt), it still seems like an unnecessary security hole to send it at all. Is there a reason that I might encounter in the future where I would want the password stored in the browser?
The quick answer is no, you do not and SHOULD NOT pass the sensitive data back to the front end.
What I normally do is when I return a "User" object back as a response to the front end, I run it through a helper function that filters out sensitive data such as the encrypted password and the salt, etc...

How to use a JWT token as login validation?

I'm making a login page and I've found that JWT tokens are preferred over sessions but I don't understand what to do with a token.
I send user and password uncrypted with ajax to server and validate the user in a php file which then returns a JWT.
What should I put in my JWT? Do I only check for a token to know if the user is logged in or do I process it somehow to check if it's the right token? If so, how?
So far I've seen examples on client side where you only check if token exists but why should I have hashed data as token instead of a 1 or a 0. I don't get the advantages of this method.
EDIT: Should I both request a JWT token which I store in session storage and store what the user types in the log in field also in session storage and then compare them with eachother every time the user reloads the page?
Looks like we need basics of how JWT works here:
The client sends username/password to the server using ajax.
The server checks username/password and if they are valid, creates an encrypted token, which the only server can read and understand.
Server takes into account various fields (also known as "Claims") like "iss" (token issuer) and "Sub" (Subject of token), whole list here.
We can custom fields like user-id which can be used later while validating token.
Server sends token back to client through response. Client saves this token in local storage or some variable.
With each further request, client sends this token as header.
Server examines and validates this token, gets require info from this token like user-id and responds to the user appropriately if valid. Token may also contain expiry date/time, so after a certain time, the server may choose to refuse to serve a client.
While this may not directly answer your question, it clarifies basic workflow of GWT.

Is it a secure way to handle returning user in ember?

I am using ember to write a web ui for a site that requires user to log in. Suppose the browser has stored some cookie from last login of a user. Now the user visits the site again. So, is it a secure and common way for ember to log the user in automatically based on the cookie from the last visit? If so, what are the common ways to implement this? (I can't find anything from Google.) Furthermore, how do I create the cookie upon login? Is it a common way to just put a user id, password hash, and expiration in the cookie?
Additionally, any references related to this subject are greatly appreciated.
Edit 1
In light of Vohuman's answer, I think I can make my question a little more specific. Basically, what I want to know is a common and secure implementation to keep a user logged in, even when they close and reopen the browser. Namely, the life time is beyond the session scope. Take linkedin for example. If you are logged in and exit the browser. Then next time you revisit linkedin, you are still logged in automatically. Right now, what I can picture is a solution like the following.
When you first log in to the site, the server will return a cookie which includes an authentication hash token. Then next time when you revisit the site, the server will receive the hash token and thus authenticate your session.
So, is above flow basically what people usually do to keep a user logged in? If so, is the JSON Web Token (JWT) basically one way to construct the hash token I mentioned above? Additionally, assuming the connection is HTTPS, this approach seems secure to me. Is it not?
Edit 2
This article gives an interesting discussion regarding where to store the access token.
is it a secure and common way for ember to log the user in automatically based on the cookie from the last visit?
Yes and no. Security is a complex topic. Usually session cookies are used for authorizing users. This is actually the most used method of keeping the users logged in. If the user can't keep his credentials secure then any layers of security can be vulnerable.
For Single-page applications usually access tokens are used instead of cookies and sessions. The client sends the user credentials and server returns an access token. The token is encrypted and expirable and can be stored in localStorage or sessionStorage. Using JSON Web Tokens (JWT) standard is a popular method for implementing user authentication and authorization in web services. As an example, the Facebook Open Graph API uses access tokens.
JSON Web Token (JWT) is a compact, URL-safe means of representing
claims to be transferred between two parties. The claims in a JWT
are encoded as a JSON object that is used as the payload of a JSON
Web Signature (JWS) structure or as the plaintext of a JSON Web
Encryption (JWE) structure, enabling the claims to be digitally
signed or integrity protected with a Message Authentication Code
(MAC) and/or encrypted.
edit:
So, is above flow basically what people usually do to keep a user logged in?
For traditional websites, yes.
The whole point of using access tokens is keeping the web service/API stateless. This means that server doesn't have to store any cookies/sessions for authenticating and authorizing users. The stateless is one of the key factors of implementing web services that follow the REST paradigm. It's client that has to store the token and send it to the server (via the Authorization header or query parameters). The server doesn't store the token. Of course, you can store the tokens on the server if you want to add another layer of security, but it's not so common and not necessary. Storing the tokens on the server can also make your application vulnerable to database attacks and is not recommended.
If you want to make the process more secure you can decrease the validity time of access tokens (1 hour, 1 day or 1 week, it's up to you).
As for localStorage, is it secure?
localStorage data are stored separately for each origin (domain). A malicious user can only read the data if he/she has access to the user browser. You should make sure that your app doesn't have any XSS vulnerabilities so malicious users can't inject any scripts to your application. This is actually a different topic.

Protecting user sign-up API

I am currently writing an HTML5 web app with a Sails.js (node framework) backend. Right now, most of my APIs are secured against the user authentication system I'm using with PassportJS. Unauthorized users trying to use my APIs will get a 401 error.
However, there's one hole in the system, which is the sign up API itself. I obviously can't secure my sign up API with user authentication (because the user wouldn't have had an account to sign in with yet), therefore anyone could easily spam the API with many fake accounts. On my sign up page, I have a small verification question on the lines of "What is 2+2?" (it is generated randomly) and it is checked on the client and if the answer is correct, the client sends a request to my sign up API route with all the necessary parameters like name, birthday and username. How can I secure this API to ensure that people must go through my sign up page, and cannot simply bypass this security measure and call the API directly?
Just as a note, my APIs are not RESTFul.
There are multiple possible ways.
First of all, you may consider adding a rate-limit to IP addresses. This is NOT 100% effective, but will certainly slow down some spam attempts. For example, you can limit the number of accounts created by the same IP address to 5 every 5 minutes.
Secondly, if you want to use some sort of captcha, consider reCAPTCHA. Among the different captcha services, this is particularly effective against bots, as they especially use words that fail OCR recognition.
Eventually, to make sure that people actually visit your signup page before calling the API, you can use a "security token". This is the same technique that is used for example to protect against CSRF (Cross-Site Request Forgery) attacks.
When the server generates the signup page, it also passes to the client an hidden field (for example "token") that contains a uniquely-generated value. The client will submit this value along with the form back to the API server when it requests the creation of a user, and the server uses the token to validate the request.
There are basically two approaches to generate these tokens.
First method
The signup page creates a random string/number and stores it in the database to be used as token. When the user submits the form, the server searches for that token into the database: if it's present, then the submission is valid; otherwise it fails. The token is then removed from the database.
Additional security can be obtained by storing into the database, along with the token, an expiration date and the client's user-agent (unlike IP's, user-agents are unlikely to change during the same session).
Pros: each token can be used only once.
Cons: the app needs a database, and it will be queried 3 times just for the token insertion, validation and deletion (requiring time and adding load to the database). You also should to purge regularly expired tokens from the database.
Second method
The signup page creates a token by digitally signing a plain-text string containing all the validation information. For example, suppose that you want to create a token that expires on 1411660627 (UNIX timestamp) and it's associated with the user-agent "Mozilla/5.0 ...". The server also possesses a secret salt (for example "123456abcde") that needs to be unique for the application and kept secret.
The signup page generates the token in a way similar to:
Create a plain-text string to be signed, by concatenating all the information. For example, if the expiration is 1411660627 and the MD5-hashed user agent is 0f7aee3e0a65ff9440d2a0183b4b1f49, your base signature would be something similar to: 1411660627-0f7aee3e0a65ff9440d2a0183b4b1f49.
Append the secret salt to that string: 1411660627-0f7aee3e0a65ff9440d2a0183b4b1f49_ 123456abcde.
Hash that string, using any hashing algorithm (for example MD5). The result is your signature: 0742d84065cb9497c1ba4c1d33190a93.
Concatenate your signature to the plain-text string to obtain your security token: 1411660627-0f7aee3e0a65ff9440d2a0183b4b1f49-0742d84065cb9497c1ba4c1d33190a93. This is what the user received and has to submit back.
To verify the token, then, a similar operation is done. When the server receives the token 1411660627-0f7aee3e0a65ff9440d2a0183b4b1f49-0742d84065cb9497c1ba4c1d33190a93, it performs these steps:
Extract the expiration from the token and check if it's still valid. If 1411660627 is smaller than the current timestamp, then it's still valid.
Compute the hash of the user agent and check if it matches the one on the token: 0f7aee3e0a65ff9440d2a0183b4b1f49.
Re-generate the signature as before: expiration-useragent_secretsalt using the data from the security token received from the user. In our example: 1411660627-0f7aee3e0a65ff9440d2a0183b4b1f49_ 123456abcde.
Compute the hash of the string as before. If it matches the third parameter from the token (0742d84065cb9497c1ba4c1d33190a93), then the security token is valid.
Pros: this solution does not require a database, but it's equally safe (as long as the salt is kept secret into the server).
Cons: the same security token can be used more than once until it expires.
It sounds like you're not making full use of your math-problem countermeasure--you're using it as a client-side barrier, but as you observed, a bot could just skip the client side and call your API. To make it more effective, instead of generating the question randomly on the client, you would generate it on the server, save the answer in the session (req.session.mathProblemAnswer = 4) and then send the user's answer with the API call so that it can be checked against the answer in the session.
Using a token as #Qualcuno describes in his answer will be effective against bots spamming your API endpoint directly, but there are bots that are smart enough to load your signup page, scan for hidden fields and submit the form (including the token). It's still a good idea to use CSRF protection though in general, which Sails has built-in support for.

Categories

Resources