The HTML5 keygen element is used to generate client certificate which can be used for authentication. In this example we are going to demystify the HTML5 keygen element.
For this example we will use:
- A computer with a modern browser installed.
- notepad++.
1. Getting Started
The keygen tag is used to generate a key-pair. The public key will be sent to the server while the private key will be encrypted and stored in the local key database.
Lets look at some attributes of the keygen element.
Note: The keygen element must be used with a form.
- name: This attribute defines a name for the
keygentag. The name supplied to the tag is sent with the form data. - disabled: This specifies that a
keygentag should be disabled. If this tag is specified or supplied, the user will not be able to interact with the element. - autofocus: This attributes specifies that the
keygenelement should automatically gain focus when the page loads. - challenge: This is a string that is submitted with the public key, if this attribute is not specified, its value defaults to an empty string.
The value of this attribute is encoded and then signed with the private key. The returned value is based64 encoded. This value is then submitted to the server as the value of a form name/value pair, where the name is name as specified by the name attribute of the keygen element. If no challenge string is provided, then it will be encoded as an IA5STRING of length zero. - form: Specifies one or more forms id the
keygenelement belongs to. The form with the id supplied must be in the same document as thekeygen. If the form id is not supplied, then thekeygenelement must be a descendant of aform. - keytype:The type of key generated. The default value is RSA.
The keygen element is shown to user as a drop down list or some sort of selection menu or box, with maybe two options. The drop down list or selection box contains possible key strengths. Currently, two strengths are offered, high and medium.
When the user clicks the submit button, a key pair of the selected size is generated. The private key is encrypted and stored in the local key database.
Let’s take a look at the syntax for the keygen element.
<keygen name="security" challenge="the challenge string">
Did you notice that the keygen tag does not need a closing tag. The keygen element must not has a closing tag but it must has a starting tag.
An example of the keygen output to the server is below:
MIICSzCCATMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDOomefX5gP Enl5le8Upm9C2g1quWXR2hdyoaC9GErvScfOERJY2qbI57y4/pxvctwuL7KPA12d ClMlGZ6b2jPPrm3iN0dY8z1NPDhRDuaTh0MziscyUNc6XycpIEIfJJLk4nV2oS2u olFhRH5SjIAslSS8rhEELcoXCCHADIlwLi1Pg7fx5Ay7rTbaErn4xqQSFZqSVjD1 pGwim0E4Eplj6Ly46I5516MEM1dWnMvlz/UdIXpxN41snbysHvznbXH4JtA7YgHj TAnYBx2Oi3MsOL39k5L+rjaoqleQgtp16b4mlC7z7Cv2mZ3RK+QovZ1PF7jM0wF+ oT7GWOjYhRFdAgMBAAEWC3JhbmRvbWNoYXJzMA0GCSqGSIb3DQEBBAUAA4IBAQB4 9HDCQzEzH05XZizs9tVjdOIgdcKQO5PjEAS53+1pnw8lP1xZBSKCgaCGn6PYolaU a+A3ra1cDojRKAkJmf1wXlbyDLU9XpaAVa8Q2WVMeA0a0NK9bFfDIzNl5fmfl+1Q he9kPnfoUpKowt1RuPXMYOEKWFhceOZqG/5cuDELYetfIvQ3Ev/EtDfi42Qdjc4c 4h97e2peYUzVXkfkQ4oiY4kIxumozsY8/Oivaeh7Lo+XfneAeShwK2toNLnio8b/ SphlZelWs7J2792sohglxe3+sJHDX6AP9ezuRdOzM1i007GKqKRibkMvhcSpOMIa HSnuMF+hE2PycyEMX2wq
index.html
<!DOCTYPE html>
<html lang=en>
<head>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
overflow:hidden;
padding:0%;
border:0%;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>HTML5 Keygen Example</title>
</head>
<body>
<form action="" method="get">
Username: <input type="text" name="user">
<keygen name="security" challenge="the challenge string">
<input type="submit">
</form>
</body>
</html>
We have successfully created a keygen element and we added it to our HTML form. The keygen element is supported by Google chrome browser, safari browser, opera browser, Firefox browser but it is not supported by internet explorer (and they don’t intend to support it). So when you have to create a web app that uses the keygen element, please keep it in mind that it is not supported by all browsers.
2. Summary
In this example we tried to demystify the HTML5 keygen element. We successfully discussed and explained the features of the keygen element. We gathered all the necessary information about the keygen element in one place, so you can fully understand the element without unnecessarily searching the web for more info.
3. Download the source code
Download
You can download the full source code of this example here: html5keygenexample
