I am trying to figure out the best way to go about this. I have a form with a bunch of input fields eg. first name, last name, address, etc. My question is what is the best method to go about storing cookies as the user is entering data and progressing through the form.
My first thoughts were to use the onchange event and call a create cookie function, but my worry is that if the user were to change a field twice would two cookies be made even though they were passed in the same name? Or would the first one with the same name be overridden?
Thank you
Do you really need to create a separate cookie for every form field? You could have a method that serializes the whole form, and stores all the data in a cookie.
With jQuery, you can use the .serialize() method:
http://api.jquery.com/serialize/
And you can also use the jquery-cookie for storing the data in the cookie:
https://github.com/carhartl/jquery-cookie
Depending on the usage you're looking for a cookie may not be what you're looking for. Let us know what you want to do and we'll help you get your solution. In any case:
You can create and destroy cookies with javascript: http://www.w3schools.com/js/js_cookies.asp
To update a cookie you would delete the cookie and recreate it.
However I would posit that you probably don't need cookies. You could store all your data in hidden fields and send them on form submission. Or send them to the server with ajax and have the server store them in the session.
Cookies are stored on the user's local machine as key-value pairs, with an optional expiration period (the amount of time before the cookie is no longer "valid").
Depending on your key naming choice, it will persist as long as it hasn't had its value changed or has been explicitly cleared.
You could do this with an onchange event, and just use the form field ID as the key and the entered text as the value.
Though it might be a better idea to store the entire form as a cookie using jQuery.
Depending on your browser-compatibility requirements, you might look into something like local storage instead of setting and resetting cookies
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
Or, as others have suggested, serialize the full form in a single cookie.
Through a little experimentation, creating a cookie with simply document.cookie and a name= value pair and then updating the cookie using the same name and a different value does not create two cookies, it does indeed just update the first one. So my onchange idea is seemingly working fine. Through the experience I have also found that local document.cookies do not seem to work on google chrome, but function just fine in mozilla firefox.
Related
I want to update a row of data in a database using Ajax and PHP; however, I'm struggling with the following issue: the field in the database to update (henceforth the id) is dependent on the page the ajax request is sent from.
I need to get this id to my PHP script that Ajax calls, however:
I don't want to set the id in a data attribute or hidden input on the page because these can both be manipulated by a malicious user.
Similarly, identifying the id using the referring URL is also prone to spoofing as $_SERVER isn't secure.
I can't set the id in a SESSION variable (or COOKIES) because the user could have multiple pages open and the SESSION would only hold the last page id that was opened.
The only solution I can think is to create a map of random tokens to id's in a table in the db and pass that in a SESSION variable (as per #3 above), then check the table for the token and grab the respective id that way. Seems somewhat convoluted though.
Are there any other options or thoughts? Thanks.
This is a problem related to OWASP Top10 A7 (Missing Function Level Access Control).
There might be no issue with putting your ID on the page so the page can send it back - you just need to validate that the actual save request is permitted for the user.
Just think, regardless of whether you put the ID on the page or not, the page does know the base url for performing the action, so they could go ahead and guess IDs anyway.
Simplify your logic. Pass some sort of indicator of what type of id is in use from the client to the server.
If you create overly complex application logic to address a security concern you will probably have more problems with your code than improvements in security.
Use SSL/HTTPS and a WAF (web application firewall - like mod_security).
I'm trying to implement a gmail like save message as draft functionality in my form.
Use Case: There is one form with certain fields which includes some text box, some image uploads, etc. My problem is how can I retain the values of these if these have been filled by user on a page refresh. Remember page is not yet submitted by user. If it has been submitted then I could have retrieved the values from server but how can I store values in input box now in case no submit button is clicked.
Should there be some api which will save the values regularly or can there be some api which can be invoked only when user is about to close the page or refresh it ?
I have no idea about this and would appreciate any pointers in this.
Update:
Based on the suggestions, I tried to explore some tutorials/blogs which can show the preoper design and implementation for using local storage. I found following good links:
http://yeoman.io/codelab/local-storage.html
https://domantasjovaisas.wordpress.com/2014/09/05/angularjs-saving-global-variable-in-localstorage/
Few doubts:
It seems we can store a JSON object in local storage but how can I store a given object for a given user.
Use Case: A user can create multiple messages. I just want to keep the last message which was not saved neither sent. How can I design this so that storage works fine ? For a given userId I want to keep some data in local storage. Is it safe to store a db Id in local storage ?
Please suggest
I suggest using a library that abstracts over localStorage and defers to cookies if you are looking to support older browsers. Use JSON.stringify and pass it to your storage service. You can also append usernames to the key if you are likely to have multiple users on one machine. It would be good practice anyways.
Examples include:
https://github.com/grevory/angular-local-storage
http://ngmodules.org/modules/ngStorage
You can hook into ng-change, watches, event listeners or use a timer as someone else suggested.
UPDATE: You can find a trivial implementation here, http://scionsoftware.com/Blog/saving-form-state-with-angular-js/
If you're looking to do it for only one string value as you implied, simply remove the JSON.parse and JSON.stringify pieces from the javascript.
I just discovered a bug which I couldn't find any solution of, I would like your advise on that. Issue is there are a few hidden input types, which are there to store ID's of already saved data such as per person id if it is already saved etc. etc.
I just tried and change the value of that hidden variable manually, using google chrome and submit the form and surprisingly i did not get the id that should be there but instead i received the Id that I changed. for instance there was an value of 22 I change it 263 I received 263, whereas I should have be receiving 22. I want that 22 to come not that 263.
Its hard to explain I know but I have tried my level best to convey my issue please help and advise my on that how should I store some hidden value that are un-editable.
Any Idea?
Rule of Web Development #1: Never trust the client
Rule of Web Development #2: Never trust the client
Rule of Web Development #3: You can't make the client trustworthy
If the user shouldn't be able to edit it, never give it to them.
As others have said, there are a few ways to handle the situation. The most common is to use a SESSION variable on the server, available almost everywhere.
Store the "secret" values on the SESSION. They will be available when the user posts back.
You cannot control what data users put in HTTP requests to your server.
Instead, use authentication and authorization, on the server, when the request is received, to make sure that the user is allowed to submit the values they submit.
If you're wanting to keep track of data from one page to another I would use sessions. This is data that is tracked on the server.
//page one.php
$_SESSION['id'] = 22;
//page two.php
echo $_SESSION['id']; //22
This is a basic functionality of how browsers work - essentially someone could POST data pretending to be your form with whatever values they wanted in the fields - or even add extra fields.
If it's a problem consider moving that data from hidden fields to session variables.
If it's important for your hidden fields to be secure, don't contain them on the client-side. Client side variables are pretty easy to modify.
You should probably store them in your session, so they're not outputted to the client. If they're required on the page, use AJAX to grab them instead.
It kinda depends on the domain of your application, if it's in-house software then I wouldn't worry about it particularly.
It does not look like a bug.
What scares you about this? These fields are not going to be accessed and changed by your visitors. If you're afraid someone is going to hack the http request of your visitor and change his order (for example), then https connection should help.
I want to pass javascript object/ variable from page to another. so that i can use data for some fields, i want this values to be hidden and not visible while i my passing value from one page to another
I have already seen many examples of pass via http parameters, i dont want that and also session variables manage on server side, cause nothing has to be manage on sever side for that page.
i want to pass value as a hidden field or value to next page. how to pass it to new page when i open new page via
window.location="website/nextpage.jsp";
Also a note, i am beginner, so please sorry if the question seems to vague.
You can:
Use hashes in the url by reading the window.location.hash. Similar to GET requests, but does not need the server for passing. However, the parameters are visible in the url.
Using cookies. Have JS "plant" the cookies on the previous page and read them on the receiving page.
You could use DOM storage as well. Similar routine as cookies, plant and read.
Assuming you do not want to use session variables, cookies or local storage:
You can not "hide" a parameter so that your website user will not be able to see it.
If you submit data via a POST request - you can use hidden form elements.
<form method="post">
<input type="hidden" name="state" value="{YOUR PARAMETER}" />
If you use window.location - you will have to do it with a GET request
window.location="website/nextpage.jsp/param/{YOUR PARAMETER}";
I don't know about JSP specifically, but using a form with POST method hides data from (standard) users.
why dont you use html5's localStorage and sessionStorage for the purpose. for more help visit here
I'm developing a login page in which i have a three fields and a checkbox.
Three fields are:
a code
an username
a password
I want to let user clicking on checkbox to remember (even if close browser) the code and login but not the password. Can you help me? I hope to choose right question :)
That's simple, Use browser cookies to store the same. So that next time the user logs in you can pick the value from the cookie in his browser .
IMPORTANT : BUT Here's how you make it secure.
Since you are storing the UserID etc. I would recommend encrypting and storing it, next time you can pic the value decrypt and then show back
OR
Just set a flag in cookie on click of checkbox (to remember) and populate the User ID and code from the server code if that flag is true the next time you see from cookie.
EDIT : Since you have not mentioned what language/tech you are developing this, just use server side api's to read the cookie values or jQuery/script
Have you never read about cookies?