KeyTrac Recorder JavaScript

Ein einfach zu integrierendes JavaScript, das für die Aufzeichnung des Tippverhaltens zuständig ist.

Allgemeines

Der KeyTrac Recorder ist ein einfach zu konfigurierendes JavaScript, welches für die Aufzeichnung des Tippverhaltens eines Benutzer notwendig ist. Um die Aufzeichnung zu beginnen, muss es in jede Website integriert werden, bei der das Tippverhalten eines Benutzers aufgezeichnet werden soll. Der KeyTrac Recorder muss dabei auf von bestimmte Eingabefelder konfiguriert werden, für die es das Tippverhalten aufnehmen soll. Unter jedes konfigurierte Eingabefeld fügt der KeyTrac Recorder dazu automatisch ein verstecktes Formularfeld ein, in das der Recorder das Tippverhalten transparent im Hintergrund aufzeichnet.

Integration in eine Website

Die folgenden Schritte zeigen Ihnen wie Sie den JavaScript Recorder in eine Website integrieren. Die Integration muss dabei sowohl für die Registrierung als auch für die Authentifizierung vorgenommen werden.

1) Integration des KeyTrac Recorder JavaScripts

Fügen Sie den folgenden Script-Tag (vorzugsweise) in die head Sektion Ihrer Website ein. Diese Anweisung lädt das Recorder JavaScript und macht den Keytrac Recorder für Ihre Website verfügbar. Nachdem das JavaScript erfolgreich geladen wurde, ist der KeyTrac Recorder auch schon einsatzbereit.

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

    <!-- Fügen Sie den folgenden Script-Tag ein -->
    <script type="text/javascript" src="https://api.keytrac.net/keytrac.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

2) Wählen Sie den Integrations-Modus

KeyTrac unterstützt zwei Betriebsarten, für den Sie den KeyTrac Recorder entsprechend konfigurieren müssen:

  • Für die Authentifizierung mittels dynamischer Textabschnitte -> AnyText
  • Für die Authentifizierung von Passworteingaben Ihrer Benutzer -> Password Hardening

2.1) Binden Sie den Recorder an Eingabefelder (AnyText Modus)

Um den KeyTrac Recorder an bestimmte Eingabefelder zu binden, müssen Sie der KeyTrac.configure Funktion eine Liste der gewünschten Eingabefeldern im sog. DOM-Identifier-Format (mit einem # als Präfix vor der eigentlichen DOM-ID) übergeben.

Durch die Nutzung der anytextFields Option weisen Sie den KeyTrac Recorder an Benutzereingaben im AnyText-Modus zu verarbeiten. Aus Sicherheitsgründen wird nur auf Benutzereingaben für Eingabefelder geachtet, die dem KeyTrac Recorder explizit übergeben wurden. Alle anderen Eingaben auf Ihrer Website werden ignoriert. Hinweis: Die unten gezeigte Integration funktioniert nur für den AnyText-Modus. (Für Password Hardening gehen Sie bitte zu Abschnitt 2.2)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Demo-Integration</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>Das ist ein Text, den Benutzer abtippen müssen.</p>
    <textarea name="textArea1" id="textArea01"></textarea>
    ...
    <p>Das ist ein anderer Text, den Benutzer abtippen müssen.</p>
    <textarea name="textArea2" id="textArea02"></textarea>
    ...
    <script type="text/javascript">
      KeyTrac.configure({
        anytextFields: ['#textArea01', '#textArea02'] // <-- AnyText Modus
      });
    </script>
  </body>
</html>

2.2) Binden Sie den Recorder an Eingabefelder (Password Hardening Modus)

Um den KeyTrac Recorder an bestimmte Eingabefelder zu binden, müssen Sie der KeyTrac.configure Funktion eine Liste der gewünschten Eingabefeldern im sog. DOM-Identifier-Format (mit einem # als Präfix vor der eigentlichen DOM-ID) übergeben.

Da Passwörter besonderen Schutz benötigen, bietet der KeyTrac Recorder hierfür einen besonderen Aufzeichnungsmodus für das Tippverhalten bei Passworteingaben. Diese spezielle Art der Aufzeichnung ist jedoch nur Passworteingaben vorbehalten. Um diesen Aufzeichnungsmodus zu verwenden, nutzen Sie bitte die passwordFields Option anstelle der anytextFields Option. Diese Anweisung instruiert den KeyTrac Recorder das Tippverhalten der konfigurierten Felder im sog. maskierten Modus aufzuzeichnen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Demo-Integration</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 für Passwort 1</label>
    <input name="password1" id="password1" type="password">
    ...
    <label for="password2">Label für Passwort 2</label>
    <input name="password2" id="password2" type="password">
    ...
    <script type="text/javascript">
      KeyTrac.configure({
        passwordFields: ['#password1', '#password2'] // <-- Password Hardening Modus
      });
    </script>
  </body>
</html>

3.) Überprüfen Sie den Status des KeyTrac Recorders

Wurde der KeyTrac Recorder erfolgreich für Ihre Website konfiguriert, fügt es automatisch versteckte Felder unter jedes der von Ihnen konfigurierten Eingabefelder ein.

Der Name jedes dieser versteckten Eingabefelder beginnt mit dem Präfix keytrac_. Um zu überprüfen ob Ihre Konfiguration erfolgreich war und alle versteckten Felder eingefügt wurden, öffnen Sie einfach Ihre Website in einem Browser, positionieren den Mauspfeil über das Eingabe das Sie dem KeyTrac Recorder in der configure Funktion übergegeben haben und klicken mit der rechten Maustaste auf das Element und wählen Untersuchen (bei der Verwendung von Chrome). Ist unter dem Eingabefeld ein verstecktes Eingabefeld, dessen Namen mit keytrac_ beginnt, dann war die Konfiguration erfolgreich und der KeyTrac Recorder ist bereit das Tippverhalten Ihrer Benutzer aufzuzeichnen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>KeyTrac Demo-Integration</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>Das ist ein Text, den Benutzer abtippen müssen.</p>
    <textarea name="textArea1" id="textArea01"></textarea>
    <!-- Wurde der Recorder erfolgreich konfiguriert, ist das u.g. Feld vorhanden -->
    <input type="hidden" name="keytrac_textArea01" id="keytrac_textArea01">
    ...
    <p>Das ist ein anderer Text, den Benutzer abtippen müssen.</p>
    <textarea name="textArea2" id="textArea02"></textarea>
    <!-- Wurde der Recorder erfolgreich konfiguriert, ist das u.g. Feld vorhanden -->
    <input type="hidden" name="keytrac_textArea02" id="keytrac_textArea02">
    ...
    <script type="text/javascript">
      KeyTrac.configure({
        anytextFields: ['#textArea01', '#textArea02']
      });
    </script>
  </body>
</html>

Information zu den Aufzeichnungsvarianten

AnyText Aufzeichnungsmodus

Um das Tippverhalten für KeyTrac AnyText aufzuzeichnen, müssen Sie den KeyTrac Recorder entsprechend an die Eingabefelder binden, bei denen auf Benutzereingaben gelauscht werden soll. Eine solche Konfiguration führen Sie mit Hilfe der anytextFields Option durch. Hier übergeben Sie der Konfigurationsfunktion einfach alle DOM-Identifier der gewünschten Eingabefelder.

  ...
  <script type="text/javascript">
    KeyTrac.configure({
      anytextFields: ['#textArea01', '#textArea02']
    });
  </script>
  ...
Einstellung Standard Beschreibung
anytextFields [] Konfiguration der DOM-Identifier aller Eingabefelder bei denen das Tippverhalten aufgezeichnet werden soll, aufgelistet als String Array. Dieser Aufzeichnungsmodus funktioniert nur mit KeyTrac AnyText und funktioniert nicht mit KeyTrac Password Hardening.

Der AnyText und der Password Hardening Modus können jedoch kombiniert auf einer Website eingesetzt werden. Übergeben Sie dazu einfach beide Optionen der KeyTrac.configure Funktion. Sehen Sie sich die Bespiel-Konfiguration an.

Password Hardening Aufzeichnungsmodus

Um das Tippverhalten bei Passworteingaben aufzuzeichnen benötigen Sie den speziellen Passwort Aufzeichnungsmodus. Diese Art der Aufzeichnung ist nicht kompatibel mit KeyTrac AnyText und kann nur mit KeyTrac Password Hardening verwendet werden, da die Aufzeichnung im sog. maskierten Modus erfolgt.

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.

Die Konfiguration für den Password Hardening Modus lehnt sich an die bereits oben gezeigten AnyText Einstellungen an. Hier übergeben Sie jedoch der passwordFields Konfigurationsfunktion anstelle der anytextFields Funktion die Liste der DOM-Identifier aller Passwortfelder, bei denen das Tippverhalten aufgezeichnet werden soll.

  ...
  <script type="text/javascript">
    KeyTrac.configure({
      passwordFields: ['#password1', '#password2']
    });
  </script>
  ...
Einstellung Standard Beschreibung
passwordFields [] Konfiguration der DOM-Identifier aller Eingabefelder bei denen das Tippverhalten aufgezeichnet werden soll, aufgelistet als String Array. Dieser Aufzeichnungsmodus funktioniert nur mit KeyTrac Password Hardening und funktioniert nicht mit KeyTrac AnyText.

Der AnyText und der Password Hardening Modus können jedoch kombiniert auf einer Website eingesetzt werden. Übergeben Sie dazu einfach beide Optionen der KeyTrac.configure Funktion. Sehen Sie sich die Bespiel-Konfiguration an.

Weitere Konfigurationsoptionen

1) Verfügbare Einstellungen

Einstellung Standard Beschreibung
enableAutoCorrect false Aktiviert/Deaktiviert die Autokorrektur der konfigurierten Eingabefelder
Wenn Sie diese Einstellung auf false (Standardwert) stellen, werden die Attribute autocorrect=off, autocapitalize=off und spellcheck=false den konfigurierten Eingabefeldern hinzugefügt, um die integrierte Autokorrektur des Browsers zu deaktivieren. Der Wert true belässt die Standardeinstellung des Browsers (Autokorrektur aktiviert).
enableAutoComplete false Aktiviert/Deaktiviert die Autovervollständigung der konfigurierten Eingabefelder
Wenn Sie diese Einstellung auf false (Standardwert) stellen, wird das Attribute autocomplete="off" den konfigurierten Eingabefeldern hinzugefügt, um die integrierte Autovervollständigung des Browsers zu deaktivieren. Der Wert true belässt die Standardeinstellung des Browsers (Autovervollständigung aktiviert).
enableMouseActions false Aktiviert/Deaktiviert alle Mausaktionen der konfigurierten Eingabefelder
Wenn Sie diese Einstellung auf false (Standardwert) stellen, kann der Benutzer den Cursor nicht mehr mit der Maus an eine beliebige Stelle innerhalb der konfigurierten Eingabefelder positionieren. Klickt der Benutzer auf eine Stelle des Eingabefelds, wird der Cursor automatisch am Ende des bereits eingegebenen Textes positioniert. Diese Einstellung verhindert zudem das Benutzer Textstellen innerhalb der konfigurierten Eingabefelder auswählen können. Der Wert true (Standardwert) belässt die Standardeinstellung des Browsers (alle Mausaktionen aktiviert).
enableContextMenu false Aktiviert/Deaktiviert das Kontextmenü der konfigurierten Eingabefelder
Wenn Sie diese Einstellung auf false (Standardwert) stellen, kann der Benutzer nicht länger das Kontextmenü der konfigurierten Eingabefelder aufrufen. Dies verhindert, dass ein Benutzer Teile der Eingaben mittels der Löschen Funktion des Kontextmenüs löschen. Der Wert true belässt die Standardeinstellung des Browsers (Kontextmenü aktivert).
enablePaste false Aktiviert/Deaktiviert die Möglichkeit das ein Benutzer Text in die konfigurierten Eingabefelder hineinkopieren kann
Wenn Sie diese Einstellung auf false (Standardwert) stellen, kann der Benutzer keinen Text mittels kopieren & einfügen in die konfigurierten Eingabefelder einfügen. Diese Einstellung zwingt den Benutzer etwa den bei AnyText angezeigten Text manuell in die Eingabefelder einzutippen. Der Wert true belässt die Standardeinstellung des Browsers (kopieren & einfügen aktiviert).
enableDebug false Zeigt/Versteckt die KeyTrac Felderd Nicht für den Produktionsbetrieb!
Wenn Sie diese Einstellung mit true aktivieren, wird das jeweils für das Eingabefeld aufgezeichnete Tippverhalten angezeigt.

2) Geltungsbereich der weiteren Konfigurationsmöglichkeiten

Um die User Experience bei allen Webseiten nicht zu verändern, bei der der KeyTrac Recorder integriert wurde, beeinflussen die weiteren Konfigurationsmöglichkeiten nur die Eingabefelder die der anytextFields und der passwordFields Konfigurationsfunktion übergeben wurden.

3) Fehlerhandhabung

Damit Entwickler mögliche Fehlkonfigurationen des KeyTrac Recorder einfacher beheben können, loggt der KeyTrac Recorder jeden Fehler in die Console Ihres Browsers. Diese Fehler Sie mit Hilfe der Developer-Tools Ihres Browsers ansehen. Ein Beispiel für einen solchen Fehler wäre etwa:

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
}

Beispielkonfiguration

Das untere Beispiel zeigt eine erweiterte Konfiguration des KeyTrac Recorders, bei denen das kopieren & einfügen sowie das Kontextmenü der Eingabefelder mit den DOM-Identifiers textArea01, textArea02, password und password_confirmation aktiviert bzw. erlaubt ist.

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