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]

Changing Orientation in Iphone simulator from Portrait to Landscape

While writing my app for iOS 4 in XCode 4, I faced this situation of changing orientations from Portrait to landscape and vice-versa. This initially appeared like cake-walk to me, something which could be done with a flip of a button. Obviously I was wrong!

I tried referring to http://stackoverflow.com/questions/475553/how-can-i-test-landscape-view-using-the-iphone-simulator but this thread landed me nowhere, hence I decided to write this tutorial myself.

Assumptions

1) You are using Xcode 4

2) You want to design app in Landscape Mode

3) Your project name is "Something"

Steps

1) In your SomethingAppViewController.xib file, select view (blue outline of barebones iphone screen) and goto Attributes Inspector on the Right. Change Orientation to Landscape.

Orientation = Landscape

 

2) Goto Something-Info.plist inside Supporting Files and add a new row (right click in table and select "add row"). Choose "Initial Interface Orientation" and set its value as "Landscape (left home button)". [optional] If you also want to hide the status bar (where battery, carrier info etc re displayed) from the phone screen, then select "Status bar is initially hidden" as "YES"

changing orientation in info plist

 

3) We are almost there. Now if you'll run the project you will observe that the device is rotated, but the content still remains in portrait mode. You must be asking "Is there a way to rotate the content also?" Ofcourse there is and that is our third and last step. Goto SomethingViewController.m file and locate the function shouldAutorotateToInterfaceOrientation. Change "UIInterfaceOrientationPortrait" to "UIInterfaceOrientationLandscapeLeft".

changing interfaceOrientation

 

4) Thats it, there is no step 4! You should see the orientation changed successfully!

 

Final screenshot

 

Let me know in case of any troubles 🙂  

Hello world!

Hi friends! Thanks for landing here. The world is nice place. I just endeavor to keep it that way.

Email me at hiprakhar@gmail.com