Home » HTML5 » HTML5 Keygen Element Example

About Olayemi Odunayo

Olayemi Odunayo
I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

HTML5 Keygen Element Example

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++.

Want to be a HTML5 Ninja?

Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!

In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

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 keygen tag. The name supplied to the tag is sent with the form data.
  • disabled: This specifies that a keygen tag 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 keygen element 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 keygen element belongs to. The form with the id supplied must be in the same document as the keygen. If the form id is not supplied, then the keygen element must be a descendant of a form.
  • 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

 

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

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

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook