Question

I am making a browser game where every 10 seconds, i is incremented, and the points algorithm uses i to determine the number of points awarded. The obvious way (to me) to do this is to use setInterval(10000) for the timer, and run the points calculation inside of the function.

How do I prevent a JavaScript injection that increases i, making the app think that the user has actually been playing for longer than he really has?

I am using Firebase as the back-end. As a PHP programmer, I would normally just do server-side validation of the player’s points when he submits them by checking start & end times. I suppose I can do this in Firebase as well, so I probably just answered my own question…

Still, is there a way to just prevent a JavaScript injection? (Prevention, not server-side Detection).

Answer 1

You can make variables essentially private, which means that it will be impossible for the user to change them through plain JS injection. But that won’t stop someone from intercepting your Javascript with a debugger, from intercepting your communication between client and server, or from doing all sorts of other fiddling.

To make a variable private, just include it inside a function, execute that function, and return something that includes a function referencing that variable. This is called a closure. It’s quite easy to do.

In this fiddle there is a counter variable that is updated every second (not every ten seconds — I’m in a hurry! 🙂 ) and another variable, basePoints that together add to the current score.

Publicly exposed is a function that allows you to add to the basePoints value, but nothing allows you to add to the counter. I don’t think you can do that without getting inside the JS engine (as a debugger does.) The main point is that there is no way within Javascript to update the counter variable.

var app = this.app = (function() {
    var counter = 0;
    var basePoints = 0;
    var div = document.getElementById("score");
    var addPoints = function(nbr) {
        basePoints += nbr;
        display();            
    };

    document.getElementById("add20").onclick = function() {
        addPoints(20);            
    };

    var display = function() {
        var points = counter + basePoints;
        div.innerHTML = points + " points";
    };

    setInterval(function() {
        counter += 1; 
        display();
    }, 1000);

    return {
        addPoints: addPoints
    };
}());​