How to prevent hackers from modifying the product price in e-commerce

Question

I'm sure this is a pretty universal question, but I somehow can't find any info on it online. I have an e-commerce site with different product prices. I then use Javascript to calculate the total price, but where exactly should I store each pricing value to avoid getting hacked?

One tutorial I followed suggest adding the price to each item in the HTML file via a custom attribute, for example data-price="100".

This is very convenient and it works, but I also heard hackers could basically tamper with any of the values in an HTML form, so how to prevent them from changing the price to 1 instead of 100? Would it be safer to define the values in the Javascript document instead? Or somewhere else? What is the best practice?

Thank you so much!

Answer 1

Never trust the client.

If they want to order 27 self-sealing stem bolts which cost 5 quatloos each then your JS might tell them that it will cost 135 quatloos but you should never trust their browser for that total.

The browser should tell your server that they are ordering 27 self-sealing stem bolts.

It's up to the server to determine the final amount to charge.

When they make payment you should then compare the sum paid with the server-calculated cost.

Answer 2

Generally, calculating the price of a product on the client-side is a practice that should be avoided.

The best way to avoid an attack is to not calculate anything related to money on the client-side, but rather get the information from the server.

Maybe you could implement a process to call the server for the price at a given point in the transaction process, initially displaying a calculated price (from your javascript).

Edit: answer only.