Hack 30. Show Hidden Form Fields

See what hidden information you're submitting to a site.

One of the features of HTML forms is the ability to include hidden form fields. If you view source on a page, you can see them, tucked away next to the visible form fields. Their presence can be completely innocuous, perhaps storing your previous input in a multipage progression of complex forms. They can also hold tracking information that the site developer uses to track your movements throughout the site. Whatever their purpose, it can be difficult to wade through the page source to see what the site is hiding from you.

This hack makes hidden form fields visible. And, as an added bonus, it makes them editable as well.

4.3.1. The Code

This user script runs on all pages. Most of the work is done by a single XPath query, which finds <input type="hidden"> elements. Then it's a simple matter of iterating through the <input> elements and changing them to <input type="text">, which makes them simultaneously visible and editable in one fell swoop.

Save the following user script as unhideforms.user.js:

 // ==UserScript== // @name Display Hidden Form Fields // @namespace http://diveintomark.org/projects/greasemonkey/ // @description un-hide hidden form fields and make them editable // @include * // ==/UserScript==        var snapHidden = document.evaluate("//input[@type='hidden']",    document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);    for (var i = snapHidden.snapshotLength - 1; i >= 0; i--) {    var elmHidden = snapHidden.snapshotItem(i);    elmHidden.style.MozOutline = '1px dashed #666';    elmHidden.type = 'text';    elmHidden.title = 'Hidden field "' +    (elmHidden.name || elmHidden.id) + '"';    } 

4.3.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.yahoo.com. This deceptively simple search form actually includes several hidden form fields, as shown in Figure 4-2.

Figure 4-2. Yahoo! home page with hidden form fields

To avoid confusion, the script adds a dashed border around form fields that were originally hidden.