Geek Answers Handbook

Verified PHP / Javascript Calculation

I ran into this problem before and expect to do it again: I want to do a subtotal calculation in both javascript and PHP. I might want to change the calculation at some point.

  • It should be run in javascript in order to maximize the computation speed so that the user knows what to expect.
  • It must be run in PHP so that I get a real intermediate amount that the attacker cannot intervene.

In this way:

  • If I only perform client-side calculation (in javascript), an attacker can crack javascript and modify the subtotal.
  • If I only perform the server side calculation (in PHP), you will need to wait for the AJAX call so that the user can get the updated subtotal.

So, I want to do the calculation on both sides. The only way I saw this is to program the calculations in PHP and program the calculations in a separate javascript.

My question is : what template, technique or technology do people recommend using to create a server-side calculation and make it compatible with javascript when it is sent on the client side

The idea I had, for example, was a PHP array for calculation, which translates into PHP code and javascript code, for example:

array( array(type => "operand", "name" => "variable_A"), array(type => "operator", "name" => "multiply"), array(type => "operand", "name" => "variable_B"), )

This can convert to PHP:

 return $variable_A * $variable_B;

And in Javascript:

 return variable_A * variable_B;

This is an example of a work pattern. I do not know what the real ones look like if they exist.

+4
source share
2 answers

ajax ?

you can pass the whole variable entered using javascript and leave the server based on the process.

or am I misunderstanding your question?

0
source

The way I think about your problem is similar to what you described it: do a double calculation. And I think the big boys do it.

Example: add two numbers. So you have this code:

HTML snippet:

 <form method="post" action="/add.php"> <input id="firstOperand" name="firstOperand" placeholder="First operand"/> <input id="secondOperand" name="firstOperand" placeholder="Second operand"/> <input type="submit" onclick="doCalculation()" value="Add"/> </form> <div id="result" />

Your JS might look like this:

 function doCalculation() { var first = parseInt(document.getElementById('firstOperand').value); var second = parseInt(document.getElementById('secondOperand').value); var result = first + second; // the minimum amount of error checking if isNan('result') return false; document.getElementById('result').innerHTML = result; // Now use some framework (like jQuery) to make an Ajax call and pass the result to callback. Framework.Ajax('/add.php?format=json', 'POST', {first: first, second: second}, callback); return false; } function callback(response) b var res = response.json.result; var resultEl = document.getElementById('result'); var errorEl = document.getElementById('error'); // if our result is not correct, we want to update the user on it if (res != parseInt(resultEl.innerHTML)) { Framework.removeClass(errorEl, 'hidden'); } document.getElementById('result').innerHTML = res; }

Of course, your PHP results page (add.php) will return json with the result. The added value here is that you can also return a simple HTML result (for example, if js is disabled).

Your callback can also check if there was an error in the returned result and display this error message. Or, if the result expires, display a notification that the "result" is not saved. But this is beyond the scope of the question, I think (at least, outside the scope of the answer).

Note: this is only the code from the top of the head, and not tested, written directly in the response window, maybe several things should be done better.

0
source

More articles:


All Articles