How to retain data securely on browser refresh in angularja? - angularjs

I have authorization data received after calling service. On browser refresh I want retain the data securely and avoid a service call. Please suggest.

Depends upon your requirements if you want to do with angularjs cookie you can go with it or if you can also use local storage.

You can use:
localStorage.setItem('data', data);
or
$window.localStorage.data = JSON.stringify(data);
It won't get deleted on page refresh. You can see data in local storage.
You can use cookies as well, those are used for authorization mostly, it is secure than local storage as well as they can be expired in some time.

Related

Is there any ways to prevent user from modifying cookie via document.cookie in browser?

I'm developing an ReactJS app calling api from my server. After logging in, server returns an authentic-token and I need to store it in cookies (the key is token and value is the authentic-token from server. Now I'm using universal-cookie). But when I assign document.cookie to another value like token=xxx in browser's console, the token in cookies will be modified. Is there any ways to prevent user from modifying the cookie via document.cookie ?
Thank you !
To answer your question, the answer is No. You should never have to trust data from the browser as there are a myriad ways of manipulating it.
Instead you should make sure your backend server validates the cookie.
You cannot prevent a user from modifying the token in the cookies. universal-cookie stores data in a particular way and it shouldn't be altered using document.cookie. Also, you should always validate the data in the cookie with the data in your backend as the user can manipulate the data in any way.
It would be better to use universal-cookie itself to do all the tasks related to cookies you want to do, as you can do almost everything with it. And you can also try out some other packages such as react-cookies

Ionic - How to store session token as globally (for app) accessible variable?

I know I can use localstorage or SQLite but I'm not sure how to exactly do that.
In my app, I'm getting the session token in the Login controller where I make post request to the server and in return get session token.
I'm not sure how to make this token globally accessible.
P.S: I'm very new to AngularJs.
in your controller once you get the token from the server
$scope.token = token;
you can say
localStorage.setItem("token", $scope.token);
then when you want to fetch the token (say in another controller) all you have to say is
$scope.token = localStorage.getItem("token");
Also if they re-open the app you can even check to see if they already have a token
if(localStorage.getItem("token") !== null && localStorage.getItem("token") !== ""){//go ahead and authenticate them without getting a new token.}
Also be aware that on logout if you want to clear the token you can just set
localStorage.setItem("token", "");
but be aware you can only set local storage to strings, not booleans or null.
UPDATE: I see that people are still referencing this, and wanted to add a caveat. On IOS, the local cache seems to be cleared by the OS automatically. I am not sure what triggers this, but I have ran into issues with and users loosing their settings stored in local storage. If that would be an issue for you, I recommend looking at something like IndexedDB, pouchdb, sqllite, or other alternatives.

Session Token Authentication Security

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

AngularJS + Parse.com (Rest API) - Right way to store session token

I'm working with AngularJS and Parse (through the REST API). I am making a SPA and I have the following problem, all variables are erase when the browser refreshes the page. This means the user's session is closed. I thought of storing the session Token in a cookie to avoid this but If someone is able of retrieve this value, he or she could access all the users information.
What is the most secure way of archiving user's session persistence?
Thanks you all very much
Use sessionStorage. It will not be erased upon refresh.

Persisting authentication token in AngularJS

I'm building an AngularJS application that interacts with an API that uses authentication tokens to authenticate users. Everything seems to be working fine, but I'm struggling with a way to properly persist the authentication token between requests.
At the moment, when a user logs in with correct credentials an authToken is returned, and I'm setting that on $rootScope.authToken. I'm also sending that auth token for future requests, but if I do a hard reload reload the webpage with F5 $rootScope gets cleared and I have to authenticate again.
I'm aware I can store the authToken in a cookie, but would that be the most secure way? Am I better off using local storage to store the token? If local storage is used, would that not get cleared when the user restarts their browser? I'd ideally like the login to persist for a few days.
Firstly, I'm not sure what the format of your authToken is but localStorage should not be used for any sensitive data. Using localStorage works great (and survives browser restarts) as long as your authToken is relatively tamper-proof either through some form of encryption or nonce.
Essentially, you should be careful that since the value is "visible" to all client-side users it should be assumed to be possible to modify or increment.
Have you thought about revocation of login sessions? For example, if you want to log out all active sessions of your application, how would you do it? Since the authToken is stored client-side, you may need to add a timestamp (or some other unique value) to it that can be checked server-side.

Resources