Hide form items from the Web Developer 1.1.8 plug-in for Firefox

Like a lot of web application developers I develop and test against Firefox first and IE second. I love a number of plug-in's including Firebug and Web Developer.

The Web Developer plug-in has some nice features such as the ability to view all form objects. Recently I discovered that with some simple CSS you can hide a form and its elements from the Web Developer display. Note, any user can still view source and see the form element, but it is still handy if you are concerned about site security. As it happens, I ran into this while working on some security enhancements for one of my clients.

So for the sake of argument let's pretend we have a FORM that is only populated by JavaScript and submitted by JavaScript. All input elements in the FORM are hidden. Something like:

<form id="frmForgotPassword" action="forgotPassword.cfm" method="post">
<input type="hidden" name="username" id="fpUsername" value="" />

Now using the Web Developer toolbar you go to "Forms > Display Form Details" then the form would become visible. But you can hide it from this view by setting the CSS Display property to NONE.


<form id="frmForgotPassword" action="forgotPassword.cfm" method="post" style="display:none;">

While this doesn't really increase your sites security any, it is an interesting effect.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.