Stop JavaScript Injection

Have you ever encountered a problem where some people trying to inject JavaScript code to 'test' your JavaScript if it have a leak or not?. If you are a web developer, you will always found out that this is extremely irritating. This is the same for me who are always trying to hide my code. Darn those hackers!. So today, I'm going to tell you how to stop this irritating problem. Not fully stop them but you can actually make them unable to change your predefined code.

But before that, I need to thank paulirish for this. His 53 minutes video is worth watching! Click here to watch the video!

I adviced you to start watching the video first!

OK, so, here comes the tutorial.

1st, I want you to take a look at these codes:

(function(document, window, screen, anObject){
    //... some more code ...
})(document, window, screen);

The code above is exactly the same like below:

anything = function(document, window, screen, anObject){
    //... some more code ...
}

anything(document, window, screen);

or

function anything(document, window, screen, anObject){
    //... some more code ...
}

anything(document, window, screen);

Now you will be asking, why do you want to use the first method? Well, this is basically because if you use the second method or the third method, some "JavaScript Hacker" can easily do something like below to stop the code from executing.

anything = undefined;

But, if you used the first method, JavaScript will immediately call the function after defining the function. So, there will be no way around to access the code right?.

2nd, you will now be asking, what did the function arguments have to do with anything right?

OK, these arguments are only for changing the global variable such as document, window, screen, etc.. to a local variable document, window, screen, etc so that if you are using yui-compressor to compress your .js files, every document, window and screen variable inside the function itself will be shrinked. So, this can somehow make a newbie JavaScript Hacker confuse. Which is really cool because you don't need to use packer. :P

3rd, Again, have a look at these codes below (I will be using jQuery to assist) :

(function(document, window, screen, anObject){
    (anObject = { 
        initializeScript: function(){ 
            $(function(){
                // Inside jQuery window.ready, do anything you want here.
            });
        }
    }).initializeScript();
})(document, window, screen);

What??! It is getting harder to understand!!

This is actually quite easy to understand. Before, the function only call itself after defined right? Now, the called function then define a LOCAL 'anObject' object and immediately call the LOCAL anObject.initializeScript() which then do all the window.ready stuff using jQuery.

This can help you protect from the "Javascript Hacker" so that the "JavaScript Hacker" can't use something like below to messup the whole script because 'anObject' itself is a local variable!

anObject = undefined;

4th, every function or options that you want to put in your script should be put inside the anObject definition and be called within the 'anObject' object. This is so that every area in your script will be a local variable and not a global variable because global variable is extremely easy to hack (JavaScripter also state that global variable is evil).

5th, every variable declaration inside the 'anObject' declaration must also include a 'var' at the beginning to prevent any local variables to leak into global variables. Example:

var lalala = 0;

6th, jQuery itself is a global object. To prevent someone from removing the stuff you did using jQuery for example like $('#element').click(function(){ ... }); You can use a timer to prevent this by checking the click if it is a function or undefined and......... NEVER USE SETINTERVAL() TO CREATE A TIMER!

Finally, these are all the things that I think I should tell people about and these are the things that I did not forget to write. So, if you have any question, I hope you will use the comment section below.