All-In-One HTML + Javascript + CSS Formatter

I do a lot of pen testing on web applications. From time to time, I have to analyze and understand how the web page code works. However, my task becomes complicated as web applications typically use some sort of source code compression. This makes it very hard to understand the code and hampers the readability to a large extent.

A web page is composed of three major content types, namely HTML content, Javascript Code and CSS styling code. I felt the need of a tool that could beautify or format the entire web page source code. I use Burp Suite, my favorite web proxy tool. However, it does not have source code formatting feature, it just colors the web page by choosing different colors for html tag names, html attribute values, javascript, css, etc.

I looked on the internet for free alternatives, but I could not find free tools that could format the entire web page. Most of them could only format either one of HTML or Javascript or CSS. So, I decided to write a perl script myself. I used the libraries HTML::Tidy by Dave Raggett and Javascript::Beautifier by Einars Lielmanis. And I have written my own CSS formatting code.

Example of HTML Formatting

Example of CSS Formatting

Example of Javascript Formatting

In addition, I have done one more improvement by formatting the javascript code in html event handlers. I picked the comprehensive event handlers list from XSS Attacks Book by RSnake, Jeremiah, Pdp, Anton Rager and Seth Fogie. Another excellent book to have on your shelf.

Example of Event Handler Code Formatting (see the onload and onclick event handlers)

And finally the …

Inferno’s All-In-One HTML + Javascript + CSS Formatter
Paste your Source Code below

I would advise trying any of the search engines’ source code like google, yahoo, etc. Their code is highly compressed. If you have any problem using the text box above, try using this Link.

Plans for future additions include
* Add custom event handlers and variables (e.g. expr variable in Samy Worm Code)
* Javascript Deobfuscation
* More configuration Options
* Burp Proxy Plugin

Please provide your valuable suggestions to improve this tool. This tool is completely free for your use.

Tags: Beautifier, CSS, Formatter, HTML, Javascript, Perl

This entry was posted on Thursday, January 29th, 2009 at 7:27 am and is filed under General, Solutions, Tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “All-In-One HTML + Javascript + CSS Formatter”

dblackshell says:

January 29, 2009 at 3:17 pm

I use firebug for analyzing a website structure, functionality. It does format the code, for deobfuscating javascript I use the javascript shell (for any other javascript debugging also)… I think you’ve done a great job, but there are some who like to do the job directly from the browser.
Inferno says:

January 29, 2009 at 4:58 pm

Hi dblackshell,

Firebug is a great tool. It does HTML and CSS content formatting (in seperate tabs though). However, it does not format the javascript code inside script tags and event handlers. So, my tool might help a person to understand all the web page code at one place. I am thinking to extend the concept to a firefox / burp suite plugin so that it could be more useful.

Thanks for your comments,
Inferno

SecureThoughts.com