I realize this might not be a best fit for SO, so please tell me where I should move/post this if that is the case.
My idea is after a user signs into the system, store the user preferences on the client in the form of cookies. If a user modifies said preferences, update the cookies. I need to do this because some of the preferences are client related and will need to be looked at via JavaScript.
I realize I'll need the preferences stored on the server as well. Just wanting to know if pulling them down into cookies is a good idea. My app is primarily ajax driven so I'd like to pull the preferences down once and just store them. I don't want to push them with each server request.
I'd like to avoid things like Local Storage so that I don't have to worry about browsers as much. Cookies seem to be supported heavily by all browsers.
Anyone concur or have a better way?
EDIT now that you've changed the question from when we first wrote answers:
If you are storing the preference data on the server, then there is no reason to keep preferences data on the local user's computer between visits As such there is no reason to put the data in a cookie as it just increases the size of every client/server roundtrip and takes storage on the client computer necessarily.
Instead, I would suggest that you simply put a preferences object in the page's javascript like this:
var userPref = {theme: "fun", permitContact: false, lastDisplay: "threaded"};
Then, you can get access to the preference values via javascript from any page with code like this:
if (userPref.lastDisplay == "threaded") {
// do something
}
Old answer before the question was edited:
If you want the client preferences to work from different browsers that the client might use, then you should store the preferences on your server (highly recommended). You can make them available in the web page at any time, by just including a small amount of javascript in each page that sets the properties of a preferences object to the value of the user's preferences. And, then you can have a preferences page where the user can modify/update the preferences and store the newly changed prefs back on the server again.
Cookies are for temporal state that may get cleared at any time and will only ever work on that particular computer. Plus, if you use cookies and if userA logs out and userB logs in on the same computer, the preferences will be wrong for userB.
Generally cookies are a good idea, provided that you don't have to store a lot of data. Just few things to keep in mind when using cookies to store stuff:
user can edit the preferences by hand so make sure you don't have things like is_root=false without additional server side checks.
this can be annoying when user removes cookies and preferences are gone, I would go for a server side preferences storage mirrored to cookies so JavaScript can use them.
Other possibility would be to serve dynamic JavaScript, with inlined preferences, instead of static files - you could serve JavaScript the same as you serve dynamic HTML, but then you have to be careful with caching.
You'll need to store the preferences on the server either way, as you don't want to trouble your user with having to re-create their personal settings every time they sign on with a different computer.
Just store them serverside.
Related
Background:
I'm a tech writer at our company. I dabble in Javascript from time to time, and I consider my js skill level to be maybe advanced beginner/early intermediate.
Anyway, we have Help content created by Adobe's RoboHelp (version 2017). The Help content is static HTML5 .htm pages. The Help gets installed into a folder as a bunch of static .htm pages on our users' computers when they install our product. The users open our .htm pages in their browser via the file:// protocol.
Our Goal:
On our first intro page of our Help, we're planning on showing a "What's New" .htm file inside of an iframe, but we only want to show it the first time a user accesses the documentation.
What I Know and Have Tried:
I know on a real web server, I'd probably just use cookies to control this. But on a local computer, cookies aren't persistent, and after the session closes, the local cookie storage gets deleted.
I know that Javascript accessing the file system unfettered is a security no no and isn't possible.
I've looked into the FileSystem API but the things I've read indicate that it is dead and not in the standard going forward.
My Question:
Is there some other way in Javascript to have limited trusted access to a single settings file etc for this kind of thing? If so, what is the best / recommended way that keeps the user's computer secure but allows us to store and modify settings in a limited fashion so the user has the best experience?
Note that many of these users probably won't have access to the Internet at all, since their computers will be on a factory floor, so a solution that doesn't require talking back to the Internet is ideal.
I assume most of our users log onto their computers with a standard (non-admin) level login. How many users on the same computer will vary, and I don't have that info, though I think it's likely there will be different shifts that use the same computer.
I'm planning on just storing something simple, like boolean values (ie True/False for if this is the first time they've seen the What's New page etc).
Some questions:
Does a user login? What sort of information is planned on being stored?
How many users will be using the same computer?
It's not strictly secure. I wouldn't store any passwords, and personally identifiable info in localStorage, however there are some caveats ( Storing Credentials in Local Storage ), https://softwareengineering.stackexchange.com/questions/152763/html5-localstorage-and-encrypted-sensitive-data ( however if it's on a computer not connected to the internet, then maybe something simple with encryption, might be ... okay )
Might have a look at localStorage.
https://stackoverflow.com/a/44358718/2026508
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
In web application , How secure is local storage in Html5 or else is there any other way to secure the sensitive data in local storage.
Project Structure:
Front End: Html5,Angular js, Middletier: Asp.net webApi , BackEnd :Sql Server.
Once user login into the page, that credentials is encrypted by using some cryptography algorithms.It will be stored in db.
After that every child action like products list, order details, book history ,add product need to validate that.
While refresh after the page, data gets lossed so need to persist the data so i have choose localstorage. stored the username and password encrypted using some js algorithms and in put in local storage.
I feel it as not safe , because of any one can steal the data from the browser tools.
Is there any alternative approach in this scenario or else this approach is secure.
can anyone help me to process.
There is something that every Webapp Craftsman must know:
There is no repository beyond your firewall that can be fully secure. Why? Because the open door that you NEED to allow your application manipulate the data is accessible to everyone.
Imagine that you decide to encrypt the content of the local storage.
This will prevent someone with access to the browser's local storage (e.g. the developer tool) to be able to read/write the data. But how your application will access the data? You have two options:
Send the encryption algorithm + passphrase within the client-side app. This will expose all your data if someone manage to read the code of your app and access to memory of the browser (e.g. the developer tool)
Send every data from the client-side to the server to be decrypted there. Well ... this is pointless. Is better to store the data in the server for that matter.
You can try as much as you want, you will need an open door, and that open door can be use by anyone.
But I've a question for you: Do you really need a fully secure repository in the client side? This kind of repository weren't created for be fully secure, but they are secure enough!
For example, the session cookie of your web app is stored by the browser right? And if someone steal that cookie, it can impersonate the user and your application will never notice it, right? This is pretty scary when you think about it.
Nowadays nobody put to much thinking on this because browsers are secure enough to protect cookies from malicious access. And of course, they did the same to protect the local local/session storage, IndexedDB, WebSQL, etc.
So, if your data is more precious than your user session, keep it in the server. If not, go ahead and put it in the browser.
PRO TIP: Consider encryption when storing in a no secure repository to make it harder to get. But remember that this comes at a price: you will not be able to use the query system of those repositories to search over encrypted data.
I want to save a JSON object to a file at client to persist it for future usage, I have tried following line
window.open("data:text/json;charset=utf-8," + escape(JSON.stringify(obj)));
and it works!! Problem it asks user the location and name of the file for saving. What I want is I want the user completely unaware of the fact that something is being saved for future use or atleast keep it to minimum possible user clicks.
How can I give the file name and location statically in window.open() ?
Thanks in advance,
EDIT
Just to make it clear that " I don't store arbitrary or unwanted data. All the users are registered users of the system." In normal conditions I don't store anything locally. However I want to store some JSON objects if the network was not available at the time of form submission.
One obvious solution will be to use cookies. Since Cookies can be accidentally deleted due to user's browser settings. I need a way to persist the data till the network becomes available. It will be greater to have cross browser support.
If you want to persist data, then use a storage API, you can't play games with the user's filesystem.
You can't do that, it is a question of security on client side.
I want the values for cross-browser support, even if the user changes the browser he/she should be able to proceed from where he left. I am storing information in JSON objects.
I think users don't expect a web application to share information with other browsers on the same machine this way. Also, I doubt many users change their browser too frequently anyway to warrant a privacy-invasive feature like this. You should either consider storing the information on your server (by forcing a user to register or using common accounts like OpenID, Google, Facebook etc.) or on the client side by setting a cookie or using the mentioned storage technologies.
If you really want to restrict stored information to browsers on the same machine, and don't want to permit access by the same user on different machines, you could take a look into LSO ('Flash cookies') which seem to be saved browser independent. You don't need any user confirmation for storing LSOs.
Update: Flash isn't supported by browsers as it used to be and not widely used nowadays, so LSOs aren't a good option any more.
FileSystem APIs is part of HTML5 spec and it is possible to access file system in a sandbox for a certain website in modern browsers, here is a good tutorial:
http://www.html5rocks.com/en/tutorials/file/filesystem/
However I would go with LocalStorage API for that matter which has better browser support:
http://www.w3schools.com/html5/html5_webstorage.asp
FSO.js wraps the temporary/persistent FileSystem API and will allow you to easily read/write files... only supported by Chrome right now, but the spec is coming along fast. :)
As has already been mentioned in the comments, this is not possible without express user consent for obvious security reasons. however, as also mentioned in comments, you shoudl/could store the information in a cookie which will then be retrievable when the user returns.
something like this would do it
document.cookie="cookie_name="+required_value+"; expires=Monday, 04-Dec-2011 05:00:00 GMT";
obviously the expires time will be as long as you need the information to persist.
hope that helps
I would like to import data that the user had entered into his profile on a website that I do not control. I don't want the user to hand me his login credentials to grab the data from the server-side (connecting directly to aforementioned website). I would rather prefer the login data to stay on the client's machine: It makes my service more trustworthy and I don't have to process sensitive data.
I thought that this can probably done with javascript without greater hassle. However, given the security risks, it seems to be blocked by browsers. See How to get data with JavaScript from another server?
So I think my question is already answered and can be closed/deleted.
I'm not sure I understand what you're trying to do, but there is no secure way to verify login credentials in a browser client. If you want to check login credentials, you will have to involve a server.
Some data can be stored on the client side, but then a user is tied to a particular browser on a particular computer and can't use the service from anywhere else. In older browsers data is generally limited to what can be stored in a cookie and cookies are not guaranteed to survive for any particular long lasting time frame. In the latest browsers, data can be stored in HTML5 local storage which allows for a little more structured way of storing data, but even then you're still stuck in one particular browser on one particular computer.
Based on your comments, it sounds you're trying to "cache" a copy of the data from web-site A that you can access from client-side code on web-site B on multiple visits to your website. If that's the case, then it sounds like HTML5 local storage may work to serve as a cache storage mechanism. You will have to figure out how to get the data from web-site A into the cache as the cache will be subject to same-origin access (domain X can only access the data that was put into HTML5 local storage by domain X), but if you can get manage to get the data from web-site A into your web-site B client-side page (perhaps using JSONP), then you could cache it using HTML5 local storage. You will need to realize that even HTML5 local storage is not guaranteed forever (so you need to be able to fetch it again from web-site A if required).
You said this
I don't want the user to hand me his login credentials to grab the
data from the server-side (connecting directly to aforementioned
website).
If you do that, anyone would be able to access any User's data, since you don't restrict access to data.
You also said this
I would rather prefer the login data to stay on the client's machine:
It makes my service more trustworthy and I don't have to process
sensitive data.
I'm really not sure that's a good idea. You still need to lock down personal information. But anyway, if you really want to, you can use localstorage -- modern webbrowsers support this.
Check out this link for a primer on local storage.
Storing Objects in HTML5 localStorage
Note that the user can clear the browsers local storage, so you still need to have a form to enter credentials.
EDIT -- if you want to save a user's profile information on the client, you can do that with local storage. But you still need to save the data to the server, else if the user goes to a different machine or even browser, they won't have their data. Plus, your server side model probably needs to associate a user's content with their profile in some way. I don't think there is any way around it.
For my web application, I need to store form inputs spanning across multiple pages, until I finally process/manipulate them to produce some results (its mostly formatting the data entered and presenting it in some layout). The options I think I have are -
Keep sending user's inputs to the server, store it there in some database, do the final manipulation there only, and show the result.
Store the inputs in browser's storage as the user fills the forms, and finally use this stored data to manipulate and show results.
I very much want to use the second method, and perhaps a possible way is using cookies, but I'm afraid I might just hit some upper limit of cookie data storage. I'm also open to understanding the merits of the first method, or any third method.
thanks.
Use webstorage (you can client-side store around 5MB of text or binary data)
Firefox demo: http://codebase.es/test/webstorage.html
DOM Storage is supported in these web browsers:
Internet Explorer 8
Firefox 2 for sessionStorage, 3.5 for localStorage
Safari 4
Just google for sessionStorage and localStorage objects.
Also modern webkit browsers supports client-side sql.
Edit:
I'm not sure about what you want to do but using AJAX you can store everything in javascript variables and serverside databases or sessions are a good choice.
Hitting the storage limit of the cookie could indicate you are trying to store too much on the client side. It might be prudent to store it serverside, in something like a session. The key to the session could then be stored in a cookie.
An alternative method is to not have the requests span multiple pages, and just store the data on the client side, not as a cookie, but as different form fields and/or text fields (they could be hidden). The merit of such a method is it doesnt hit the cookie limit as you have. It also makes your serverside code easier/cleaner, since it doesn't have to keep track of state (something you'd always have to do if spanning across pages, and thus the reason you are hitting the cookie limit in the first place).
You could use a small Flash Movie to store some data via Flash's Shared Memory Api or have a look at Google Gears.
Maybe also consider, that every byte you store in the cookie have to be transmitted everytime you website makes a request to the server.
Generally cookies have a max size of 4k so you could store quite a bit of data in there.
Be careful with validating all information that lives cookies - all the information resides on a client browser and can easily be manipulated by users of the site at any time.
You didn't say which platform you use. Spring Webflow does exactly the kind of form processing that you want:
http://www.springsource.org/webflow
Even if you don't use Java you could use some of the principles.
Edit: One more drawback of big/complex persistent cookies is that you have to make sure that any new code you deploy is backwards compatible with all the cookies that are out in the wild.
I would suggest storing the data in a session variable until you get to the final step rather than a cookie. I think this would be safer for your data as the user does not have direct access to the data, so you can validate as you go.