Teil 1: Browser-Schlüsselereignisse
Um Keylogging mit js zu implementieren, müssen Sie auf die drei wichtigsten Ereignistypen des Browsers achten, nämlich Keydown, Keypress und Keyup, die den drei Ereignishandles onkeydown, onkeypress bzw. onkeyup entsprechen. Ein typischer Tastendruck erzeugt alle drei Ereignisse in der Reihenfolge „Taste drücken“, „Taste drücken“ und dann „Taste hoch“, wenn die Taste losgelassen wird.
Unter diesen drei Ereignistypen sind Keydown und Keyup relativ niedrig, während Keypress relativ fortgeschritten ist. Das sogenannte Erweitert bedeutet hier, dass, wenn der Benutzer Umschalt + 1 drückt, Tastendruck das Tastenereignis analysiert und ein druckbares „!“-Zeichen zurückgibt, während Keydown und Keyup nur das Umschalt + 1-Ereignis aufzeichnen. [1]
Allerdings ist der Tastendruck nur für einige Zeichen wirksam, die gedruckt werden können, wie z. B. F1-F12, Rücktaste, Eingabetaste, Escape, PageUp, PageDown und Pfeilrichtungen. Das Tastendruckereignis wird nicht generiert, sondern „keydown“ und „keyup“. Ereignis generiert werden kann. In FireFox können Funktionstasten jedoch Tastendruckereignisse generieren.
Die an die Ereignishandler keydown, keypress und keyup übergebenen Ereignisobjekte haben einige gemeinsame Eigenschaften. Wenn Alt, Strg oder Umschalt zusammen mit einer Taste gedrückt werden, wird dies durch die Eigenschaften altKey, ctrlKey und shiftKey des Ereignisses dargestellt, die in FireFox und IE üblich sind.
Teil zwei: Kompatible Browser
Alle js, die Browser beinhalten, müssen Browserkompatibilitätsprobleme berücksichtigen.
Derzeit basieren die am häufigsten verwendeten Browser hauptsächlich auf IE und Mozilla. Maxthon basiert auf dem IE-Kernel, während Firefox und Opera auf dem Mozilla-Kernel basieren.
2.1 Initialisierung von Ereignissen
Das erste, was Sie wissen müssen, ist, wie das Ereignis initialisiert wird. Die grundlegende Anweisung lautet wie folgt:
Funktion keyDown(){}
document.onkeydown = keyDown;
Wenn der Browser diese Anweisung liest, ruft er die Funktion KeyDown() auf, unabhängig davon, welche Taste auf der Tastatur gedrückt wird.
2.2 Implementierungsmethoden von Firefox und Opera
Die Implementierung von Programmen wie FireFox und Opera ist problematischer als die von IE, daher werde ich sie hier zuerst beschreiben.
Die Funktion keyDown() hat eine versteckte Variable – im Allgemeinen verwenden wir den Buchstaben „e“, um diese Variable darzustellen.
Funktion keyDown(e)
Die Variable e stellt ein Tastendruckereignis dar. Um herauszufinden, welche Taste gedrückt wurde, verwenden Sie das which-Attribut:
e.welche
e.die den Indexwert des Schlüssels angibt. Die Methode zum Konvertieren des Indexwerts in den alphanumerischen Wert des Schlüssels erfordert die Verwendung der statischen Funktion String.fromCharCode() wie folgt:
String.fromCharCode(e.which)
Wenn wir die obigen Aussagen zusammenfügen, können wir herausfinden, welche Taste in FireFox gedrückt wurde:
Kopieren Sie den Codecode wie folgt:
Funktion keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
alarm("Keycode: " + keycode + " Character: " + realkey);
}
document.onkeydown = keyDown;
2.3 Implementierungsmethode des IE
Das IE-Programm benötigt keine e-Variable anstelle von e.which. Die Methode zum Konvertieren des Schlüsselindexwerts in den realen Schlüsselwert ist ähnlich: String.fromCharCode (event.keyCode). ist wie folgt:
Kopieren Sie den Codecode wie folgt:
Funktion keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alarm("Keycode: " + keycode + " Character: " + realkey);
}
document.onkeydown = keyDown;
2.4 Browsertyp bestimmen
Wir haben oben gelernt, wie man das Schlüsselereignisobjekt in verschiedenen Browsern erhält. Dann müssen wir den Browsertyp bestimmen. Es gibt viele Methoden, einige sind einfacher zu verstehen, und es gibt auch sehr clevere Methoden : Das heißt, Sie können das Attribut „appName“ des Navigatorobjekts verwenden. Hier wird „appName“ verwendet, um den Browsertyp zu bestimmen. , und der AppName von Firefox und Opera ist „Netscape“, daher lautet ein Code mit einer relativ einfachen Funktion wie folgt:
Kopieren Sie den Codecode wie folgt:
Funktion keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}anders
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alarm("Keycode: " + keycode + " Character: " + realkey);
}
document.onkeyup = keyUp;
Eine einfachere Methode ist [2]:
Kopieren Sie den Codecode wie folgt:
Funktion keyUp(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
Alert("Schlüsselcode: " + currKey + " Zeichen: " + keyName);
}
document.onkeyup = keyUp;
Die obige Methode ist cleverer. Lassen Sie es mich kurz erklären:
Zunächst einmal dient der Code e=e||event; der Kompatibilität mit der Erfassung von Browser-Ereignisobjekten. Die Bedeutung dieses Codes in js ist, dass, wenn die versteckte Variable e in FireFox oder Opera existiert, e||event e zurückgibt. Wenn die versteckte Variable e im IE nicht existiert, wird event zurückgegeben.
Zweitens: currKey=e.keyCode |. Es gibt die Attribute „which“ und „charCode“ in Opera, und es gibt die Attribute „keyCode“ und „which“ in Opera.
Der obige Code ist nur mit dem Browser kompatibel, ruft das Keyup-Ereignisobjekt ab und zeigt einfach den Tastencode und die Tastenzeichen an. Wenn Sie jedoch eine Taste drücken, sind alle Zeichen in Großbuchstaben geschrieben Drücken Sie die Umschalttaste. Die Zeichen sind sehr seltsam, daher muss der Code optimiert werden.
Teil 3: Code-Implementierung und -Optimierung
3.1 Tastencodes und Zeichencodes für Tastenereignisse
Den Schlüsselcodes und Zeichencodes von Schlüsselereignissen fehlt die Portabilität zwischen Browsern. Für verschiedene Browser und unterschiedliche Fallereignisse sind die Speichermethoden von Schlüsselcodes und Zeichencodes unterschiedlich.....
Im IE gibt es nur ein keyCode-Attribut und seine Interpretation hängt vom Ereignistyp ab. Für Tastendruck speichert keyCode den Tastencode. Für Tastendruckereignisse speichert keyCode einen Zeichencode. Im IE gibt es keine which- und charCode-Attribute, daher sind die which- und charCode-Attribute immer undefiniert.
Der KeyCode in FireFox ist immer 0. Wenn die Zeit keydown/keyup ist, ist charCode=0, was der Tastencode ist. Wenn das Ereignis Tastendruck auftritt, sind die Werte von which und charCode gleich und der Zeichencode wird gespeichert.
In Opera sind die Werte von keyCode und immer gleich. Im Keydown-/Keyup-Ereignis speichern sie den Tastencode und charCode ist nicht definiert und immer undefiniert.
3.2 Verwenden Sie Keydown/Keyup oder Tastendruck
Im ersten Teil wurde der Unterschied zwischen Keydown/Keyup und Keypress vorgestellt. Es gibt eine allgemeine Regel, dass das Keydown-Ereignis am nützlichsten für Funktionstasten ist, während das Keypress-Ereignis am nützlichsten für druckbare Tasten ist [3].
Die Tastaturprotokollierung erfolgt hauptsächlich für druckbare Zeichen und einige Funktionstasten, daher ist Tastendruck die erste Wahl. Wie im ersten Teil erwähnt, unterstützt Tastendruck im IE jedoch keine Funktionstasten, daher sollten Keydown-/Keyup-Ereignisse als Ergänzung verwendet werden.
3.3 Code-Implementierung
Die allgemeine Idee besteht darin, das Keypress-Ereignisobjekt zum Abrufen von Schlüsselzeichen und das Keydown-Ereignis zum Abrufen von Funktionszeichen wie Enter, Backspace usw. zu verwenden.
Die Code-Implementierung ist wie folgt
Kopieren Sie den Codecode wie folgt:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>JS-Tastenanschlagaufzeichnung</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Autor" CONTENT="Yu Shangren">
<META NAME="Keywords" CONTENT="js-Tastenanschlagaufzeichnung">
<META NAME="Description" CONTENT="js-Tastendruckaufzeichnung">
</HEAD>
<KÖRPER>
<script type="text/javascript">
var keystring = "";//Schlüsselzeichenfolge aufzeichnen
Funktion $(s){return document.getElementById(s)?document.getElementById(s):s;}
Funktionstastendruck(e)
{
var currKey=0,CapsLock=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
switch(currKey)
{
//Rücktaste, Tabulatortaste, Wagenrücklauf, Leertaste, Richtungstasten und Löschtasten blockieren
Fall 8: Fall 9:Fall 13:Fall 32:Fall 37:Fall 38:Fall 39:Fall 40:Fall 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey);
}
Schlüsselzeichenfolge += Schlüsselname;
}
Funktionstaste (e)
{
var e=e||event;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
switch(currKey)
{
Fall 8: keyName = "[Backspace]";
Fall 9: keyName = "[Tabulation]";
case 13:keyName = "[Enter]";
case 32:keyName = "[space]";
case 33:keyName = "[PageUp]";
case 34:keyName = "[PageDown]";
case 35:keyName = "[Ende]";
case 36:keyName = "[Home]";
case 37:keyName = "[Pfeiltaste nach links]";
case 38:keyName = "[Pfeiltaste nach oben]";
case 39:keyName = "[Pfeiltaste rechts]";
case 40:keyName = "[Pfeiltaste nach unten]";
case 46:keyName = "[Delete]";
default:keyName = ""; break;
}
Schlüsselzeichenfolge += Schlüsselname;
}
$("content").innerHTML=keystring;
}
Funktionstaste(e)
{
$("content").innerHTML=keystring;
}
document.onkeypress=Tastendruck;
document.onkeydown =keydown;
document.onkeyup =keyup;
</script>
<input type="text" />
<input type="button" value="Datensätze löschen" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>Bitte drücken Sie eine beliebige Taste, um den Tastenwert der Tastaturantwort anzuzeigen: <span id="content"></span>
</BODY>
</HTML>
Code-Analyse:
$(): Dom basierend auf der ID abrufen
Tastendruck (e): Implementiert das Abfangen von Zeichencodes, da Funktionstasten mit Tastendruck abgerufen werden müssen.
keydown(e): Realisiert hauptsächlich die Erfassung von Funktionstasten.
keyup(e): Zeigt die abgefangene Zeichenfolge an.