You cannot protect your code from being downloaded. But there is quite a number of ways to prevent a code pirate from making any sense of it. A few examples will be presented in this article. When you study it, you might well come up with some new ideas of your own.

Compacting

Javascript, like just about all modern programming languages, is "free format". That is, at any place among the (reserved) keywords, the (user-defined) identifiers and the (numeric or string) constants there can be a whitespace interspersed - whatever you think will make your source code easier to read.

Or, looking at it the other way round, nearly all "whitespace" can be removed, if you want to camouflage your source code to humans. Still it will be perfectly readable to the browser. There are just a few exceptions to "free format" (move cursor here)

Look for yourself. Let's assume, we had a simple function like the following:

function Respond(i)
{
  switch(i)
  { case 1: alert('Button "1" clicked');  break;
    case 2: alert('Button "2" clicked');  break;
    case 3: alert('Button "3" clicked');  break;
  }
}

As well, you could code that function as follows. (Note)

function Respond(i){switch(i){case 1:alert('Button "1" clicked');break;case 2:
alert('Button "2" clicked');break;case 3:alert('Button "3" clicked');break;}}

Still the browser will interpret it just like the original one above. Try it - click on any of the following buttons:

Randomizing

To the browser, your user-defined identifiers are just a plain character sequence, formed in compliance with some syntactic rules. (Move cursor here, if you want to know the syntactic rules of identifiers in Javascript.)

Again, let's look at it the other way round: If you replace an identifier by any random character sequence, it's just as well to the browser. What counts, is only that every occurrence of an identifier is replaced by the identical char sequence.

So, you could reformat the above code by replacing the function name (Respond") and the one parameter "i" by random char sequences, as in the following coding scheme:

function sCwGe2Qq(efN9brFo){switch(efN9brFo){case 1:alert(
'Button "1" clicked');break;case 2:alert('Button "2" clicked');
break;case 3:alert('Button "3" clicked');break;}}

Still the browser will interpret it just like the preceding one. Just be sure that this function must be called by its random name now, e.g.  onclick="sCwGe2Qq(1)"  Try it - click on any of the following buttons:

Code Manipulations

Homology

A code with equivalent functionality, but either simpler or more complicated than the original code. It's a matter of feeling what you prefer.

Fake code

A code that has no real functionality at all, it's there just for confusion of a potential code pirate.

Details to both you will find in the following sub-sections.

Code Manipulations - Homologies

function Respond(i)
{ alert('Button "' + i + '" clicked'); }

function Respond(i)
{ var part1='Button', part2='clicked';
  alert(part1 + ' "' + i + '" ' + part2); 
}

function M_8B32$(uMXa8YpHb6kq){var R3cl$YEuUOsu='Button',
HWo6_a98OJkR='clicked';alert(R3cl$YEuUOsu+' "'+
uMXa8YpHb6kq+'" '+HWo6_a98OJkR);}

However, the browser will still interpret it just like the original code. Just be sure that this function must be called by its random name now, i.e.  onclick="M_8B32$(1)"  Try it - click on any of the following buttons:

A general problem with homologies is that there is no save way to translate the original code. It will always take some creativity to find suitable equivalents, and some careful coding to implement it correctly.

Code Manipulations - Factoring out

A simple yet very effective method is factoring out. That is

• splitting up a constant into its constituent parts
• assigning these parts to (global or local) variables
• randomizing these variables
• at the starting place, combining these variables such that the resulting contents are forming the initial constant.

1. Let's assume, you want to camouflage the following code:

   domain='ITspecial.org';
   
   

2. So, we introduce three new variables, e.g.:

   var part1='ITsp', part2='ecial.o', part3="rg';

   It's a good idea to avoid obvious splitting, such as  var part1='IT', part2='special', part3=".org'; 

3. Next, we're going to randomize the variable names:

   var NmYRDy='ITsp', Urz6349h='ecial.o', WoqpVok="rg';
   
   

4. Now let's combine these variables:

   domain=NmYRDy+Urz6349h+WoqpVok;
   
   

5. Finally, you should spread the three variable declarations all over the document. Just don't forget that each one must be in brackets <SCRIPT> … </SCRIPT> The first declaration could be near the beginning:

   <SCRIPT>var NmYRDy='ITsp';</SCRIPT>

   The second declaration could be somewhere in the middle of the document:

   <SCRIPT>var Urz6349h='ecial.o';</SCRIPT>

   The last variable should be declared somewhere near the end of document (could even be past the initial place):

   <SCRIPT>var WoqpVok="rg';</SCRIPT>

You see, the idea is simply to "drive him crazy", the potential code pirate. When starting at the initial place, it would be very hard to find all the constituent parts and their values.

Code Manipulations - Fake Code

function YourFunction(param1,param2, /*...*/ )
{ 
  var id1, id2, ...,	// identifiers of the effective code
      id_a, id_b, ...	// identifiers of the fake code

  if (cond1)		// 'cond1' will never come true
  { fake_code1 }

  effective_code1

  if (cond2)		// 'cond2' will never come true
  { fake_code1 }

        :
}

When you compact the total code and randomize its function names and identifiers, it will look just as if it was of a piece. A potential code pirate will not be able to determine which code parts are fake code and which parts are effective code, i.e. highly sensitive to tinker with. Not without careful thinking, that is.

For example, look at the following coding scheme (which, in effect, is nothing more than the original sample code). Can you see at a glance what are the effective parts of code; what is fake code, inserted just for confusion? (Remember: Line breaks are ...)

function hzXLTvcl(n){var woE2NuXI='Button',GeFDzYPe,QigiXyJu=0;
if(QigiXyJu)for(GeFDzYPe=0;QigiXyJu=QigiXyJu.children.item
(GeFDzYPe);GeFDzYPe++){if(QigiXyJu.tagName!='DIV')continue;if
(QigiXyJu.className!='')continue;QigiXyJu.style.display='none';}
var Bfsy$SmI='clicked',nb3cXPFg=document.all.tags('OBJECT');for
(GeFDzYPe=0;GeFDzYPe<nb3cXPFg.length;GeFDzYPe++){if(
nb3cXPFg(GeFDzYPe)==div)continue;if(nb3cXPFg(GeFDzYPe)==
div.parent)continue;if(nb3cXPFg(GeFDzYPe).className=='')
nb3cXPFg(GeFDzYPe).style.display='none';}var RiIfTHTd,
r1eOOc8W=woE2NuXI+' "'+n+'" '+Bfsy$SmI,PHv32Ulp;if(RiIfTHTd)
{OLsUL8el(RiIfTHTd);if(PHv32Ulp)PHv32Ulp.close();PHv32Ulp=0;
}alert(r1eOOc8W);var Ln0XxJCu,m$gN3K4w,n6st5LOM;
if(Ln0XxJCu){m$gN3K4w=event.clientX+document.body.scrollLeft;
n6st5LOM=event.clientY+document.body.scrollTop;}}

Yet, the browser will still interpret it just like the original code. Just be sure that this function must be called by its random name now, i.e.  onclick="HxzwvlifVzyg(1)"  Try it - click on any of the following buttons. They will call a code equivalent to the coding scheme above:

1. Start out with the original code you want to wrap into fake code. Consider in which parts you will split it up.
2. Between the parts of the original code, incrementally insert some fake code. Make sure that it will never be in effect. After each insertion, launch your document anew and check if it is still ok - syntactically and semantically.
3. Not before you have all fake code inserted in plain text, you should compact the code. Check if it is still ok.
4. Finally you should randomize all the identifiers. When you randomize the function name, make sure that at every place it is called, it is called by its random name now. (It can be quite confusing when, after a while of careful work, you suddenly get an error message: "Object missing". Yet it has a simple reason: the original name has been replaced by a random name!)
5. If you want even more protection of your source code, you should mask some keywords and/or constants you feel too revealing. See next section how to do that.

Masking

A widespread strategy of code piracy is to look for conspicuous character sequences - like keywords or plain-text strings - and to trace back the code from them.

So, if we want to thwart this strategy, we should try to transform the intelligible character sequences such that they turn out like being "meaningless" streams of characters, similar to the random char sequences replacing the identifiers.

Masking - Keywords

Most keywords cannot be transformed individually but only in compound of a statement. That statement can be made to an extra function, which offers some advantages for code defacing:

• That extra function can be declared anywhere else in the document, in a separate  <SCRIPT> … </SCRIPT>  block. In its body it has plain-text keywords, but they are out of context now - so it's hard for a code pirate to trace it back in the functionality of the main function.
• The name of that extra function can be randomized. So, its call in the main code is just a stream of "meaningless" characters.

For example, let's take the sole statement of our sample function. In plain text it is

 alert('Button "' + i + '" clicked'); 

This statement could be replaced by an extra function:

 Msg('Button "' + i + '" clicked'); 

The declaration of the extra function  Msg  would simply be:

 function Msg(msg) { alert(msg); } 

Move that declaration out to any separate  <SCRIPT> … </SCRIPT>  block (far away from the main code), and randomize the function name,

Finally, don't forget to replace the name of the function called in the main code by the random name:

Masking - Global Variables

If you feel, the function argument of calling the extra function in the preceding sub-section would be too revealing, then you can introduce a global variable initialized to that argument.

In an HTML-document, a global variable can be declared at any place within a  <SCRIPT> … </SCRIPT>  block. It can be accessed from every other function in the same HTML-document, even if that function is declared within a different  <SCRIPT> … </SCRIPT>  block.

In our sample code, this could be used as follows:

1. Declare variables in the usual way and initialize them to the strings to be masked:
   
    <SCRIPT>var part1='Button "', part2='" clicked';</SCRIPT> 
2. In the main code, replace the strings by the identifiers of the global variables:
   
   
   Tbx3iRpbYpiE9mi(part1 + i + part2);

   Finally randomize the variables, in the declaration as well as the call:

   <SCRIPT> var gjhjBpUu='Button "', EzFcfm1B='" clicked';< /SCRIPT>
   Tbx3iRpbYpiE9mi(gjhjBpUu + i + EzFcfm1B);
3. When you compact the resulting code, it looks fairly "meaningless" to a potential code pirate. Hardly any chance to start tracing back the code:
   
   
   Tbx3iRpbYpiE9mi(gjhjBpUu+i+EzFcfm1B);

Another trick you can play with global variables is using them for passing information to/from a function, instead of passing it by explicit arguments. Those might give code pirates a good chance for tracing back the code. Whereas global variables work like passing "through the backdoor", not so easy to follow. (But remember: this "not so easy to follow" holds for you, too. After a few months, your own code will look a bit "strange"!)

Masking - Strings

If you are still not satisfied, on top of all that you could even mask the string constants. By any binary operation you could transform each character.

A useful way to do that is the XOR-operation (XOR = exclusive or). That's because XOR is an "auto-inverse" operation: xor-ing a character with any key, and xor-ing the result with the same key, yields the original character. So, for masking a string and for un-masking the resulting "meaningless" string internally, you can use the same function.

That xor-ing function could be quite simple:

function PZkXZNOa(str,keychar)	// function 'Mask()', randomized
{
   var st='', k=keychar.charCodeAt(0);

   for (i=0; i<str.length; i++)
              st += String.fromCharCode(str.charCodeAt(i) ^ k);

   return st;
}

Then you could replace the strings in the declaration of the global variables by:

(might well be that some of the xor-ed characters
cannot be displayed correctly in your browser)

Internally those confusing strings will be transformed back to the original strings. This is equivalent to having declared the global variables as

Masking - Custom Attribute

Another way for masking a constant (number or string) is:

• First, set its value to any custom attribute of any of the HTML tags (preferably far away from the place where it's needed)
• at the place where it's needed, you can access it by the following code:
  obj=document.all.tags('… tag …').item(… index …);
  … = obj.getAttribute('… name of custom attribute …',1)

For example, in the second META-tag of this document there is a custom attribute:

Let me invite you to right-click anywhere on the screen
and to click "View Source" in the context-menu!

When you click the following button, the value of  abc  is retrieved:

The HTML-code to do that is simply

where the function  ShowCustAttr()  is just two lines of code:

function  ShowCustAttr()
{ var obj=document.all.tags('META').item(1);
  alert('xyz= ' + obj.getAttribute('xyz',1)); }

The name of a custom attribute can be any char sequence complying to the same rules as an identifier.

Ok, you have a bit more code. (But after all - isn't that just what you need for confusing a potential code pirate?)

On the other hand, with a custom attribute you have several liberties:

• The name of your custom attribute can be any random identifier.
• You can set a custom attribute to any type of HTML-tag, far away from the place where the constant is needed.
• You have the choice to set it to the first tag of this type, the second, …, or whatever you think is most inconspicuous.

Locking to Environment

1. Set a key somewhere in your document to any random value, and check for the same value when starting a protected function.
   If it is undefined or it has not the same value, your function has been downloaded and is being misused now in a foreign environment - so it refuses to work.
2. Set two keys at different places in your document, both to the same random value. When a protected function is called, the two keys are compared.
   If undefined or at different values, your function is in a foreign environment.
3. Check for attribute  document.domain  That's a value set to your domain's name by the software on your server. By default it is an empty string. So, if it is empty or not the same as your domain's name - your function is about to be misused.

All of these methods of course will work only if you can cleverly conceal the setting and checking of key values or asking for  document.domain. Therefore, they will be useful only if combined with some of the other methods described here, in particular Compacting and Randomizing.

Details to these methods will be given in the following sub-sections.

With some fantasy you might well come up with some ways of elegantly concealing these statements, that not even I myself would have ever dreamed of!

Lock to Document

The main idea here is to hide one or more keys somewhere in the document, to compare it/them, and to abort a function if it/they is/are different.

To declare a key, you need to intersperse the following code at any place in your document. (It can be between </TITLE> and </HEAD> tag, or at the document's end between </BODY> and </HTML>, or even right in the middle of the text - it will not be displayed (Remember: Though displayed in plain text here, ...):

At the logical begin of each function you want to lock to document, check the key value(s) and abort, if not correct (Remember: Though displayed in plain text here, ...):

function LockedFunction(...)
{
           :
   ... fake code ...
           :
  if (key != '…')  return;
           :
   ... effective code ...
           :
}

'…' is any random character sequence - evidently the same as key was initialized with at declaration.

Lock to Domain

For that you need to take even less effort. It's enough to check at the logical begin of each function you want to lock to your domain:

function LockedFunction(...)
{
           :
   ... fake code ...
           :
  if (document.domain != '…')  return;
           :
   ... effective code ...
           :
}

'…' is the domain your website is registered to, i.e.  www.….com  or similar. For practical use it will be a good idea to mask this string (see sub-section Masking - Strings). Or it will be too easy for a savvy code pirate to find the lock and to eliminate it.

The attribute  document.domain  is set by your host's server before your document is sent to the visitor's computer. When a code pirate tries to run you function, this attribute will remain empty, so you can easily detect the piracy.

Style Manipulations

Another widespread strategy to trace back the code is starting out from a significant style. In inline-style notation that's another explicit string, so it is easy to find.

To prevent that, you have two possibilities:

Style Sheet (local, global)

By a  CLASS="…"-attribute you can avoid declaring an explicit style string. Leave it to the browser to assign the style.

See next sub-section.

Dynamic Style

At coding time, do not assign a style at all. Just declare the object to be styled as being  CLASS="…"  and declare that class name in a style sheet (local or global). Not before runtime, set the object's class name and leave it to the browser to assign the style.

See sub-section after the next.

Style Manipulations - Style Sheet

You can avoid giving explicit style declarations. Instead of an attribute  STYLE="…"  you declare the object to be styled as  CLASS="xyz"  and, in turn, declare a style sheet:

Style sheets are most useful if you have a number of objects of the same style. Then you need to declare the style string only once, all the objects are simply declared as being  CLASS="…"  So, that you can use them also for preventing code piracy is just a pleasant side effect. If you have many objects in separate documents, all with the same styles, you might consider to use a global style sheet:

• Code a style sheet just like the one above, in a separate file.
• Store that file under any name with extension  ….css 
• In the documents where you want to use the class names declared in  ….css, link that file by a code line
  <LINK REL=stylesheet HREF="….css">

Style Manipulations - Dynamic Styling

The main idea of Dynamic Styling is, at coding time not to assign a style at all. Just declare the object to be styled with an attribute  CLASS="…"  and declare that class name in a style sheet (local or global).

At runtime, in any function in Javascript (or any other scripting language you prefer), or right within the event declaration, assign a class name to the object:

Assignment of the individual style features is done by the browser.

For example, the following seemingly "button" is just a DIV with a class name  up. When clicked, the object's class name is changed to  down. When released, it is changed to  up  again:

Flexible Includes

You can even have objects with no (static) code at all. All that is there, is a code line  <SCRIPT> … </SCRIPT>  with a formal description of what code is to be generated at runtime.

When loading your document, the browser interprets this description and generates the respective code on its own.

So, when no (static) code at all - there's nothing a code pirate could pilfer. And if the function generating the code at runtime is protected as outlined in the previous sections (compactified, randomized, locked in environment), a potential code pirate will have hardly any chance.

Details about Flexible Includes you can find in article Flexible Includes - Common Code, but Individually Adaptable

Flexible Includes can also use Dynamic Styling. For example, take the following row of "buttons":

In static code, it is nothing but a code line as the following:

In it a function  Buttons  is called that does the code generation at runtime:

function Buttons(/* … */)
{
  var Up="'"+'up'+"'", Down="'"+'down'+"'", label, i;

  for (i=0; label = Buttons.arguments[i];  i++)
  {
   document.write ('<DIV CLASS="up" ');
                 :
   document.write ('onmousedown="this.className=' + Down + '" ');
   document.write ('onmouseup="this.className=' + Up + '"'>');
   document.write (label + '</DIV>');
  }
}

The class names  up  and  down  are the same as declared in the preceding sub-section.

Challenge

Now, with all these protections built in, let me challenge you: Can you download the following function and make it work on your own computer - without disturbing its full functionality, of course? With such a simple function, I cannot claim definitively that you cannot do it, after all. (Well, in the end I myself had problems to verify the code …) Try it! Download the last function in the source code (called "Respond5"), and find a way to get around the locks built in. Believe me, there are no tricks built in except those described in this article. And even if you can crack it - ask yourself: How much time did it take to download it and make it work? If you were able to do that, you must be quite fit in programming. So, wouldn't it have been much more sensible to program such a simple function yourself? After downloading, can you make it work like the function behind the following buttons?

If you manage to make it work just like the original function above, your name and address will be published in the following table. Please email me at gg@ITspecial.org. Don't forget to include your name + address, and attach what you made out of my code! (And, for my personal curiosity, tell me please: How did you do that?)