Building Security Support in Our HTML5 Application Using the Keygen Markup Control

By Vipul Patel

Security is an important part of web applications. A lot of applications rely on public key/private keys model. To support such scenarios, HTML5 introduces a new markup element, “keygen” markup which represents a control for generating a public-private key pair. It also submits the public key from that key pair.


The HTML5 specification says …

The DOM interface for the keygen markup element is:

interface HTMLKeygenElement : HTMLElement {
           attribute boolean autofocus;
           attribute DOMString challenge;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString keytype;
           attribute DOMString name;
  readonly attribute DOMString type;
  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);
  readonly attribute NodeList labels;


The HTML5 specification for keygen markup element http://dev.w3.org/html5/markup/keygen.html mentions that there are no permitted contents for the control. However, the keygen markup element does indeed support several attributes.

·         All global attributes are supported by the keygen markup element.

  •    The “challenge” attribute accepts string values which represent the challenge string.
  •    The “keytype” attribute accepts a value “rsa”.
  •    The “autofocus” attribute can be empty, or a value of “autofocus”.
  •    The “name” attribute.
  •    The “disabled” attribute specified whether the keygen markup element represents a disabled control.


The “keygen” markup element is a type of form element.  However, it cannot appear as a descendent of an “a” element or a “button” element. Also, since it is a void element, the element must not have an end tag (despite having a start tag).


Hands On

Here is a simple example of keygen markup element.

<!DOCTYPE html>


<meta charset="utf-8">

<title>Keygen sample</title>




            <h1>Keygen sample</h1>

            <p>Demo showing keygen markup element</p>




            <p>HTML Goodies</p>



    <form action="test.asp" method="get">

        Phrase to encrypt: <input type="text" name="phrase">

        Encryption: <keygen name="security">

        <input type="submit">





When the page is rendered in a modern browser (Latest version of Firefox, Chrome support keygen control), you will notice as under


When the “Submit Query” button is clicked, the key is generated and the public key is passed to the form as a parameter.





In this article, we learned about the keygen markup control. You can download the sample code from here.

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com


  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date