Preventing sensitive information from populating form field history: cross-browser solution

Posted on May 2, 2009 in Technical Tips | 0 comments

When you have users submitting sensitive information on your website while on a public computer, how can you ensure that the next person to use that public computer does not see previous user’s sensitive information? To be clear, this is the type of thing we’re trying to prevent:

Most of the time, the browser on that public computer should be locked down to the point where the form history is not saved. But that’s leaving it up to each browser + security policy, and it’s not exactly the “cutting it off at the source” kind of solution that would be ideal.

A common approach to solve this problem is to randomize the name of the form field input. i.e. append a random integer from 1-9999999 to the name of the form field input you’d like to protect when the page is loaded, and then subsequently handle that new random field name in the backend. That way each time you visit the page, the form input field appears to be new since it (likely) has a unique name and therefore no form history. However, this may require significant workaround if you are using a backend framework to handle this approach.

Here’s a cross-browser solution that will nip that sensitive info in the bud:

• Save the protected field into a hidden form field
• Clear the protected field before the form is submitted
• (then read that hidden field in the backend instead of the original protected field)

Example code without username field protected:

1
2
3
4
5
6

<form name="myform">
 
   <input name="username" id="username" type="text" />
 
   <img src="submitButton.png" 
     onclick="javascript:document.myform.submit()" />

Example code with username field protected:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<form name="myform">
 
   <input name="username" id="username" type="hidden" />
 
   <input name="usernameProtectMe" id="usernameProtectMe" type="text" />
 
   <img src="submitButton.png" 
     onclick="javascript:submitWithProtection()" />
 
   <script type="text/javascript">
 
      // [ assuming JS lib like prototype 
      // or jQuery where: $() = document.getElementById() ]
 
      function submitWithProtection() {
 
            // assign protected field value to hidden field
            $('username').value = $('usernameProtectMe').value;  
 
            $('usernameProtectMe').value = '';  // clear protected field
 
            document.myform.submit();  // submit form
 
      }
 
   </script>

Once this is in place, each time the form is submitted, the only value sent for the visible input field will be ” and will therefore never get added to the form field history.

Related Information:

1. Oracle APEX Tutorial 4 – Form Layout – Part 3 – Video Training

   APEX gives you a lot...

2. Oracle APEX Advanced Tutorial 1 – Creating a Tabular Form – Video Walkthrough

   This tutorial is designed to...

3. ADF Table Row Selection Event Update Form

   One of the UI requirements...

4. Enterprise, Dynamic Web Form Generation – Formulator

   We are working on an...

5. Oracle APEX Tutorial 4 – Form Layout – Part 2 – Video Training

   APEX gives you a lot...

6. Avoid Designing Process, Technology, or ANYTHING Like the American Museum of Natural History in NY

   I understand that not every...

7. SBA 8(a) Certification Information – 8-a.com

   M&S Consulting has sponsored a...

8. Oracle APEX Tutorial 4 – Form Layout – Part 1 – Video Training

   APEX gives you a lot...