KeyTrac Recorder JavaScript

An easy to use JavaScript, which is responsible for recording all keystroke dynamics.

Overview

The KeyTrac Recorder is an easy to use JavaScript which is responsible for recording the user's keystroke dynamics. It needs to be embedded into your or your customer’s website where you want to record the typing behavior of users. Properly configured, the KeyTrac Recorder adds hidden input fields below each monitored text field. These hidden fields are used for storing the keyboard biometrics of a user, which is recorded seamlessly in the background while a user is typing something into an input field.

Website integration

The following steps show how to integrate the JavaScript recorder into your website. This integration needs to be done for the enrollment and the authentication website.

1) Embed the KeyTrac Recorder JavaScript

Add the following script tag to (preferably) the head section of your page. This instruction loads the KeyTrac Recorder and includes it into the website. After the JavaScript is successfully loaded, the recorder is available for use.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Integration Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

    <!-- Add the following script tag to your website -->
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

2) Choose the integration mode

Since KeyTrac offers two operation modes, you need to choose one mode which matches your use case:

For dynamically changing text snippets -> AnyText
For securing password inputs of users -> Password Hardening

2.1) Bind the recorder to input fields (AnyText mode)

To bind the KeyTrac Recorder to a number of input fields, pass an array of DOM-Identifiers of the input fields that should be used with KeyTrac prefixed with a # to the KeyTrac.configure method.

By using the anytextFields option you instruct the KeyTrac Recorder to listen for keystrokes in the given fields in AnyText mode. Input fields which are not explicitly configured will be ignored by KeyTrac. The method shown below is only suitable for AnyText use cases. (For Password Hardening please head over to section 2.2)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Integration Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    ...
    <p>This is the text users need to enter in the textarea below</p>
    <textarea name="textArea1" id="textArea01"></textarea>
    ...
    <p>This is the text users need to enter in the textarea below</p>
    <textarea name="textArea2" id="textArea02"></textarea>
    ...
    <script type="text/javascript">
      KeyTrac.configure({
        anytextFields: ['#textArea01', '#textArea02'] // <-- AnyText mode
      });
    </script>
  </body>
</html>

2.2) Bind the recorder to input fields (Password Hardening mode)

To bind the KeyTrac Recorder to a number of password input fields, pass an array of DOM-Identifiers of the input fields that should be used with KeyTrac prefixed with a # to the KeyTrac.configure method.

Since passwords need special protection, the KeyTrac Recorder offers a special mode for recording the keyboard biometrics of your users. This special option is only suitable for passwords. To enable this special recording mode with the KeyTrac Recorder, use the passwordFields option instead of the anytextFields switch. This instructs the KeyTrac JavaScript Recorder to use the recording mode for password hardening.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Integration Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    ...
    <label for="password1">Label for Password 1</label>
    <input name="password1" id="password1" type="password">
    ...
    <label for="password2">Label for Password 2</label>
    <input name="password2" id="password2" type="password">
    ...
    <script type="text/javascript">
      KeyTrac.configure({
        passwordFields: ['#password1', '#password2'] // <-- Password Hardening mode
      });
    </script>
  </body>
</html>

3.) Verify the state of the KeyTrac Recorder

When the KeyTrac recorder was successfully embedded, it dynamically adds hidden fields below each configured input field.

The name of each hidden field gets prefixed with keytrac_. To verify that all hidden fields were added, just open the website in a browser, place the mouse pointer over an input field you’ve passed to the configure method, right click on this element and choose inspect element (when using Chrome). If there’s a hidden input field (prefixed with keytrac_) below the element you’ve selected, the KeyTrac JavaScript Recorder is properly set up and ready to capture the typing behavior of a user.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Integration Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    ...
    <p>This is the text users need to enter in the textarea below</p>
    <textarea name="textArea1" id="textArea01"></textarea>
    <!-- If the KeyTrac Recorder is working, the field below must appear -->
    <input type="hidden" name="keytrac_textArea01" id="keytrac_textArea01">
    ...
    <p>This is the text users need to enter in the textarea below</p>
    <textarea name="textArea2" id="textArea02"></textarea>
    <!-- If the KeyTrac Recorder is working, the field below must appear -->
    <input type="hidden" name="keytrac_textArea02" id="keytrac_textArea02">
    ...
    <script type="text/javascript">
      KeyTrac.configure({
        anytextFields: ['#textArea01', '#textArea02']
      });
    </script>
  </body>
</html>

Information on recording modes

AnyText recording mode

To record the keystroke dynamics for KeyTrac AnyText, you need to configure the input fields which should be monitored for user text input. This is done via the anytextFields option, where you list the DOM identifiers of all input fields which should be watched for key events.

  ...
  <script type="text/javascript">
    KeyTrac.configure({
      anytextFields: ['#textArea01', '#textArea02']
    });
  </script>
  ...

Setting	Default	Description
`anytextFields`	`[]`	Takes all the input field DOM identifiers, listed as a String array, where the user text input should be recorded. This recording mode can only be used with KeyTrac AnyText and won’t work with KeyTrac Password Hardening.

AnyText recording mode and Password Hardening recording mode can be combined on a single web page. Just configure both options in the same KeyTrac.configure statement. Head over to the example configuration.

Password Hardening mode

For recording the keystroke dynamics of password fields, you need to use the special password recording mode. This recoding mode is not compatible with KeyTrac AnyText and can only be used with KeyTrac Password Hardening, as it uses a special technique to prevent the reconstruction of passwords.

Similar to the AnyText configuration above, this is done via the passwordFields option, where you list the DOM identifiers of all password fields which should be watched for key events.

  ...
  <script type="text/javascript">
    KeyTrac.configure({
      passwordFields: ['#password1', '#password2']
    });
  </script>
  ...

Setting	Default	Description
`passwordFields`	`[]`	Takes all the input field DOM identifiers, listed as a String array, where the user text input should be recorded. This recording mode is for use with KeyTrac Password Hardening only and won’t work with KeyTrac AnyText.

Configuration Options

1) Available settings

Setting	Default	Description
`enableAutoCorrect`	`false`	Enables/Disables the autocorrection for the configured fields
		With setting this option to `false` (default setting) the attributes autocorrect=off, autocapitalize=off and spellcheck=false are added to the configured input fields in order to disable built in auto correction of the browser for that fields. Setting this option to `true` keeps the default browser behavior (auto correction enabled).
`enableAutoComplete`	`false`	Enables/Disables autocompletion for the configured fields
		With setting this option to `false` (default setting) the attribute `autocomplete="off"` is added to the configured input fields, in order to disable the built in auto completion of the browser for that fields. Setting this option to `true` keeps the default browser behavior (auto completing enabled).
`enableMouseActions`	`false`	Enables/Disables all mouse actions for the configured fields
		With setting this option to `false` (default setting) the user is no longer able to position the curser, using the mouse, within the configured input fields. Every time the user clicks into such an input field, the cursor is positioned at the end. This option also prevents the user from selecting text within the configured input fields. Setting this option to `true` keeps the default browser behavior (mouse actions enabled).
`enableContextMenu`	`false`	Enables/Disables the context menu for the configured fields
		With setting this option to false (default setting) the user is no longer able to use the context menu of the configured input fields. This helps to avoid that users delete text phrases by using the delete option from the context menu. Setting this option to `true` keeps the default browser behavior (context menu enabled).
`enablePaste`	`false`	Enables/Disables the user to paste text into the input fields
		With setting this option to `false` (default setting) the user is no longer able to copy & paste text into the configured input fields. This forces the user to actually type in the text into that fields. Setting this option to `true` keeps the default browser behavior (paste enabled).
`enableDebug`	`false`	Show/Hides the hidden KeyTrac fields Don't use in production!
		Enabling this option with setting to true, the recorded data from the KeyTrac recorder shows up below the corresponding input field.

2) Scope of the optional settings

In order to keep the user experience of the website where the KeyTrac Recorder is integrated, the optional settings only affects the input fields configured with the anytextFields and the passwordFields option.

3) Error handling

To help developers handling errors associated with the KeyTrac recorder, every misconfiguration or exception while using the KeyTrac Recorder raises an error which is logged to the console and can be viewed with the developer tools of your preferred browser. An example error is shown below:

Uncaught [ERROR] Unable to start KeyTrac Recorder (no options provided)

-- AVAILABLE OPTIONS --
{
  passwordFields: ["#password", "#password_confirmation"],
  anytextFields: ["#textfield1", "#textfield2"],
  enableAutoCorrect: false,
  enableAutoComplete: false,
  enableMouseActions: false,
  enableContextMenu: false,
  enablePaste: false,
  enableDebug: false
}

Example configuration

In the example below, you’ll see an enhanced configuration of the KeyTrac Recorder with copy & paste and the context menu enabled for the input fields with the DOM identifiers textArea01, textArea02, password and password_confirmation.

  ...
  <script type="text/javascript">
    KeyTrac.configure({
      anytextFields: ['#textArea01', '#textArea02'],
      passwordFields: ['#password', '#password_confirmation'],
      enablePaste: true,
      enableContextMenu: true
    });
  </script>
  ...