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

AshokTechnical TipsLeave a Comment

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:

form_input_history

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.

Leave a Reply

Your email address will not be published. Required fields are marked *