Click here to Skip to main content
15,867,986 members
Articles / Web Development / HTML
Tip/Trick

Different Aspects of Website Protection

Rate me:
Please Sign up or sign in to vote.
4.78/5 (6 votes)
18 Jan 2014BSD3 min read 17.2K   3   8
This tip explains the way you can protect the source code of an HTML page.

Contents

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:

a

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.

JavaScript
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:

JavaScript
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.

JavaScript
<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:

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

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

JavaScript
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).

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("");
} 

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
<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

  • 18th January, 2014: Initial post

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Student
Sweden Sweden
My name is Artem, and I am a student at the School of Electrical Engineering and Computer Science at KTH Royal Institute of Technology.

Currently working on https://cryptolens.io.

Comments and Discussions

 
QuestionWhy? Pin
Wombaticus18-Jan-14 22:15
Wombaticus18-Jan-14 22:15 
AnswerRe: Why? Pin
Artem Los18-Jan-14 22:41
Artem Los18-Jan-14 22:41 
GeneralRe: Why? Pin
Wombaticus18-Jan-14 22:48
Wombaticus18-Jan-14 22:48 
Yes, but why should you care if they do? It's only HTML and maybe some JavaScript - hardly anything worth protecting. (They can always copy the rendered content straight out of their browser of course.) Meanwhile, by leaving your source visible, you may help others to learn.
AnswerRe: Why? Pin
Artem Los18-Jan-14 23:05
Artem Los18-Jan-14 23:05 
GeneralRe: Why? Pin
HaBiX19-Jan-14 2:24
HaBiX19-Jan-14 2:24 
AnswerRe: Why? Pin
Ed Gadziemski19-Jan-14 5:15
professionalEd Gadziemski19-Jan-14 5:15 
SuggestionConfusion of terms use. Pin
DaveAuld18-Jan-14 20:25
professionalDaveAuld18-Jan-14 20:25 
GeneralRe: Confusion of terms use. Pin
Artem Los18-Jan-14 22:45
Artem Los18-Jan-14 22:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.