Preparing a Form for Digital Signatures
HTML forms are standard HTML files that contain one pair of <FORM> and </FORM> labels within the body section. In between the form labels one can find several object definitions such as text fields, radio buttons, pull-down menus, and the like. These objects are created with special labels which have a name attribute that defines the variable name that holds the value entered by the user while filling up the form. Usually at the bottom of the page, and before the </form> label, a special object called "submit" is created. This object appears on the page as a Submit button (see CGI Programming with Perl, Second Edition, by Shishir Gundavaram, Scott Guelich, and Gunther Birznieks).
To enable digital signature in an existing form, previously created with any HTML editor, just three small changes must be done:
- Add an OnSubmit parameter to the form label to call signForm function upon submission:
<form action="verify.php" method="post" onSubmit="return signForm(this, window);">
- Add two hidden form obejcts to hold the digital signature and the names of the variables in the form:
<p><input type="hidden" name="signature"></p>
<p><input type="hidden" name="varnames"></p>
As you can may see in Figure 2, the text that the user must sign is a list of variable names and values. Consequently, the programmer of the form must use meaningful variable names and meaningful option values. In general, html forms use variable names and values that only make sense to the programmer since those names are not shown to the user (except if an advanced user decides to analyze the source code of the page).
How signForm Works
To make signForm useful for any HTML form, regardless of the amount of variables and the specific names of those variables, an algorithm to find all objects in the form was implemented (see Listing One). The number of objects in the form can be found in theForm.elements.length. Then a for loop is used to access each element using the statement elem = theForm.elements[i];.
The main properties of each element are:
- the type of object (elem.type)
- the variable name (elem.name)
- the value entered by the user (value extraction depends on the type of object).
Within the for loop, two string variables are built -- one to store the text to be signed (texttbs) and another one to store the variable names in the precise order in which they have been found in the form (vars). The variable texttbs is built appending the name of each form variable, the character "=", and the corresponding value.
At the end of the loop, the text to be signed is sent to signText function that shows the signing dialog (Figure 2). The result of signText is a digital signature in PKCS#7 format (see PKCS #7: Cryptographic Message Syntax Standard) that is stored in signature variable.
Finally, the signature is copied to the hidden element of the form called signature, and the vars string is copied to the hidden element called varnames. These hidden objects are treated like any other form object, so their variable names, as well as their values, are sent to the server along with all other objects in the form.
It is important to point out that the text to be signed is not sent to the server, since the server must build it again to avoid unencumbered tricks by data misrepresentation, as it will be explained in the following section.
Some input objects (such as the pull down menu) may show a text to the user other than the value stored in the variable of the object. For example:
<option value="spain">Spain (Espaqa)</option>
elem.options[elem.selectedIndex].value; //extracts "spain" elem.options[elem.selectedIndex].text; //extracts "Spain (Espaqa)"
Although the text label may be easier to understand by the user while signing, the value property is the information sent to the server at submission. Hence, it is more appropriate to work with the value instead of the text label, and accordingly the programmer must use meaningful values instead of values such as 01, 02, 03...