How to prevent users from tampering HTML Form in the browser? - html

I have few checkboxes in my template whos value is the id of database row. I am using AJAX to post these values back and forth.
{% for item in sale_order_items %}
<tr>
<td class="text-center">
<input type="checkbox" name="saleorderitem" value="{{item.id}}">
</td>
</tr>
item.id for instance renders to 1. Now what if the user changes the value from 1 to 2 in browser using "inspect" and submits the form. what can I do at the frontend or django backend to prevent this and check if the user is submitting the same values as intended?

This depends on many different things but to take you back to the basics: When you create a function in order to bulletproof it out of any errors you use type and value checks.
I would think the best approach to this is to add some back-end checks. The form values returned would have to adhere a set of rule such as a value threshold. If the value returned is beyond that threshold then that would mean that something has changed in the HTML.
You add a check if it fails then the back-end would return an error. In collaboration with front-end you refresh the page and return an error message. It might be really terrible UX but an average end user would never change values using their inspector.
The other alternative is to use javascript to detect any kind of HTML/DOM mutations or changes which I would advice against. Having values to be checked against specific criteria (using the back-end) is best as it foolproofs info passed on to your server against any change.

I found a solution, in this scenario django session variable can be used to store data between requests. When I load the form, I set the session variable to the required values, then on form submission, I check the submitted values with the values in session variable. And it works.

Related

Getting the value of a particular cell with AJAX

My goal is very simple and I would guess it is a very common goal among web developers.
I am creating a Rails (5.1) application, and I simply want to use AJAX to get the value of a specific cell in a specific row of a specific table in my database (later I am going to use that value to highlight some text on the current page in the user's browser).
I have not been able to find any documentation online explaining how to do this. As I said, it seems like a basic task to ask of jquery and ajax, so I'm confused as to why I'm having so much trouble figuring it out.
For concreteness, say I have a table called 'animals', and I want to get the value of the column 'species' for the animal with 'id' = 99.
How can I construct an AJAX call to query the database for the value of 'species' for the 'animal' with 'id' = 99 .
Though some DBs provide a REST API, what we commonly do is define a route in the app to pull and return data from the DB.
So:
Add a route
Add a controller/action for that route
In that action, fetch the data from the DB and render it in your preferred format
On the client-side, make the AJAX call to that controller/action and do something with the response.

ColdFusion convert hidden form variables to a structure

The app I am working on has hidden input variables set on initial load of the page. The variables need to be accessed across all pages. The reason for not converting these to session variables is the user can open another browser with different parameters and passing those value as hidden inputs make it work without any issue. What is the best possible alternative so as to get rid of these hidden inputs..I tried converting all variables into a Structure, but again the structure needs to be posted as part of form submission to make it available to subsequent pages.Another disadvantage of this app is use of frames.I don't have any code to post.
It sounds as if you want different browsers instances which are associated with the same web session to maintain their own distinct sets of data. Doing this by passing form or url variables around seems like a bad idea.
One approach that you could use would be, onSessionStart (or as required), create a structure in the users session to hold instances of the data. For example
session.data = {
someRandomKey: {
valueA: 42,
valueB: "Porridge"
}
}
Then just pass someRandomKey as a hidden form field or querystring parameter. Now, when they submit the form to update variables you use the id from the hidden form field to find the appropriate structure from session.data.
When the user needs a new instance of this form, give them some way, like a link or button, that creates a new unique key, inserts a struct in session.data with this key and populates it with whatever defaults are needed then loads the form passing along the new id as a hidden form field or querystring param again.

"Create or update" form behavior when hitting back button

I have the following workflow on a website:
Some user John Doe declares a company through form 1
(fields: name, head office location)
After John Doe submits (HTTP POST) form 1, he is redirected (HTTP 302) to company form 2 with additional legal information about the company.
The problem is, if John Doe hits the back button of his browser during step 2, he will land on the form 1, with data filled by the browser (using values he already submitted — that's what Firefox and major browsers seem to do).
John Doe might then think he can use this form to update some information (e.g. fix a typo in the name of the company) whereas he will actually create a new company doing so, as we don't know on the server side whether he wants to declare a new company or update the one he just created.
Do you know any simple solution to handle that problem ?
Use javascript/jquery script after the page is loaded to empty all the inputs. This will prevent confusion of "updating the company".
jQuery would look something like this:
$('#elementID').val('');
You can also handle the situation by manipulating the browser history
on load of form 2, and pass the CompanyId generated on submit of form 1 using querystring. So that you can actually update the company as the user
Suppose John submits form1.html, a unique CompanyId "1001" is generated and redirected to form2.html. Now on load of form2 you can modify the browser history form1.html?companyid=1001 using
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 1", "form1.html?companyid=1001");
Now, when the user click back button and submits the form1 again. you can check for companyid in querystring and update the company.
I think it is more user-friendly when user can return back to previous form and update it (instead preventing the described behavior).
I use in most cases similar way to handle described problem:
Let's assume that user is on the page /some-page, that contains "Create new company" button.
When the user opens this page, will be executed special method createOrFindCompanyDraft() on the server-side. This method creates new company "draft" record in DB (only for the current user). For example, draft record has primary key id=473. When you execute this method again it will return the same record with the id=473 (with "draft" status). "Draft" record should't display on any other interfaces.
And "Create new company" has link /company/common/473.
When user go to /company/common/473, you display form 1, that will be filled from "draft" record. At first time user will see empty form.
Technically user will update the existing record, but you can display "Create new company" title on the page.
Then user go to form 2, for example, /company/legal-info/473, you create similar draft record for the this form (similar to step 1).
When user submit the form 2, you will remove "draft" status from the record id=473 (and any related records).
Next time when user open page /some-page, will be created new draft record for the current user.
Browser history will contain:
/some-page
/company/common/473
/company/legal-info/473
/some-page2
I like this approach, because all form only update records. You can go to previous/next form many times (for example "Back"/"Forward" browser buttons). You can close browser, and open not completed forms tomorrow. This way doesn't require any additional manipulation with the browser history.
try this
<form autocomplete="off" ...></form>
And Another
Use temporary tables or session to store the Page 1 form data. If the page 2 form is submitted use the temporary data of page 1 which is stored in database or in session.
Use a Separate key (Hidden field ) in both page 1 and page 2.
Actually I thought of a trick to obtain that "create on first post, update after" behavior (just like the user thinks it should behave).
Let's say the step 1 form is at the URL /create_company/. Then I could have that page generate a random code XXX and redirect to /create_company/?token=XXX. When I create the company I save the information that it was created through page with token XXX (for instance, I save it in user's session as we don't need to keep that information forever) and when the form is submitted, if I know that a company was already generated using this token, I know the user used the same form instance and must have used the back button since the token would be different if he explicitly asked for another company.
What do you think ? (I initially thought there should be a simpler solution, as this seems a little bit over-engineered for such a simple issue)
This is more like a UX question.
I'd think that the solution lies within the information given to the user on that form, to help them understand what they're doing.
Set a title that says 'Create a company', for example, and set your submit button as 'Create Company' will help your user with that. Use a unique id when you create the company object, and pass the id back to the same URL in order to perform an update. You should then update your title and button that tells user that they are updating instead of creating.
In that sense I'd say it's better to use a more generic URL like /company and /company?id=12345.
You could also consider using Restful API protocol to help your server identifies the CRUD operation. http://www.restapitutorial.com/lessons/httpmethods.html
Without the "routing" part of django it is hard to help. I can just answer my experience from the express.js-router functionality:
you can specify a post on /company, which is for new users.
you can specify another route for post on /company/:companyid for a changing form
and as a response from the create-post you can redirect to the different location.

Edit mySQL record inside HTML Table via double click - Is it possible?

I have an HTML TABLE that displays my records from mySQL.
I need to edit various records (rows). Is it possible to click on a table row and edit the values in the row inside the HTML table?
I was wondering if there are any PHP scripts out there to guide me?
Yes, it's possible. While I am very convinced PHP is involved, Javascript is involved also.
I think you can have something like this:
1.Click once, javascript increases a counter variable
2. Click twice, javascript checks if var = 2 after increasing, resets counter, and changes innerHTML of the td to something like this:
form action ='yourphpscript.php' method = 'getorpost'>
.....What you want to change....
</form>
3. So then it sends your values to the PHP script, PHP script changes values in database, and you get redirected back to the main page. Or, better yet, use AJAX.
Hope this helped :)

MSAccess 2003 - VBA for passing a value from one form to another

So how can I pass a value from one form to another? For example: The user select's an organization from a list and this opens up a trip form that allows a user to enter various information regarding the trip. At one place I would like to add another little pop up form where they can enter contact information (just a name and phone for POC) of the organization they are visiting.
So when that initial form opened from the selection screen it has two IDs that are simply hidden in text boxes (one being the tripID, and the other being the OrgID), so how do I pass these to the second little pop up form so that the contact information has the relative IDs with it.
Thanks.
The best approach in these cases is not to attempted to pass a bunch of variables. It is too much code, and is inflexible. For example, if you need to pass two values, what happens over the years when that requirement grows to 5 values? Trying to maintain and pass a whole whack of values is too much coding work.
Keep in mind that each form in ms-access is really a class object that you can manipulate in code. So, use a object approach here and you find you not only write less code, but your code will be more clean, more modular, no need for global vars, and code you write can often be re-used between different forms.
Here is how:
In general when one form launches another form in the 2nd form in the forms on-open event (in fact, you can even use as late as the on-load event) you can pick up a reference to the PREVIOUS form object. In other words, you can use a object approach here.
At the forms module level, for form I declare a form object as:
Option Compare Database
Option Explicit
dim frmPrevious as form
Then, in the forms on-load event, we go:
Set frmPrevious = Screen.ActiveForm
Now, any code in our form can FREELY use code, events, even varibles declared as public from that previous form in code.
So, if you want to force a disk write of the previous form, and re-load of data.
frmPrevious.Refresh
If you want to set the ID value, then go:
frmPrevious!ID = some value
And, note that you can even declare form previous as a PUBLIC variable for that form, and thus if you two forms deep, you could go:
frmPrevious.frmPrevious!ID = some value
So, simply declare a forms object in EACH forms code module (or at lest the ones where you need to use values in code). The above means any code has a ready made reference to the previous form object. Functions declared as public in a form will become a METHOD of the form, and can be run like:
frmPrevious.MyCustomRefresh
or even things like some option to force the previous form to generate and setup a invoice number:
frmPrevous.SetInvoice
or
frmPrevious.SetProjectStatusOn
So not only can you shuffle values and data back and forth, but you can easily execute features and functions that you build in code for the prevous form.
In fact as a coding standard, MOST of my forms have a public function called MyRefresh.
Note that the beauty of this approach is that you can thus read + use + set values from that previous form. This allows your code to not only receive values, but also set values in that previous form. So this approach is bi-directional. You can shuffle data and values back and forth between the forms. The other advantage here is you NOT restricted to just variables, but can use fields, control values (events, properties) etc.
This approach means that much of the previous form is now at your fingertips.
So don’t try to pass a whole whack of variables. Pass a reference to the form and you have a nice ready made object at your fingertips and it makes this type of coding problem a breeze.
The usual way would be to reference the textboxes in the initial form from the popup form, like this:
Forms!frmInitialForm!tripID
Forms!frmInitialForm!OrgID
However, this tightly binds the popup form to the initial form, so that it cannot be used anywhere else in the application.
A better approach is to use OpenArgs:
DoCmd.OpenForm "frmPopup", OpenArgs:=Me.tripID & ", " & me.OrgID
This places your two values into a string, which is passed to the popup form. You can then parse the two values out of the OpenArgs using the Split function.
For more info about passing parameters using OpenArgs, see:
http://www.fmsinc.com/free/NewTips/Access/accesstip13.asp
This one could help
MS Access: passing parameters from one access form to another