I wonder if it would be possible to manipulate a price calculation that is done on the frontend? I read a lot about JavaScript price calculators with the business logic solely on the client side, but nothing about security.

Consider the following scenario:

• A React app has a ponent (form) that calculates a price based on the states (user interaction) of it's child ponents (form inputs).
• The prices for these child ponents e from an API.
• But the calculation is handled by the parent ponent – on the frontend.

Is it possible to send a manipulated calculation result through the form?

I wonder if it would be possible to manipulate a price calculation that is done on the frontend? I read a lot about JavaScript price calculators with the business logic solely on the client side, but nothing about security.

Consider the following scenario:

• A React app has a ponent (form) that calculates a price based on the states (user interaction) of it's child ponents (form inputs).
• The prices for these child ponents e from an API.
• But the calculation is handled by the parent ponent – on the frontend.

Is it possible to send a manipulated calculation result through the form?

• javascript
• reactjs
• forms
• frontend
• calculator

• 2 Is it possible? Sure. Is it possible to walk into the store and tell the cashier that your jug of milk only costs $0.50? Definitely. But there are systems in place like UPC codes, and hopefully you build one on your server/payment gateway, to prevent this. – imjared Commented Jul 30, 2018 at 16:32
• 1 A malicious user can modify the http request on the fly using proxy tools. Calculate the price on frontend but be sure to verify it again on the backend. – alt255 Commented Jul 30, 2018 at 16:33
• 2 You must never blindly trust any input received by the server. The client can be manipulated in many ways, or replaced by code that doesn't use your form / page at all and just sends data to the same server URL. It's fine to calculate on the client side as a preview but only for that. – Dave S Commented Jul 30, 2018 at 16:35
• 3 "Never trust the client". Do not trust a single thing the client sends you without verifying it first. If they say they want donuts, check with your inventory system that you actually serve, and have available, donuts. Don't ask the client how much they cost. – zero298 Commented Jul 30, 2018 at 16:36

3 Answers 3

Yes, a solely client-side calculation (without server-side validation) is insecure.

Unfortunately restricting the values that your (clinet-side) form can send is not sufficient to prevent manipulation. This is because HTTP requests can be sent by all sorts of different methods, not just from the form that you construct.

To bypass this protection all an attacker need do is inspect your API request to the server (for example by using the developer tools in Chrome or Firefox), and resend a request with the calculated value changed. Firefox's developer tools even have a feature "Edit and Resend" which specifically allows you to do this (it also has legitimate uses for debugging and testing APIs).

Do you not have control of the server environment? And if you do, why do you not want to implement the validation there? If you tell us a little more about your setup, then we may be able to help you e up with a good solution to your problem :)

Let's imagine you are working at a shop as a cashier. A customer arrives and says

"I want to buy this Ice Cream, it costs 2$"

You trust your client and bill him 2$. Now another (malicious) client arrives and says:

"I want to buy this Ice Cream, it costs -1000$"

You trust him, and hand him out 1000$.

Not really right? Just as the cashier would check the price, your server has to do that too. Or the cashier / server just looks up the price by himself.

"I want this Ice Cream"

"It costs 4$"

There is an important lesson to be learned here - it is entirely possible for someone to change ANY value sent between the browser and the server as they can intercept the HTTP request and modify the values.

EDIT: bit more detail on this.

When you submit a form or trigger an API request with parameters, there is a HTTP request created by the browser, pointing to your URL, and your parameters are codified within. This packet can be intercepted and changed so it can pass all of your client-side validation (which is really just for the user experience), and modify at will.

It would be good practice for you to learn how to use a tool such as Burp Suite to see how this is done, and learn more about web-security in general.

This is why we use both client-side and server-side validation.

You should have the correct logic running on the front-end, but essentially duplicate this logic on the server and verify the data is correct. If not, it is up to you how to handle it, but you should always be vigilant with data moving from client -> server.