Understanding HTML Obfuscation

The literal meaning of "Obfuscate" is to make things unclear. Let us see how it adds to web application security in this article.

Obfuscation vs Minification

HTML Obfuscation is different from Minification. Most people mix up these two things. The goal of minification is to reduce the size of content and save bandwidth and often achieved by avoiding unwanted characters like comments, whitespaces, delimiters etc... Where as Obfuscation is a series of transformation steps like shortening variable names , encrypting code so that it is not straight forward to read and understand the code and hard to reverse engineer it.

What is the Need For HTML Obfuscation?

Users posts sensitive information through web applications. It can be username and password in a login form, or it can be credit card information in checkout page. End of the day, they are input fields.

Even if the password field is an input field with type=password. One can inspect the password field, toggle it's type and can see the value. This is an advantage to hackers as well. They might inject malicious code and with out the knowledge of user, these malwares can track data from these input fields and share with hackers.

To avoid this, we need to Obfuscate the HTML page content. HTML Obsfucation helps in avoiding Mail Harvesting softwares, hide info from search engines. There are many open source tools available online to achieve it. Let us take a simple form as shown below and try to Obfuscate it.

Let us consider the following HTML document with form fields..

User Signup Form

User Signup Form

<label for="uname">User name:</label><br>
<input type="text" id="uname" name="uname" value=""><br>
<label for="lname">Password:</label><br>
<input type="password" id="password" name="password" value=""><br><br>
<input type="submit" value="Submit">

Let us Obfuscate it using the free tool at https://www.wmtips.com/tools/html-obfuscator. we can see the resulting code is not easily readable..

We can serve the obfuscated code instead of plain HTML. We can see this code is hard to read. With Advanced tools and custom obfuscation logics, we can make it even harder.

Thats it from our side!! Hope you gained some knowledge about HTML Obfuscation.

Note:

1.  You can use any paid tool or a npm to obfuscate..we used WMTIPS only to demonstrate the concept.                                                                                                              

2. Even With Obfuscated code, you can inspect elements and read data using chrome developer tools, however obfuscation can prevent malware to read your HTML code..Try view source and observe!