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.
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.
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>
Since KeyTrac offers two operation modes, you need to choose one mode which matches your use case:
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>
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>
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>
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.
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. |
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.
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= offand spellcheck= falseare 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 deleteoption 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. |
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.
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
}
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>
...