Protecting HTML source code from being stolen

andreiT — Mon, 01 Mar 2010 19:01:45 +0000

A lot of people are asking me how they can protect the source code of HTML of they’re site from being seen or worst being stolen. Well, the simple and short answer is that you can’t everything that the browser loads to render it can be seen by the user. The simplest method to protect you’re source HTML code is never to publish it on Internet .

Well seriously, there are some meta methods to protect you’re HTML source from being seen by a common user not from an expert user.I will enumerate some methods starting with the simplest.

The first method, maybe the most stupid one but used by many people (stupid ideas work for stupid people ) is putting a lot of empty line in front of HTML source. If the user looks at the source will see just empty white page. But if he scroll down on bottom of the page he will see the source.
The second method is to disable right click on page. To do that just take a look at next code://Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com

var message=”";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e)
{
if(document.layers||(document.getElementById&&!document.all))
{
if (e.which==2||e.which==3)
{(message);return false;}
}
}

if (document.layers)
{
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;
}
else
{
document.onmouseup=clickNS;document.oncontextmenu=clickIE;
}

document.oncontextmenu=new Function(“return false”)
// –>

Now that the user can do right click->show page source, you have achieved a good protection method, if you user is a old granny that doesn’t know to use (Ctrl+U) shortcut or Edit->View page soure.
The third method is to use javascript to hide the HTML content. A short example is presented next:
Let’s suppose that the page has the following code:

Sample HTML-hide sorece code

Blah blah blah

Now what we have to do next is to “encrypt” this content, go to http://www.swingnote.com/tools/texttohex.php or a similar page and convert the text source code to an hexa representation. You will obtain something similar to this:
%3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e

The page is the same but now has a different representation that is strange to a common user but remember that this is a meta protection method an advanced user can and will do the reverse method to obtain you’re source.
The next step is to create the “protected” page, create a new HTML document and add the next code:

As you can see all we are doing is to use javascript to write the content (document.write method).
!!! Important : if user has the javascript disabled he will not see anything because the code will not execute, therefore will be nothing displayed. Also remember that most of searchengine as Google or Yahoo crawl the web in text mode, remember that javascript is luxury not a necessity.
Now is time to get serious and speak about some more advanced, a little bit harder to break (not impossible to break), technique to keep you HTML source protected.The base idea is to encrypt the content of the HTML page, this time really encryption . Let imagine a function for encryption this time a simple one that is using xor logic function to achieve encryption. The code to do that is showed next:
//Encryptionfunction encrypt(text,key){

var rez=new Array(text.length);
for(i=0;i rez[i]=text.charCodeAt(i) ^key.charCodeAt(i%key.length);
}
return rez;
}

//Decryption

function decrypt(text,key){
var rez=”";
for(i=0;i rez+=String.fromCharCode(text[i] ^key.charCodeAt(i%key.length));

}
return rez;
}

Using the functions in this form won’t help to much because the user will see clear what is about, so I am going to obfuscate the code (if you don’t know what is that google it ). Now the code looks not so friendly :

eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!”.replace(/^/,String)){while(c–){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c])}}return p}(’8 c(2,4){9 3=d b(2.5);7(1=0;1<2.5;1++){3[1]=2.6(1)^4.6(1%4.5)}a 3}8 f(2,4){9 3=”";7(1=0;1<2.5;1++){3+=e.g(2[1]^4.6(1%4.5))}a 3}’,17,17,’|i|text|rez|key|length|charCodeAt|for|function|var|return|Array|encrypt|new|String|decrypt|fromCharCode’.split(‘|’),0,{}))

The next step is to convert you’re page in hexa as showed previously in this post, suppost that we are using the same page the hexa will be:

%3c%21%44%4f%43%54%59%50%45%20%68%74%6d%6c%20%50%55%42%4c%49%43%20%5c%22%2d%2f%2f%57%33%43%2f%2f%44%54%44%20%58%48%54%4d%4c%20%31%2e%30%20%54%72%61%6e%73%69%74%69%6f%6e%61%6c%2f%2f%45%4e%5c%22%20%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%54%52%2f%78%68%74%6d%6c%31%2f%44%54%44%2f%78%68%74%6d%6c%31%2d%74%72%61%6e%73%69%74%69%6f%6e%61%6c%2e%64%74%64%5c%22%3e%20%3c%68%74%6d%6c%20%78%6d%6c%6e%73%3d%5c%22%68%74%74%70%3a%2f%2f%77%77%77%2e%77%33%2e%6f%72%67%2f%31%39%39%39%2f%78%68%74%6d%6c%5c%22%3e%20%3c%68%65%61%64%3e%20%3c%6d%65%74%61%20%68%74%74%70%2d%65%71%75%69%76%3d%5c%22%43%6f%6e%74%65%6e%74%2d%54%79%70%65%5c%22%20%63%6f%6e%74%65%6e%74%3d%5c%22%74%65%78%74%2f%68%74%6d%6c%3b%20%63%68%61%72%73%65%74%3d%75%74%66%2d%38%5c%22%20%2f%3e%20%3c%74%69%74%6c%65%3e%53%61%6d%70%6c%65%20%48%54%4d%4c%2d%68%69%64%65%20%73%6f%72%65%63%65%20%63%6f%64%65%3c%2f%74%69%74%6c%65%3e%20%3c%2f%68%65%61%64%3e%20%20%3c%62%6f%64%79%3e%20%09%42%6c%61%68%20%62%6c%61%68%20%62%6c%61%68%20%3c%2f%62%6f%64%79%3e%20%3c%2f%68%74%6d%6c%3e

now is time to encrypt the hexa representation with a key, so apply encrypt(“…hexa text ….”,”…you personal key…”) . I used as key “secret” and have obtained this:

86,86,0,87,87,69,86,81,87,87,81,18,86,81,80,87,80,64,86,80,90,87,80,68,86,81,86,87,87,68,86,83,91,87,82,64,86,83,7,87,83,23,86,87,83,87,80,68,86,80,86,87,81,70,
86,81,0,87,81,77,86,81,80,87,87,68,86,80,0,87,87,70,86,87,7,87,87,18,86,87,5,87,80,67,86,86,80,87,81,71,86,87,5,87,87,18,86,81,87,87,80,64,86,81,87,87,87,68,86,
80,91,87,81,76,86,80,87,87,81,16,86,81,0,87,87,68,86,86,82,87,87,17,86,86,83,87,87,68,86,80,87,87,82,70,86,83,82,87,83,17,86,82,80,87,83,77,86,82,87,87,83,77,86,
83,5,87,83,17,86,83,82,87,83,23,86,87,5,87,87,18,86,81,86,87,81,17,86,80,0,87,87,70,86,87,83,87,80,23,86,87,81,87,83,76,86,82,87,87,82,64,86,82,83,87,86,21,86,87,5
,87,87,18,86,82,84,87,82,67,86,82,84,87,87,17,86,82,84,87,86,71,86,87,6,87,83,18,86,82,81,87,83,67,86,87,5,87,80,64,86,80,81,87,87,18,86,82,91,87,83,76,86,82,87,87,
83,16,86,83,0,87,86,69,86,87,5,87,81,64,86,80,87,87,81,64,86,87,5,87,82,76,86,83,91,87,82,64,86,83,7,87,83,23,86,86,82,87,87,16,86,82,87,87,82,70,86,83,82,87,83,17,
86,82,80,87,83,77,86,82,87,87,83,77,86,83,5,87,83,17,86,83,82,87,83,23,86,87,6,87,83,64,86,82,87,87,83,64,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,82,
87,87,83,16,86,83,0,87,87,68,86,82,91,87,83,16,86,83,0,87,83,17,86,82,80,87,86,16,86,80,0,87,87,70,86,83,91,87,82,64,86,82,87,87,82,68,86,86,2,87,87,18,86,87,5,87,
82,67,86,82,84,87,82,67,86,87,6,87,82,67,86,86,80,87,87,17,86,83,5,87,82,70,86,83,84,87,87,18,86,86,82,87,86,77,86,86,90,87,86,77,86,87,5,87,82,76,86,83,91,87,82,64
,86,83,7,87,83,23,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,86,23,86,83,7,87,83,65,86,82,87,87,83,69,86,87,83,
87,83,76,86,82,87,87,82,64,86,82,83,87,87,16,86,83,86,87,82,69,86,82,86,87,83,77,86,82,85,87,86,16,86,80,0,87,87,70,86,81,80,87,83,18,86,83,6,87,82,64,86,83,86,87,83,
17,86,82,87,87,87,16,86,80,87,87,82,77,86,82,83,87,83,65,86,80,0,87,87,70,86,87,83,87,83,71,86,83,5,87,83,17,86,82,87,87,83,65,86,83,6,87,82,64,86,86,7,87,80,23,86,87
,81,87,82,64,86,83,86,87,82,76,86,82,87,87,87,18,86,83,91,87,82,64,86,83,7,87,83,23,86,86,1,87,87,68,86,83,80,87,83,76,86,83,82,87,82,70,86,82,80,87,83,65,86,82,87,87,86,
16,86,82,86,87,82,64,86,83,85,87,87,16,86,86,91,87,80,23,86,87,81,87,87,68,86,87,5,87,86,17,86,87,83,87,86,23,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,
80,80,87,83,69,86,83,7,87,82,68,86,83,0,87,83,65,86,87,83,87,81,76,86,80,87,87,81,16,86,81,0,87,87,16,86,83,91,87,83,77,86,83,87,87,83,65,86,87,83,87,82,71,86,83,5,
87,82,70,86,83,86,87,83,71,86,83,86,87,87,68,86,83,80,87,83,18,86,83,87,87,83,65,86,86,0,87,87,18,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,87,83,87,
86,23,86,87,5,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,87,68,86,86,0,87,83,70,86,83,5,87,83,64,86,82,90,87,86,17,86,87,83,87,85,77,86,81,81,87,83,23,
86,83,82,87,83,76,86,87,83,87,83,70,86,83,0,87,83,69,86,83,91,87,87,68,86,83,81,87,83,23,86,83,82,87,83,76,86,87,83,87,86,23,86,87,5,87,83,70,86,83,5,87,83,64,86,82,
90,87,86,17,86,87,83,87,86,23,86,87,5,87,83,76,86,82,87,87,83,16,86,83,0,87,86,17

Now let’s create the script,that will display the content of page, that will be the final step:

document.write(unescape(decrypt(new Array(86,86,0,87,87,69,86,81,87,87,81,18,86,81,80,87,80,64,86,80,90,87,80,68,86,81,86,87,87,68,86,83,91,87,82,64,86,83,7,87,83,23,86,87,83,87,80,68,86,80,86,87,81,70,
86,81,0,87,81,77,86,81,80,87,87,68,86,80,0,87,87,70,86,87,7,87,87,18,86,87,5,87,80,67,86,86,80,87,81,71,86,87,5,87,87,18,86,81,87,87,80,64,86,81,87,87,87,68,86,
80,91,87,81,76,86,80,87,87,81,16,86,81,0,87,87,68,86,86,82,87,87,17,86,86,83,87,87,68,86,80,87,87,82,70,86,83,82,87,83,17,86,82,80,87,83,77,86,82,87,87,83,77,86,
83,5,87,83,17,86,83,82,87,83,23,86,87,5,87,87,18,86,81,86,87,81,17,86,80,0,87,87,70,86,87,83,87,80,23,86,87,81,87,83,76,86,82,87,87,82,64,86,82,83,87,86,21,86,87,5
,87,87,18,86,82,84,87,82,67,86,82,84,87,87,17,86,82,84,87,86,71,86,87,6,87,83,18,86,82,81,87,83,67,86,87,5,87,80,64,86,80,81,87,87,18,86,82,91,87,83,76,86,82,87,87,
83,16,86,83,0,87,86,69,86,87,5,87,81,64,86,80,87,87,81,64,86,87,5,87,82,76,86,83,91,87,82,64,86,83,7,87,83,23,86,86,82,87,87,16,86,82,87,87,82,70,86,83,82,87,83,17,
86,82,80,87,83,77,86,82,87,87,83,77,86,83,5,87,83,17,86,83,82,87,83,23,86,87,6,87,83,64,86,82,87,87,83,64,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,82,
87,87,83,16,86,83,0,87,87,68,86,82,91,87,83,16,86,83,0,87,83,17,86,82,80,87,86,16,86,80,0,87,87,70,86,83,91,87,82,64,86,82,87,87,82,68,86,86,2,87,87,18,86,87,5,87,
82,67,86,82,84,87,82,67,86,87,6,87,82,67,86,86,80,87,87,17,86,83,5,87,82,70,86,83,84,87,87,18,86,86,82,87,86,77,86,86,90,87,86,77,86,87,5,87,82,76,86,83,91,87,82,64
,86,83,7,87,83,23,86,80,0,87,87,70,86,86,6,87,87,68,86,86,0,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,86,23,86,83,7,87,83,65,86,82,87,87,83,69,86,87,83,
87,83,76,86,82,87,87,82,64,86,82,83,87,87,16,86,83,86,87,82,69,86,82,86,87,83,77,86,82,85,87,86,16,86,80,0,87,87,70,86,81,80,87,83,18,86,83,6,87,82,64,86,83,86,87,83,
17,86,82,87,87,87,16,86,80,87,87,82,77,86,82,83,87,83,65,86,80,0,87,87,70,86,87,83,87,83,71,86,83,5,87,83,17,86,82,87,87,83,65,86,83,6,87,82,64,86,86,7,87,80,23,86,87
,81,87,82,64,86,83,86,87,82,76,86,82,87,87,87,18,86,83,91,87,82,64,86,83,7,87,83,23,86,86,1,87,87,68,86,83,80,87,83,76,86,83,82,87,82,70,86,82,80,87,83,65,86,82,87,87,86,
16,86,82,86,87,82,64,86,83,85,87,87,16,86,86,91,87,80,23,86,87,81,87,87,68,86,87,5,87,86,17,86,87,83,87,86,23,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,
80,80,87,83,69,86,83,7,87,82,68,86,83,0,87,83,65,86,87,83,87,81,76,86,80,87,87,81,16,86,81,0,87,87,16,86,83,91,87,83,77,86,83,87,87,83,65,86,87,83,87,82,71,86,83,5,
87,82,70,86,83,86,87,83,71,86,83,86,87,87,68,86,83,80,87,83,18,86,83,87,87,83,65,86,86,0,87,87,18,86,82,87,87,83,77,86,82,87,87,83,23,86,83,86,87,86,17,86,87,83,87,
86,23,86,87,5,87,83,76,86,83,86,87,83,69,86,83,87,87,86,17,86,87,83,87,87,68,86,86,0,87,83,70,86,83,5,87,83,64,86,82,90,87,86,17,86,87,83,87,85,77,86,81,81,87,83,23,
86,83,82,87,83,76,86,87,83,87,83,70,86,83,0,87,83,69,86,83,91,87,87,68,86,83,81,87,83,23,86,83,82,87,83,76,86,87,83,87,86,23,86,87,5,87,83,70,86,83,5,87,83,64,86,82,
90,87,86,17,86,87,83,87,86,23,86,87,5,87,83,76,86,82,87,87,83,16,86,83,0,87,86,17),”secret”)));

As you can see the key is “secret” you must chose a better one dynamic generate on each session stored in cookies. For extra security obfuscate this cod too:

eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!”.replace(/^/,String)){while(c–){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return’\\w+’};c=1};while(c–){if(k[c]){p=p.replace(new RegExp(‘\\b’+e(c)+’\\b’,'g’),k[c])}}return p}(‘y.w(A(v(t z(4,4,0,3,3,m,4,b,3,3,b,j,4,b,a,3,a,c,4,a,r,3,a,f,4,b,4,3,3,f,4,8,l,3,9,c,4,8,7,3,8,e,4,3,8,3,a,f,4,a,4,3,b,g,4,b,0,3,b,k,4,b,a,3,3,f,4,a,0,3,3,g,4,3,7,3,3,j,4,3,
5,3,a,o,4,4,a,3,b,q,4,3,5,3,3,j,4,b,3,3,a,c,4,b,3,3,3,f,4,a,l,3,b,h,4,a,3,3,b,i,4,b,0,3,3,f,4,4,9,3,3,d,4,4,8,3,3,f,4,a,3,3,9,g,4,8,9,3,8,d,4,9,a,3,8,k,4,9,3,3,8,k,
4,8,5,3,8,d,4,8,9,3,8,e,4,3,5,3,3,j,4,b,4,3,b,d,4,a,0,3,3,g,4,3,8,3,a,e,4,3,b,3,8,h,4,9,3,3,9,c,4,9,8,3,4,u,4,3,5,3,3,j,4,9,p,3,9,o,4,9,p,3,3,d,4,9,p,3,4,q,4,3,6,3
,8,j,4,9,b,3,8,o,4,3,5,3,a,c,4,a,b,3,3,j,4,9,l,3,8,h,4,9,3,3,8,i,4,8,0,3,4,m,4,3,5,3,b,c,4,a,3,3,b,c,4,3,5,3,9,h,4,8,l,3,9,c,4,8,7,3,8,e,4,4,9,3,3,i,4,9,3,3,9,g,4,8,9,
3,8,d,4,9,a,3,8,k,4,9,3,3,8,k,4,8,5,3,8,d,4,8,9,3,8,e,4,3,6,3,8,c,4,9,3,3,8,c,4,a,0,3,3,g,4,4,6,3,3,f,4,4,0,3,8,h,4,9,3,3,8,i,4,8,0,3,3,f,4,9,l,3,8,i,4,8,0,3,8,d,4,9,
a,3,4,i,4,a,0,3,3,g,4,8,l,3,9,c,4,9,3,3,9,f,4,4,2,3,3,j,4,3,5,3,9,o,4,9,p,3,9,o,4,3,6,3,9,o,4,4,a,3,3,d,4,8,5,3,9,g,4,8,p,3,3,j,4,4,9,3,4,k,4,4,r,3,4,k,4,3,5,3,9,h,4,8,
l,3,9,c,4,8,7,3,8,e,4,a,0,3,3,g,4,4,6,3,3,f,4,4,0,3,8,h,4,8,4,3,8,m,4,8,3,3,4,d,4,3,8,3,4,e,4,8,7,3,8,n,4,9,3,3,8,m,4,3,8,3,8,h,4,9,3,3,9,c,4,9,8,3,3,i,4,8,4,3,9,m,4,
9,4,3,8,k,4,9,s,3,4,i,4,a,0,3,3,g,4,b,a,3,8,j,4,8,6,3,9,c,4,8,4,3,8,d,4,9,3,3,3,i,4,a,3,3,9,k,4,9,8,3,8,n,4,a,0,3,3,g,4,3,8,3,8,q,4,8,5,3,8,d,4,9,3,3,8,n,4,8,6,3,9,c,4,4,
7,3,a,e,4,3,b,3,9,c,4,8,4,3,9,h,4,9,3,3,3,j,4,8,l,3,9,c,4,8,7,3,8,e,4,4,1,3,3,f,4,8,a,3,8,h,4,8,9,3,9,g,4,9,a,3,8,n,4,9,3,3,4,i,4,9,4,3,9,c,4,8,s,3,3,i,4,4,l,3,a,e,4,3,
b,3,3,f,4,3,5,3,4,d,4,3,8,3,4,e,4,9,3,3,8,k,4,9,3,3,8,e,4,8,4,3,4,d,4,a,a,3,8,m,4,8,7,3,9,f,4,8,0,3,8,n,4,3,8,3,b,h,4,a,3,3,b,i,4,b,0,3,3,i,4,8,l,3,8,k,4,8,3,3,8,n,4,
3,8,3,9,q,4,8,5,3,9,g,4,8,4,3,8,q,4,8,4,3,3,f,4,8,a,3,8,j,4,8,3,3,8,n,4,4,0,3,3,j,4,9,3,3,8,k,4,9,3,3,8,e,4,8,4,3,4,d,4,3,8,3,4,e,4,3,5,3,8,h,4,8,4,3,8,m,4,8,3,3,4,
d,4,3,8,3,3,f,4,4,0,3,8,g,4,8,5,3,8,c,4,9,r,3,4,d,4,3,8,3,s,k,4,b,b,3,8,e,4,8,9,3,8,h,4,3,8,3,8,g,4,8,0,3,8,m,4,8,l,3,3,f,4,8,b,3,8,e,4,8,9,3,8,h,4,3,8,3,4,e,4,3,5,3,
8,g,4,8,5,3,8,c,4,9,r,3,4,d,4,3,8,3,4,e,4,3,5,3,8,h,4,9,3,3,8,i,4,8,0,3,4,d),”x”)));’,37,37,’|||87|86||||83|82|80|81|64|17|23|68|70|76|16|18|77|91|69|65|67|84|
71|90|85|new|21|decrypt|write|secret|document|Array|unescape’.split(‘|’),0,{}))

We have an pretty good protection, must remember a meta HTML protection because this can be broken by a good hacker.

I hope that this article was helpful I am waiting for you’re feedback.

[UPDATE:] here are the source used in this article
Secure_HTML_code

Tara Andrei » html protector

Protecting HTML source code from being stolen