I'm developing a single page booking application using angular which interacts with my REST API.
I have various routes defined in my application and I'm using local storage to store the state of each page as a user fills in their information. Once the user has filled in everything, I post this to my API, generate a hash and redirect them to a payment gateway before coming back to a results page. The reason for local storage is so we can persist a users filled in details, even if they close the page and re-open it.
I shouldn't store sensitive information such as user names and addresses in local storage though, because this leaves me vulnerable to cross site scripting.
Storing this information on the server would break the stateless principles of REST API's.
Are there any suggestions on how to best architect my application?
Edit: the content below is incorrect. Cookies and local storage are both domain restricted. Local storage's main weakness is that it can be accessed and modified by local users and programs indiscriminately, and that treating the contents of local storage as trusted input opens the door to nasty DOM XSS and stored XSS attacks.
One option would be to use cookies to store the user's information. You could have a cookie per field, set the cookie when the user fills in the field, and read the cookies to populate the fields when the user loads the page.
Related
I have a Create-React application with a settings page in it, inside this settings page, the user has several inputs (form inputs) inside of which he can define certain parameters like backend server endpoint, API endpoints... so here is the problem, how can I persist this data in this application without the need for an additional backend server for my front-end application, please note that I tried using .env variables but I couldn't manage to update those based on user input, config files didn't work too since the front-end app is only alive inside the browser and can't access the files, I also tried using Local storage, it worked but again, I can't persist that to the whole application (since Local storage is bound to the browser, changing the browser will change the data) , lastly I considered using redux and store the configs in the store and update the state based on button clicks, but I'm not really sure if this is the right way to do it.
basically there are several ways to store the client side data in browser; like cookie storage, local Storage, and if you are using redux may be redux with redux-persist could be a great choice for this type of use case.
but as you mentioned you want to persist that data between user sessions of the application, for example you user can access the application from chrome, firefox, or even from his/her mobile browser, honestly for your situation there is nothing rather than store the required input data in database ( backend folks should do this ) and provide the data to the authenticated user in an api. there is no way rather than that!
I am working on a web app that follows dual user-role type: Admin and Investors. I need to disable two users (be it admin type or investor type) to log in simultaneously on a website, which is opened within the same browser but different tabs.
Irrespective of their role type, at a time, either user A(admin) or user B (Investor) can log in. I am using localStorage for this purpose, storing two different key names for admin and investor.
I am new to handling sessions this way. Also, my code is quite big and nested, so I am unable to paste the snippet out of it here.
Any help even regarding how I can follow this approach, will be appreciable.
There are different approaches for handling sessions in client side of your web app, such as cookies and local storage.
In your case I think you should store your app user type and session ID in local storage like this:
s_id: admin_54759eb3c090d83494e2d80494e2d80
So before login app will check for s_id availability in local storage or not. Then in your app login flow you can decide to logout previous user and replace new session ID or just prevent from new login.
But I'd rather to use cookies. One benefit could be setting expiration time for session. For more info check out here.
Every time someone hits an API route I want to store that information in database, connected with req. IP.
Afther I would like to find some association rules based on similar searches.
Should I store some information in cookies or to use local dartabase?
Example on some hotels site:
I want to store info that i got a lot of request for cheap hotels in some specific area.
Thnaks.
Definitely in a database. Cookies wouldn't make sense because
You cannot rely on cookies for persistent data. They can expire, be cleared, etc.
Cookies can hold a very limited amount of data (4093 bytes usually)
Cookies are stored locally on your client's browser, you want information across all of your clients.
Tracking user behavior data is very common web feature. You may want to use a web analytics service such as Google Analytics rather then implement your own.
I would have liked to know what the difference is between LocalStorage and SessionStorage. Also, in the context of authentication, what should be used? Because the user can view and change the content of SessionStorage and LocalStorage in the browser.
Session Storage is deleted as soon as the browser tab in question is closed. Local Storage exists until deleted or it hits its expiration (usually a very long time). Neither should be used for Authentication unless you don't have any private data being thrown around. If it's more of a pet product to keep track of someone being logged in, Local would be the better of the two.
https://www.quora.com/What-is-the-difference-between-sessionstorage-localstorage-and-Cookies
Cookies, session and local storage serve different purposes. Cookies are primarily for reading server-side, local/session storage can only be read by the client-side. In your app, who needs this data — the client or the server?
If it's your client (your JavaScript), then by all means switch. You're wasting bandwidth by sending all the data in each HTTP header.
If it's your server, local storage isn't so useful because you'd have to forward the data along somehow (with Ajax or hidden form fields or something). This might be okay if the server only needs a small subset of the total data for each request.
LocalStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.
I am finding myself placing all my data from my api calls in the device local storage and I am not sure if it matters whether I put things in local storage vs putting them in a service. When should I use local storage from device vs using a Angularjs service?
You are a bit mingled up with concepts. When it comes to angularjs services, they persist data as long as the page is not refreshed, as soon as you refresh your page or close the browser tab, The data's gone.
Consider Angularjs services as mere variables that you declare, which are scoped to the lifetime of your browser tab. Hence, you can use it to store some temporary flags and values that aren't meant to be carried forward to next session.
Whereas, When it comes to localStorage, consider it as a database kind of stuff. Whatever you store in localStorage, is saved inside the browser, and will be available across multiple tabs, and sessions of your apps [Until and unless user clears browser data].
Since you're using Ionic and Cordova, you must use localStorage to save stuff such as user name and password, so that the user can use them the next time he opens your app. Take a note that, closing your app is equivalent to closing a browser tab.
Whereas, if you have certain data that keeps refreshing each time user visits your app, you can use services to store them, so that they are removed as soon as the app's closed.
Metaphorically, localStorage --> Secondary, non-volatile Storage, angularjs services --> Primary, volatile storage.
Data stored in local storage is persistent. So, if you reload you web app the data in local storage is till there. Local storage is typically limited to 5MB. See this
Services are in memory constructs. So, if you place anything in service it is in the browser's memory and are lost when refreshing the browser.
So it depends on what you need.
You can use this localstorage plugin for your app. https://github.com/grevory/angular-local-storage