Hiding Ajax and Javascript Code

We all know it's very easy to look at javascript code of a page just by viewing the source code, or download the imported .js files, with Firebug in Firefox it may be even easier. And some companies or developers don't want to give it away or expose their code, whether it's because they worry about the security or they simply don't want other people to copy-paste and reuse their code.

For this purpose, there are freeware and commercial software that able to make the source code very to read, but stil work in the browser. They are called the code obfuscators. You can easily find them by type keyword like "javascript obfuscator" in google, in this article we will use the software called Javascript Chaos Edition (JCE) from Syntropy Development, we'll use the free version distributed as JAR file.

To use JCE, you simply launch the JAR by running java -jar jce.jar, and a GUI like this will show:

Copy the script you want to be obsfucated and paste it into the main window. Here's an example sceript code from http://www.sislands.com/jscript/week2/clock1.htm Click Next and a screen like this will be showed up:
Click Next again, copy the result script there, and paste it to your page to replace your original code. The program is simply change the code from this

var now;

function showMilitaryTime() {
     if (document.theForm.showMilitary[0].checked) {
          return true;
     }
     return false;
}

function showTheHours(theHour) {
     if (showMilitaryTime() || (theHour > 0 && theHour < 13)) {
          return (theHour);
     }
     if (theHour == 0) {
          return (12);
     }
     return (theHour - 12);
}

function showZeroFilled(inValue) {
     if (inValue > 9) {
          return ":" + inValue;
     }
     return ":0" + inValue;
}

function showAmPm() {
     if (showMilitaryTime()) {
          return ("");
     }
     if (now.getHours() < 12) {
          return (" am");
     }
     return (" pm");
}

function showTheTime() {
     now = new Date();
     document.theForm.showTime.value =
     showTheHours(now.getHours()) +
     showZeroFilled(now.getMinutes()) +
     showZeroFilled(now.getSeconds()) +
     showAmPm();
     setTimeout("showTheTime()", 1000);
}

to this
<!-- This script has been obfuscated with Syntropy's JCE - Javascript Chaos Engine which can be downloaded at http://www.syntropy.se. JCE is free to use if this comment is not removed. -->

var qZ;function sW() {if (document.theForm.showMilitary[0].checked) {return true;}return false;}function vU(Zd) {if (sW() || (Zd > 0 && Zd < 13)) {return (Zd);}if (Zd == 0) {return (12);}return (Zd - 12);}function nu(Bd) {if (Bd > 9) {return ":" + Bd;}return ":0" + Bd;}function PN() {if (sW()) {return ("");}if (qZ.getHours() < 12) {return (" am");}return (" pm");}function pH() {qZ = new Date();document.theForm.showTime.value =;vU(qZ.getHours()) +nu(qZ.getMinutes()) +nu(qZ.getSeconds()) +PN();setTimeout("showTheTime()", 1000);}

You can obviously see that the resulting code is a non friendly code(Okay, I know the original code is a non friendly too, but it's my fault, not the script, I have to rewrite the css rule for this page for the .code part). To figure out what the code does is not impossible, but it sure as difficult as hell, especially if your code is much larger than the example. And JCE here is just an example, you can find many more obsfucator through google and find one that suits best for your needs.

Hope this helps.