Hack18.Obscure JavaScript Dynamically | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 18. Obscure JavaScript Dynamically

Use PHP to obscure the names of your JavaScript functions, hiding all of your clever code.

Sometimes it's useful to obscure some of your JavaScript code to hide intellectual property. It is impossible to twist the code so completely that users cannot unravel it, but it is possible to do some obfuscation to fend off the casual observer. This hack starts you down the road of JavaScript obfuscation by automatically renaming JavaScript function calls. With this code, you can write JavaScript in the clear on the server, and then have it obfuscated on the way out to the browser.

3.9.1. The Code

Save the sample in Example 3-10 as index.php.

Example 3-10. The script using the obscure.php library

 <?php require_once( "obscure.php" ); obscurejs_start() ?> <html> <head> <script language="JavaScript"> function dowrite() { document.write( "This is a test" ); } </script> </head> <body> <script language="JavaScript">dowrite( );</script> </body> </html> <?php obscurejs_end( ) ?>

The library code, obscure.php, does all the heavy lifting (see Example 3-11).

Example 3-11. Handling obfuscation of method names

 <?php function obscurejs_start() { ob_start();  } $funcs = array(); function decreplace( $matches )  { global $funcs; $newname = "af".count($funcs); $funcs[ $matches[1] ] = $newname; return "function ".$newname."("; } function objscurejs( $matches ) { global $funcs; $js = $matches[2]; $js = preg_replace_callback( "/function\s+(.*?)\s*\(/", "decreplace", $js ); foreach( $funcs as $oldfunc => $newfunc ) {   $js = preg_replace( "/".$oldfunc."/", $newfunc, $js ); } return "<script".$matches[1].">".$js."</script>"; } function obscurejs_end() { $doc = ob_get_clean(); $doc = preg_replace_callback( "/\<script(.*?)\>(.*?)\<\/script\>/s",  "objscurejs", $doc ); print( $doc ); } ?>

3.9.2. Running the Hack

Copy the code onto your PHP server and navigate to index.php. Instead of the JavaScript in the original document, you should see this (note the bolded method name, changed from the original name):

 <html> <head> <script language="JavaScript"> function af0() { document.write( "This is a test" ); } </script> </head> <body> <script language="JavaScript">af0();</script> </body> </html>

The dowrite JavaScript function has been renamed to af0, as have all of the references to it in the HTML.

The code that renames the functions is in the obscure.php script. It is invoked with the obscurejs_start and obscurejs_end calls. These calls trap all of the PHP output, and then find the JavaScript blocks and rewrite them. Of course, there are limitations: JavaScript that is sourced in from another file will not be altered, and functions that are used before they are defined will not be renamed appropriately.

It should be clear that this is hardly an industrial-strength solution, but it is a good starting point. The best solution is usually to put all your JavaScript in external libraries, and then protect those external libraries from prying eyes. But, to create a little chaos, this script is a nice tool.