Obfuscate/ hide JavaScript code by including into Flash file

Why / Pro / Con

Of course there will be a lot people who might say that it’s bullshit to include JavaScript into a Flash file (.swf) to obfuscate the JavaScript code – and your right. This is just one thing you can do which has some advantages and also some disadvantages.

In case you want to hide your JavaScript source code not to be seen by other people because it takes you so much time or even money to develop this code – sorry to say, but this will not finally work. There are a lot websites out their which „encrypt“ your JavaScript code and make it less readable for humans. But there are as well sites which do the opposit and make it really well readable again. So it will always be possible to have a look at your source code. Also hiding the JavaScript in a flash file will just makes it more difficult, but not impossible, because you could also decompile the flash file.

The worst disadvantage of executing the JavaScript code from within an flash file is of course that this requires flash support at the client side. So this is applicable if you already use flash on your site or at least for all JavaScript parts that are directly related to the flash application. This also encapsulates all application parts in one file ( and reduced the number of loaded files ).

Do it

The first thing you should do ist to compact your JavaScript to keep it small. You could use the JavaScript Compressor by Dean Edwards ( http://javascriptcompressor.com/ ), the Google Closure Compiler ( http://closure-compiler.appspot.com/home ) or other tools. Here is a little tool uses different compressors and shows the compared results: http://compressorrater.thruhere.net/. Be sure you have a clean JS code before you compress it ( JSlint – it might hurt your feelings ), otherwise the compacted JS might not work. You will end up in a single line string of compressed JavaScript code.

Here is a simple JavaScript example, which creates an new div-Container as child of an existing container. The id of the existing container is ‚myCurrentNodeID‘. This should be changed dynamically. Therefore this will be replaced by an more abstract placeholder which will be replaced by an regular expression.

function myJSMethod( nodeId ){
  var node = document.getElementById( nodeId ),
  newNode;
 
  newNode = document.createElement( 'DIV' );
  node.appendChild( newNode );
 
  alert( nodeId );
}
myJSMethod( 'myCurrentNodeID' );

Compressed and with replaced node id this looks like this:

function myJSMethod(nodeId){var node=document.getElementById(nodeId),newNode;newNode=document.createElement('DIV');node.appendChild(newNode) alert(nodeId)}myJSMethod('###');

In our final implementation we will have one variable or const with the JavaScript code. In your final project you should create and ANT task for the JS processing. To include all JavaScript into one file, compress the file and paste the JS String into the ActionScript class.

public class myClass extends Sprite{
 
		// this JavaScript code will be injected first into the page
		private const JS_CODE:String = "function myJSMethod(nodeId){var node=document.getElementById(nodeId),newNode;newNode=document.createElement('DIV');node.appendChild(newNode) alert(nodeId)}myJSMethod('###');";
		private const JS_PATTERN:RegExp = /###/g;
		// node id given dynamical to the class
		private var nodeId:String;
 
		/**
		 * constructor
		 */
		public function myClass( nodeid ){
                        this.nodeId = nodeid;
			if( this.available() ){
				// injekt js code
				ExternalInterface.call("eval", this.getJSCode() );
			}
		}
 
		/**
		 * replaces a strings by pattern within the javascript code snipped
		 * @return replaced javascript code
		 */
		private function getJSCode():String{
			return this.JS_CODE.replace( this.JS_PATTERN, this.nodeId );
		}
 
                // do your stuff
}

In the class constructor the JavaScript will be executed the an eval statement via the External Interface. This will make the JavaScipt code available in the browser context. Even the JavaScript function „eval“ ist evil, this will only be executed once. Be sure you don’t make to much use of it in your own code.

You can find full working demo code here – its used for my self resize class: https://blog.sebastian-martens.de/2010/06/resize-flash-application-container/