HTML encode text in javascript simple shortcut

Recently, I wanted to obfuscate HTML text for some reasons. I found this link http://www.voormedia.com/en/tools/html-obfuscate-scrambler.php
for scrambling text.

My HTML document was:

[code lang=”html”]
<div id=”pictures”>
<h2>Exterior</h2>
<a class=”hyperlinks” href=”link”> link1 inside Exterior</a>
<a class=”hyperlinks” href=”link”> link2 inside Exterior</a>
<a class=”hyperlinks” href=”link”> link3 inside Exterior</a>
<h2>Interior</h2>
<a class=”hyperlinks” href=”link”> link1 inside Interior</a>
<a class=”hyperlinks” href=”link”> link2 inside Interior</a>
<a class=”hyperlinks” href=”link”> link3 inside Interior</a>
<a class=”hyperlinks” href=”link”> link4 inside Interior</a>
<h2>Specific text 3</h2>
<a class=”hyperlinks” href=”link”> link1 inside specific text 3</a>
<a class=”hyperlinks” href=”link”> link2 inside specific text 3</a>
</div>
[/code]

The obfuscated code generated by http://www.voormedia.com/en/tools/html-obfuscate-scrambler.php:

[code lang=”js”]
<script type=”text/javascript” language=”JavaScript”>
var i,y,x=”3c6469762069643d22736f6d656964223e0d0a202020203c68323e5370656369666963207465787420313c2f68323e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3120696e73696465207370656369666963207465787420313c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3220696e73696465207370656369666963207465787420313c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3320696e73696465207370656369666963207465787420313c2f613e0d0a0d0a202020203c68323e5370656369666963207465787420323c2f68323e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3120696e73696465207370656369666963207465787420323c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3220696e73696465207370656369666963207465787420323c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3320696e73696465207370656369666963207465787420323c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3420696e73696465207370656369666963207465787420323c2f613e0d0a0d0a202020203c68323e5370656369666963207465787420333c2f68323e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3120696e73696465207370656369666963207465787420333c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3220696e73696465207370656369666963207465787420333c2f613e2020202020202020200d0a0d0a3c2f6469763e”;
y=”;
for(i=0;i<x.length;i+=2)
{y+=unescape(‘%’+x.substr(i,2));}
document.write(y);
</script>
[/code]

Basically the obfuscation script thinly disguised each character as hexadecimal value and puked out the unescaped version via a simple document.write js call.

Now, I decided to deobfuscate this obfuscated code. For this, I needed to HTML encode the value of “y” before passing it to document.write(). To my surprise, there is no native HTML encode function in javascript. Apparently, there is not much use of HTML encode function as its assumed that all HTML encoding comes from server side itself. But you can clearly feel its requirement if you are a pro developer, as illustrated in this example here.

Fortunately, a tweaked version of HTML encode can be constructed by appending normal unescaped string inside text node of a psuedo div element. Then returning the innerhtml of this div.
Here is the function code:

[code lang=”js”]
<script type=”text/javascript” language=”JavaScript”>
function HTMLencode(value)
{
var div = document.createElement(‘div’);
var text = document.createTextNode(value);
div.appendChild(text);
return div.innerHTML;
}
</script>
[/code]

Finally, here’s the complete code to deobfuscate:

[code lang=”js”]
<script type=”text/javascript” language=”JavaScript”>
function HTMLencode(value)
{
var div = document.createElement(‘div’);
var text = document.createTextNode(value);
div.appendChild(text);
return div.innerHTML;
}

var i,y,x=”3c6469762069643d22736f6d656964223e0d0a202020203c68323e5370656369666963207465787420313c2f68323e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3120696e73696465207370656369666963207465787420313c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3220696e73696465207370656369666963207465787420313c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3320696e73696465207370656369666963207465787420313c2f613e0d0a0d0a202020203c68323e5370656369666963207465787420323c2f68323e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3120696e73696465207370656369666963207465787420323c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3220696e73696465207370656369666963207465787420323c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3320696e73696465207370656369666963207465787420323c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3420696e73696465207370656369666963207465787420323c2f613e0d0a0d0a202020203c68323e5370656369666963207465787420333c2f68323e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3120696e73696465207370656369666963207465787420333c2f613e0d0a202020203c6120636c6173733d2268797065726c696e6b732220687265663d226c696e6b223e206c696e6b3220696e73696465207370656369666963207465787420333c2f613e2020202020202020200d0a0d0a3c2f6469763e”;
y=”;
for(i=0;i<x.length;i+=2)
{y+=unescape(‘%’+x.substr(i,2));}
document.write(HTMLencode(y));
</script>
[/code]