In one of my previous posts, I talked about Unreadable or Hide Your jQuery Source Code. So, now your jQuery code is fully protected; it will be the most challenging task for someone to know/understand your code.
But what about HTML and CSS?
Well, you can preserve your HTML and CSS codes, too, by converting them to unreadable javascript.
Once you convert your codes to unreadable javascript, you can use it on any HTML page, and no one will be able to find the actual CSS or HTML code through the page source of your HTML page. Firstly, select any HTML and CSS code that you want to convert to unreadable javascript.
Your HTML and CSS code should look like this:
<style type='text/css'>
.example {
background:#000000;
border: 1px solid #79D858;
width:400ox;
height:300px;
text-align:center;
}
.exampletexts{
font-size:36px;
color:ffffff;
}
</style>
<div class="example">
<div class="exampletexts">Example Texts</div>
</div>
Now, go to about.com’s HTML to Javascript converter page and paste your HTML and CSS codes together into textarea; click the “Convert” button, then immediately it will convert your code to Javascript that you can find another textarea box right below the convert button.
The converted javascript code will look like this:
document.writeln('<style type=\'text\/css\'>\n.example {\nbackground:#000000;\nborder: 1px solid #79D858;\nwidth:400ox;\nheight:300px;\ntext-align:center;\n}\n.exampletexts{\nfont-size:36px;\ncolor:ffffff;\n}\n<\/style>\n<div class="example">\n<div class="exampletexts>Example Texts<\/div>\n<\/div>');
So, we have converted HTML and CSS code to javascript, and now, we will need to convert javascript code to unreadable javascript code. We can do that using the Obfuscator tool. Go to the Js Obfuscator tool Website, paste the javascript code into the textarea box, then press the “obfuscate” button immediately. It will convert your javascript code to unreadable javascript code. Then all unreadable javascript code will look like this:
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}('d.c(\'<2 e=\\\'b\\/g\\\'>\\n.1 {\\h:#a;\\6: 5 7 #9;\\8:f;\\t:q;\\i-r:s;\\n}\\n.3{\\u-p:o;\\j:k;\\n}\\n<\\/2>\\n<0 4="1">\\n<0 4="3">l m<\\/0>\\n<\\/0>\');',31,31,'div|example|style|exampletexts|class|1px|nborder|solid|nwidth|79D858|000000|text|writeln|document|type|400ox|css|nbackground|ntext|ncolor|ffffff|Example|Texts||36px|size|300px|align|center|nheight|nfont'.split('|'),0,{}))
Now, add a javascript tag to the code and use it on any HTML page you like. I am repeating, don’t forget to add the javascript tag to the code. After adding javascript tag to the code, it should look like this:
<script type="text/javascript">
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}('d.c(\'<2 e=\\\'b\\/g\\\'>\\n.1 {\\h:#a;\\6: 5 7 #9;\\8:f;\\t:q;\\i-r:s;\\n}\\n.3{\\u-p:o;\\j:k;\\n}\\n<\\/2>\\n<0 4="1">\\n<0 4="3">l m<\\/0>\\n<\\/0>\');',31,31,'div|example|style|exampletexts|class|1px|nborder|solid|nwidth|79D858|000000|text|writeln|document|type|400ox|css|nbackground|ntext|ncolor|ffffff|Example|Texts||36px|size|300px|align|center|nheight|nfont'.split('|'),0,{}))
</script>
Now your code is fully protected, and no one will be able to find out the actual HTML and CSS code, and it will be work ideally. One of the essential things is that you should save your HTML and CSS version as a backup because after converting the code to an unreadable one, you may restore it to the HTML and CSS version.
