问题
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 component (form) that calculates a price based on the states (user interaction) of it's child components (form inputs).
- The prices for these child components come from an API.
- But the calculation is handled by the parent component – on the frontend.
Is it possible to send a manipulated calculation result through the form?
回答1:
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 come up with a good solution to your problem :)
回答2:
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.
回答3:
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$"
来源：https://stackoverflow.com/questions/51598465/calculate-price-on-frontend-insecure