Sunday, April 25, 2010

Encryption on Blogger I - obfuscation

I often find myself publishing articles on Blogger / Blogspot that I do not want to be read in their entirety by everybody. I want to hide parts of them and make them available only to a select group of people, or nobody at all. If you ever feel this way, this article's for you.

Matrix Code Screensaver Wordpress has the ability to password protect entire articles. However, I do not know of any hack or trick that can be used to encrypt only part of the text of an article. This hack is thus far better and more powerful than what comes with Wordpress. It could however be implemented on Wordpress as well.

The first technique is not encryption per se but rather code obfuscation. It makes it more difficult for somebody to steal your code. It is a technique sometimes employed by template designers to make their credits in the footer more difficult to modify. It involves escaping the characters to be hidden using a the escape / unescape function. Let’s take for instance the following link:

<a href="http://www.blogidol.ro" target="_blank">BlogIdol.ro</a>

Using a tool such as Q-esc (link and backup below), you can transform the following code into

<Script Language='Javascript'>
<!--
document.write(unescape(%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%6F%67%69%64%6F%6C%2E%72%6F%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%42%6C%6F%67%49%64%6F%6C%2E%72%6F%3C%2F%61%3E));
//-->
</Script>

backup

The online tool I used for the above example is WebCode’s escape-unescape tools. Unfortunately, such tools have the bad habit of disappearing quite often. It’s instructive to see how this is accomplished.

Web-Code Escape tool captionLooking in the source code of that webpage, we find that the main function is external, called through the following <head statement:

<script type="text/javascript" language="JavaScript" src="http://www.web-code.org/includes/jumi/escape.js"></script>

and containing:

/*
* Copyright by Geek Boy Enterprises, Inc.
* Author : Roger D. Hosto Jr.
* Email : geekboyenterprises&#63;gmail.com
* URL : http://www.web-geek.com/utils/javascript_escape_unescape_tool.html
*/
var decToHex = new Array();

decToHex = ["00","01","02","03","04","05","06","07","08","09","0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19","1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29","2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39","3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49","4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59","5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69","6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79","7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89","8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99","9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9","AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9","BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9","CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9","DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9","EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9","FA","FB","FC","FD","FE","FF"];

function uncode(){

    var text = document.form1.clear.value;
    x = text.length;

    var e = "";

    for(i=0;i<x;i++)
    {
        e += "%"+decToHex[text.charCodeAt(i)];
    }
    document.form1.encode.value = e;
}
function escape_code(){

    var text = document.form1.clear.value;
    var e = escape(text);

    document.form1.encode.value = e;

}
function deUncode(){

    var y = unescape(document.form1.encode.value)

    document. form1.clear.value = y;
}

The Escape Tool contains the following table:

<table style="width: 500px; height: 400px;" border="0"
cellpadding="1" cellspacing="0">
  <tbody>
    <tr>
      <td align="left" bgcolor="#aaaaaa">
      <table style="width: 500px; height: 400px;" border="0"
cellpadding="1" cellspacing="0">
        <tbody>
          <tr>
            <td
style="width: 500px; background-color: rgb(238, 238, 238);"><font
color="#ffffff"> </font>

            <font color="#ffffff"><b> </b> </font></td>
          </tr>
          <tr>
            <td
style="text-align: center; background-color: rgb(238, 238, 238); width: 400px;">
            <div style="text-align: left;"> </div>
            <table style="width: 490px; height: 400px;"
cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td
style="width: 490px; vertical-align: top; background-color: rgb(238, 238, 238);">
                  <form name="form1"><b>clear text</b><br />
                    <textarea name="clear" rows="10"
cols="40"></textarea> <br />
                    <b>escape text</b><br />
                    <textarea name="encode" rows="10"
cols="40"></textarea> <br />
                    <input value="Complete Escape"
onclick="uncode();" type="button" /> <input
value="Complete Unescape" onclick="deUncode();"
type="button" /><br />
                    <input value="Simple Escape"
onclick="escape_code();" type="button" /> <input
value="Simple Unescape" onclick="deUncode();"
type="button" /><input value="Clear" type="reset" /></form>
                  </center>
                  <br />
                  <br />
                  </td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>

Thus, you should be able to not only obfuscate your code, but if the tool ever goes down, you should be able to make your own!

Sources / More info: bs.n-code, Q-esc, html-escape list, escape-articles, WebCode-esc-unesc, ucc

1 comment:

  1. I think I shall show this to the coders here at Metalfrog Studios! Thank you!

    - Adam.
    http://www.metalfrog.co.uk/web-design.html

    ReplyDelete

Thank you for commenting and rest assured that any and all comments are welcome, whether positive or negative, constructive or distructive. Unfortunately, if you comment in this view I might not know about - please use the regular (Desktop) view.
I am using Disqus for commenting, but Blogger is not showing it so your comments may end up not being displayed - tell Google about it!