How can you check if someone has changed your HTML (using something like Firebug)?

Question

Is there an easy way to check if someone has changed their HTML code? I'm currently writing code that takes data from the DOM and sends it to the backend, where it will of course be sanitized and checked for accuracy, but I was wondering if there was a way to get to it in the aisle.

For example, if I have a hidden input with a number in it, and someone changes this number in Firebug before sending it to my server, is there a way to check if the actual HTML has been changed before sending a request to the server and basically report to them that THIS BUDDY STOPPED A MESSAGE WITH MY STUDIO.

I’m not quite sure that this is possible, but if so, I don’t know how to do it.

Answer 1

Hmm, I would say that the HTML in the browser of your users actually belongs to them. (i.e. nothing wrong with greasemonkey). The material is not yours until it arrives on your server in the form of URLs, HTML form input parameters and cookies - all this, of course, can be changed unbenknownst to you. Therefore, you should continue to verify such data; there is no magic bullet to provide a reliable customer experience.

Answer 2

You might have seen someone change the hidden input elements with Firebug using JavaScript, but the idea sounds silly.

All your critical validation should be done on the server side.

You cannot rely on what the customer sends, being accurate. If someone really wanted to "mess around with their things", they could easily (for example) write a Python script to send data to your server.

---

Here is an example based on jQuery that I mentioned in my comment:

Live Demo # 2

• Click Submit: the background will turn green - nothing has changed.
• Change the value of the hidden input , click "Submit": the background will turn red - something has changed.

HTML:

 <form id="myForm" method="post" action=""> <input type="hidden" value="123" /> <input type="hidden" value="456" /> <input type="submit" /> </form> 

JS # 2:

 $('#myForm input[type="hidden"]').each(function() { $(this).data('originalValue', $(this).val()); }); $('#myForm').submit(function(){ $(this).find('input[type="hidden"]').each(function() { if ($(this).val() != $(this).data('originalValue')) { $('body').css('background', 'red'); return false; } //just for testing: $('body').css('background', 'green'); }); return false; }); 

Answer 3

You can send along with your hidden value another value that is the result of a complex calculation that you performed using a hidden value and some secret value that is never sent to the client. Then, when you get the hidden value, just do another calculation, which changes the first one. If you do not get your secret value, then you know that they have changed the hidden value.

Of course, this still will not be so safe, as someone can easily do some experiments on your site and find out that this secret value is based solely on your hidden value and verification, and then change the verification value to Well.

You can come up with a calculation that makes it difficult (but not impossible) to crack this type of check. However, with the time and effort that will be involved in developing such a calculation, and then staying on it to ensure that new exploits will not appear for it, you will probably be better off simply sanitizing the data as it is received.

In my opinion, you better not rely on any data received by the user. There are, of course, tricks that can be done to do what you ask, and this may be one of them, but most of these tricks are those that are likely to be figured out by the attacker with sufficient time.

Answer 4

There are things you can do in JavaScript, for example, keep a copy of the expected value, similar to JavaScript:

 var originalHiddenFieldValue = document.getElementById("myHiddenField").value; 

... later...

 if (originalHiddenFieldValue !== document.getElementById("myHiddenField").value) alert("Hey, stop it!"); 

In the end, however, all the user has to do is disconnect any event handlers on the submit button to override any validation, and your code will be useless. If they are smart enough to redefine values ​​using Firebug, you can make a good bet that they will want to go a little further to change your scripts.

If you are trying to test these things, the only way to do it with 100% certainty is to check the hidden field on the server side and compare the values, as you said, what you are doing anyway.