Contents

Introduction
Approaches

Using HTML only
Using JavaScript

Using hexadecimal values
Using escape and unescape
Using an algorithm

Introduction

The purpose of this tip is to give a general overview of website protection, i.e., how it is possible to make the source of a static web page unreadable for human eyes. This is my updated version of the article I wrote some time ago. It can be found here.

Approaches

Using HTML Only

In HTML, all characters can be expressed using ASCII code, i.e., if we want to write a lowercase 'a' using ASCII, we would first look up its ASCII code (see here), which is '97' and write it in the following form:

	&#97;

As it can be seen, we start writing the prefix '&#', then the ASCII value, and end with a semicolon ';'. We can take the advantage of JavaScript and convert any text into ASCII value form.

function encToASCII(_text)
{
    var _newText="";
 
    for(var i=0; i < _text.length;i++)
    {
        _newText += "&#" + _text.charCodeAt(i) + ";";
    }
 
    return _newText;
}

Using JavaScript

JavaScript opens doors for more sophisticated encryption. There are several ways we can use JavaScript to encrypt a peace of text; in this article, we are going to look at three methods.

Using hexadecimal values

In contrast to HTML only encryption, instead of using ASCII codes to represent characters, we can use hexadecimal values (table of hexadecimal codes). A lowercase 'a' has the hexadecimal code '61', and we would express this as:

%61

In order to save us some time converting text into hexadecimal code, we can use JavaScript to do it for us:

function encToHex(_text)
{
    var _newText="";
    for (var i=0; i < _text.length; i++)
    {
        _newText += "%" + decimalToHex(_text.charCodeAt(i));
    }
    return _newText;
}
function decimalToHex(_num)
{
    return _num.toString(16);
}

However, the hexadecimal code cannot be interpreted by the browser directly, so we need to pass it to another function that would convert it back to readable text.

If we would encrypt 'Hello World' using encToHex we would get '%48%65%6c%6c%6f%20%57%6f%72%6c%64%21'. Now, in order to make the browser understand that we want to write 'Hello World', we would need to use unescape function built-in to Java Script.

<script type="text/javascript">
document.write(unescape("%48%65%6c%6c%6f%20%57%6f%72%6c%64%21"));
</script>

NOTE: There is a big difference between HTML only (using ASCII values) and the JavaScript encryption methods, which is the way 'tags' are interpreted. For example, if you would encrypt your entire page (including html, head, body, tags, etc) using HTML only encryption, when displaying the page, you would see the source of the page with all tags. Thus the encrypted text would only be treated as pure text. In contrast to JavaScript, if you encrypt the source of your page using any Java Script encryption method mentioned in this tip, when displaying the page, you would see the page as it is supposed to be seen, i.e., the encrypted text would be treated as html code.

Using escape and unescape

As we saw in the previous example, there are some built-in functions in Java Script that allow us to encrypt HTML source. The functions escape and unescape are originally used to convert a string into a URL friendly one by replacing special characters (for instance spaces). However, letters and digits are not going to be altered.

In order to encrypt, we would do following:

  document.write(escape("Hello World!"));

The result you would get is 'Hello%20World%21'. Now, in order to decrypt:

 document.write(unescape("Hello%20World%21"));

Using an algorithm

Thanks to JavaScript, we have the power of making a very sophisticated cipher that can turn source code unreadable for a human being. However, it has to be considered that since the browser should always be able to decipher the encrypted source code, it can always be cracked by a skilled person. It's a matter of time!

In this example, I am going to use a simple version of XOR cipher by using a logical operator. The important result with XOR cipher is that there is the same operation for both encryption and decryption (you can see the presentation attached to this tip for more information).

function en_doc(t,k)
{
    var a;
    var b;
    var r=new Array();
    for (var i=0; i<t.length ;i++)
    {
        a=t.charCodeAt(i);
        b=k.charAt(i%k.length);
        a^=b;
        r[i]=String.fromCharCode(a);
    }
    return r.join("");
}

Simply pass the source code into t and your key (it should be a string that contains digits) into k. Below, an example page that will encrypt using XOR cipher (you can see it live here):

<html>
<head>
<script type="text/javascript">
function en_doc(t,k)
{
    var a;
    var b;
    var r=new Array();
    for (var i=0; i<t.length ;i++)
    {
        a=t.charCodeAt(i);
        b=k.charAt(i%k.length);
        a^=b;
        r[i]=String.fromCharCode(a);
    }
    return r.join("");
}

var password = "93183123"; //only numeric values, (positive integers including 0)

function encrypt_decrypt()
{
  var text = document.getElementById("textbox1").value;
  var result = en_doc(unescape(text),password);

  document.getElementById("textbox1").value = result; 
}
</script>
</head>
<body>

Enter the message to encrypt or to decrypt below:<br/>
<textarea id="textbox1"></textarea><br/>
<button type="button" onclick="encrypt_decrypt()">Encrypt/Decrypt</button>

</body>
</html>

History

18^th January, 2014: Initial post

Different Aspects of Website Protection