Hide your JavaScript from Firebug and other Dev Tools

I write just about everything now a days in Module Pattern, ta Mr. Crockford.  However one of my biggest worries in developing web applications is other people like me.  You know, the geek that hits your web page and immediately hits F12 in Firefox to see what’s going on, what framework your using and inevitably starts doing console.log statements just for fun.  For the serious hacker, once they find those exposed AJAX methods and what to push, life can become a real nightmare for you server not to mention the developers as they feebly attempt to explain to management ‘that’s just the way it is’.

So after several days of adding to a JavaScript Coding Standards document explaining Design Patterns at my most recent job, it got me to thinking ‘how can I protect the code yet not loose any flexibility that the Module Pattern provides?‘ It’s one of those problems you think about when you go to sleep and are still going at it when you awake at sunrise and stubbornly refuse to get up despite your brain saying ‘get at it lad’ just to add to the encouragement from your bladder. Like many problems you fiddle about with code constantly hitting F5 in your browser as your brain goes into overdrive as it is fully convinced this has to be possible!  Then the solution hits you and you exclaim to yourself ‘man that’s so f’ing obvious and simple what was I thinking!!‘.  The solution is wrap your singleton in an anonymous function – duh! So here you go enjoy:

(function(){

	var myApp =function(){
		//add your application code here as you normally would
	}();

}());

Yes its that simple!  In essence wrap your application in an anonymous function.  So long as all of your child classes within myApp reference myApp.whatever then no problem.  Give it a try then hit your page with Firebug or any other dev tool and look in vain for myApp, you will not find it.

But this introduces a problem.  Your busy working on your highly complex web app and you need to be able to do console.log statements to my app. Well no problem:

(function(){

	var DEBUG = true,

	var myApp =function(){
		//add your application code here as you normally would
	}();

	if(DEBUG){
		window.MyApp=myApp
	}
}());

Now you can debug to your hearts content and when ready for the big release set your DEBUG switch to false.  So now the next issue, ‘ya that’s all very nice Keith but I NEED to expose some of my methods for consumption by 3rd parties‘.  Again very simple:

(function(){

	var DEBUG = true,
	EXPOSED_NS = 'ForTheCosumer';

	var myApp =function(){
		//add your application code here as you normally would
		return {
			DoSomething 	: function(){},
			DoSomethingElse : function(){}
		}
	}();

	// expose my public methods
	window[EXPOSED_NS]={
		doSomething 	: myApp.DoSomething,
		doSomethingElse	: myApp.DoSomethingElse
	};

	if(DEBUG){
		window.MyApp=myApp
	}
}());

So thats about all there is to it.  In my next post I will deal with another contentious issue with the Module Pattern. Code segmentation into separate files and how to get them into your now hidden application.

Cheers

Keith

Advertisements

2 responses to “Hide your JavaScript from Firebug and other Dev Tools

  1. Very interesting, but I don’t undestand where you put the code:

    (function(){

    var myApp =function(){
    //add your application code here as you normally would
    }();

    }());

    to keep myapp secret ?
    because If you put in js page on html page it’s readeble,
    so how work your idea ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s