Today I found a security hole in my web application (Pardon me if this is mentioned else where because I couldn’t able to find it on SO). Consider this code:
<html>
<head>
<script>
intv = setTimeout(function(){test()} , 10000);
function test(){
val = document.getElementById('tt').value;
alert(val);
intv = setTimeout(function(){test()} , 10000);
}
</script>
</head>
<body>
<input type="hidden" value="10" id="tt">
</body>
</html>
The Problem:
This code will alert value of an Input Field with 10 seconds of interval. After first alert I change the input field value in Browser by viewing its source code. And it alerts the value which I added later on, which is not good for me.
Real Life Scenario:
I have a virtual classroom where student and teacher both attend a class session. I send the the ajax request after every 5 seconds to update the duration of class at backend and I add +5 in duration field in db, and later on student has to pay us according to the duration they spent in a class. I am afraid if any smart guy just edit the source code in browser and instead of sending request after 5 seconds he changed to it 1 hour (for sake of argument) to cheat my logic. How to prevent any kind of illegal activity on client side?
There is nothing you can do to prevent users from changing JavaScript values.
Instead you should validate input on the server.
In this case, as suggested in the comments, you should log the start and end time using the servers time.