Really wicked web application source code hiding

I saw this video on YouTube from DefCon Conference.

I go to samy website, and it’s web application which look like Microsoft Windows. So first think I do to see how it is build. I look at source code and it’s look like there is no code at all, but in the middle (line 281) there is this

<script>/*
No source for you!
*//
</script>

Before and after script tags are only empty lines (\n), I check the end of the line 283 and there is following code (line breaks and indentations are mine):

/.source.replace(/.{7}/g,function(w){document.write(
    String.fromCharCode(parseInt(w.replace(/ /g,'0').
                                 replace(/	/g,'1'),2)))});

And thats it. So where is the real code? And the answer is this:

  1. He encode all characters in html as binary and replace zeros as space and ones as tabulations. there is no string, but in 283 line there is this: "*//" which is the end of multi-line comment and beginning of Regular Expression (which look like simple closing comment)
  2. He get value of the string representation of the RegEx using source field
  3. replace all whitespace with '0' and '1'
  4. convert it to decimal
  5. get the value of characters encoded and print all of that out

Pretty clever.

Of course you can get generated code from a menu “View Generated Source” from WebDeveloper toolbar in Firefox or see the the DOM in Firebug.