EDIT: Please check out the updated version of this article.
When encrypting a website, we need to understand the way a browser interprets our input, i.e. html/javascript. In this case, we can produce code that is only readable by a browser.
There are several ways to encrypt a page, the main idea behind all methods is it to convert a human-readable code to ONLY computer-readable one.
- By HTML only
- By JavaScript
- Using hexadecimal values
- Using “escape/unescape”
- Using an advanced algarithm
By HTML Only
In HTML, all letters(chars) can be written in a ASCII form, i.e., if we have a small “a” that is to be converted, we simply look up its ASCII value and write it instead of the actual char: a, and so on.To sum up, the prefix is “&#”, then the ASCII code, and lastly a semicolon, “;”.
function encToASCII(_text)
{
var _newText="";
for(var i=0; i < _text.length;i++)
{
_newText += "&#" + _text.charCodeAt(i) + ";";
}
return _newText;
}
By JavaScript
JavaScript website encryption can be divided into several parts. One way is by using the hexadecimal value of a char, and write it instead of the actual char. We have to use JavaScript to perform this action, as it is shown below:
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);
}
This method will only encrypt the given text, though, but, the user has to be able to see the encrypted text as a result (the browser won’t understand this code unless we have a function that will interpret it). This method is based on JavaScript, and we therefore need to use JavaScript to decrypt. Let us say that we encrypt “Hello World!”, which results “%48%65%6c%6c%6f%20%57%6f%72%6c%64%21”. As you might see, the prefix is “%”, and then the hexadecimal number. If the result above is our webpage, the source of that webpage should look similar to the example below:
<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 the HTML Only encryption and JavaScript encryption. For example, if you encrypt your whole page with HTML Only encryption, including “tags”, the result in the web-browser will be the source of the page. Encoding “<p>Hi</p>” will result “<p>Hi</p>”. However, by using JavaScript, the result will be executed, as a normal page would. Encoding “<p>Hi</p>” will result “Hi”.
There is also, as you might see, an opportunity to use functions escape and unescape as they are. Their actual usage is to encode/decode the url, i.e., replacing spaces, “special chars.” to url friendly one. All letters and numbers will stay the same, they will not be changed.
document.write(escape("Hello World!"));
The result you will get is Hello%20World%21. It replaces spaces with %20, and “!” with %21. Both of them are special characters(chars).
Unescape function will decode to a normal string.
document.write(unescape("Hello%20World%21"));
By JavaScript – Advanced algorithm
It took a while for me to define what an advanced algorithm in our case would be. I would say that the more advanced algorithm you have, the more time it takes to “crack it”. The method that will be described in this section of the post is my own little version of advanced algorithm. The method is using a logical operation, called XOR. If you already now what that is, jump to the next section.XOR is an operator, and works at a binary level. A definition in words is that the first or second value is true, but not both. Truth table shown below:
| Input |
Output |
| A |
B |
| 0 |
0 |
0 |
| 0 |
1 |
1 |
| 1 |
0 |
1 |
| 1 |
1 |
0 |
| XOR Truth table |
An operation, 5 XOR 6, would result 3. The thing is, if we take either 5 XOR 3 = 6 or 6 XOR 3 = 5, we always return to our previous numbers. Conclusion, if two numbers are known, we always will get the third one.
As you might see, the decimal value 5 corresponds to 101; 6 corresponds to 110; 3 corresponds to 011.
By using XOR operation, we might, for instance, set a secret number, or a series of numbers, which always will return our third number. In this post, we will go though how to use a series of numbers, but also how to do it with only one number.
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("");
}
The code shown above is my own advanced algorithm. First, we declare “a”, which is a char at certain place in string t; and b, which is a digit at certain place in k. The text to encrypt is placed in t (all chars), and the key to encrypt with is placed in k (only digits). The variable r is an array of the result/output.
First of all, we assign a to the char code at i. The variable b is then assigned to the char at i mod the length of key.
The reason why I put a modular operation there is simple. If the key length we use is smaller than the text length, we will not be able to encrypt the whole string without it. When we are encrypting something, the key has to be of the same length as the text. By using a modular operation, even if the key is smaller than the text, it will be repeated. For example, if the key is 567 (key length=3), and the text length is 6, the output key will result 567567.
Secondly, an logical operation is executed. In other words, variable a equals to itself XOR b. Variable a has therefore a new value which is later assigned to r[i], i.e., a place in the array r which corresponds to the index value i.
Lastly, we join our array without some joining char, and that will be our encoded text. To decrypt, use the same function; place your encrypted text in t, and the key in k.
You can, however, remove this key opportunity, or as I previously defined it, using a key series, to a single key digit. You might still use this method, but only having a key, for instance, 6, or, you might remove it at all, and set the secret digit inside the function.
If you want to include this code in your project without typing the code above, include this code before all scripts (see this code in action):
Source 1:
<script src="https://dev.clizware.net/lib/scrypto1.js"></script>
Source 2:
<script src="https://clizware.webs.com/lib/scrypto1.js"></script>
I hope this article was useful, and that you hopefully have learned something new! Below you find some useful links:
Encrypter – (for html only encryption)
http://www.iwebtool.com/html_encrypter – (encrypting to hexadecimal values, javascript)
Bitwise Operators – (about logical operators)
Escape and Unescape
Eval – (advanced encryption, etc.)
This article was revised 17.03.2013.
Visual Studio will soon be upgraded to a new version, 2012. It will be more integrated into the new Windows 8 operating system, with all designing features available in Windows. For designers, it will be more easier to only use XAML as a language for the UI. XAML is also integrated into other designing products of Microsoft, especially in Expression Blend. Visual Studio’s IDE is also changing a lot. Now, you will have the same designer features for all supported languages, for example, C#, C++, VB. XAML designer is a new designing tool that should make it easier to synchronize Visual Studio with Expression Blend.