Bagian 1: Peristiwa penting browser
Untuk mengimplementasikan keylogging dengan js, Anda perlu memperhatikan tiga tipe event utama pada browser, yaitu keydown, keypress dan keyup, yang masing-masing berhubungan dengan tiga event handle onkeydown, onkeypress dan onkeyup. Penekanan tombol yang khas akan menghasilkan ketiga peristiwa, secara berurutan keydown, penekanan tombol, dan kemudian keyup ketika tombol dilepaskan.
Di antara ketiga jenis peristiwa ini, keydown dan keyup merupakan tingkat yang relatif rendah, sedangkan penekanan tombol relatif tingkat lanjut. Yang disebut lanjutan di sini berarti ketika pengguna menekan shift + 1, penekanan tombol akan mem-parsing peristiwa kunci dan mengembalikan karakter "!" yang dapat dicetak, sedangkan keydown dan keyup hanya mencatat peristiwa shift + 1. [1]
Namun, penekanan tombol hanya efektif untuk beberapa karakter yang dapat dicetak. Untuk tombol fungsi, seperti F1-F12, Backspace, Enter, Escape, PageUP, PageDown, dan arah panah, kejadian penekanan tombol tidak akan dihasilkan, melainkan keydown dan keyup. dapat dihasilkan acara. Namun, di FireFox, tombol fungsi dapat menghasilkan peristiwa penekanan tombol.
Objek peristiwa yang diteruskan ke pengendali peristiwa keydown, penekanan tombol, dan keyup memiliki beberapa properti umum. Jika Alt, Ctrl, atau Shift ditekan bersamaan dengan sebuah tombol, hal ini diwakili oleh properti altKey, ctrlKey, dan shiftKey acara, yang umum pada FireFox dan IE.
Bagian Kedua: Browser yang Kompatibel
Js apa pun yang melibatkan browser harus mempertimbangkan masalah kompatibilitas browser.
Saat ini, browser yang umum digunakan sebagian besar berbasis IE dan berbasis Mozilla. Maxthon didasarkan pada kernel IE, sedangkan FireFox dan Opera didasarkan pada kernel Mozilla.
2.1 Inisialisasi acara
Hal pertama yang perlu Anda ketahui adalah cara menginisialisasi acara. Pernyataan dasarnya adalah sebagai berikut:
tombol fungsiDown(){}
dokumen.onkeydown = keyDown;
Saat browser membaca pernyataan ini, browser akan memanggil fungsi KeyDown() tidak peduli tombol mana yang ditekan pada keyboard.
2.2 Metode implementasi FireFox dan Opera
Implementasi program seperti FireFox dan Opera lebih merepotkan dibandingkan IE, jadi saya akan uraikan dulu di sini.
Fungsi keyDown() memiliki variabel tersembunyi - umumnya, kita menggunakan huruf "e" untuk mewakili variabel ini.
tombol fungsiBawah(e)
Variabel e mewakili peristiwa penekanan tombol. Untuk mengetahui tombol mana yang ditekan, gunakan atribut yang mana:
e.yang mana
e.yang akan memberikan nilai indeks kunci. Metode mengubah nilai indeks menjadi nilai alfanumerik kunci memerlukan penggunaan fungsi statis String.fromCharCode(), sebagai berikut:
String.fromCharCode(e.yang mana)
Dengan menggabungkan pernyataan di atas, kita bisa mengetahui tombol mana yang ditekan di FireFox:
Copy kode kodenya sebagai berikut:
tombol fungsiBawah(e) {
var kode kunci = e.yang;
var realkey = String.fromCharCode(e.which);
alert("Kode Kunci: " + kode kunci + " Karakter: " + realkey);
}
dokumen.onkeydown = keyDown;
2.3 Metode implementasi IE
Program IE tidak memerlukan variabel e. Gunakan window.event.keyCode sebagai ganti e.which. Metode untuk mengubah nilai indeks kunci menjadi nilai kunci sebenarnya serupa: String.fromCharCode(event.keyCode). adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
fungsi tombol Bawah() {
var kode kunci = acara.kode kunci;
var realkey = String.fromCharCode(event.keyCode);
alert("Kode Kunci: " + kode kunci + " Karakter: " + realkey);
}
dokumen.onkeydown = keyDown;
2.4 Tentukan jenis browser
Di atas kita telah mempelajari cara mendapatkan objek key event di berbagai browser. Kemudian kita perlu menentukan jenis browser. Ada banyak metode, ada yang lebih mudah dipahami, dan ada juga metode yang sangat cerdas. Mari kita bahas metode umum terlebih dahulu : yaitu Gunakan atribut appName dari objek navigator. Tentu saja, Anda juga dapat menggunakan atribut userAgent. Di sini, appName digunakan untuk menentukan jenis browser. , dan appName FireFox dan Opera adalah "Netscape", sehingga kode dengan fungsi yang relatif sederhana adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
tombol fungsiUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var kode kunci = acara.kode kunci;
var realkey = String.fromCharCode(event.keyCode);
}kalau tidak
{
var kode kunci = e.yang;
var realkey = String.fromCharCode(e.which);
}
alert("Kode Kunci: " + kode kunci + " Karakter: " + realkey);
}
dokumen.onkeyup = keyUp;
Metode yang lebih sederhana adalah [2]:
Copy kode kodenya sebagai berikut:
tombol fungsiUp(e) {
var currKey=0,e=e||acara;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("Kode kunci: " + currKey + " Karakter: " + keyName);
}
dokumen.onkeyup = keyUp;
Cara di atas lebih pintar. Biar saya jelaskan secara singkat:
Pertama-tama, kode e=e||event; adalah untuk kompatibilitas dengan akuisisi objek event browser. Arti kode ini di js adalah jika variabel tersembunyi e ada di FireFox atau Opera, maka e||event mengembalikan e. Jika variabel tersembunyi e tidak ada di IE, maka event dikembalikan.
Kedua, currKey=e.keyCode |. Ada atribut yang mana dan charCode di Opera, dan ada atribut keyCode dan yang mana di Opera.
Kode di atas hanya kompatibel dengan browser, memperoleh objek acara keyup, dan hanya memunculkan kode kunci dan karakter kunci. Namun, masalah muncul saat Anda menekan tombol, semua tombol karakter dalam huruf besar, dan ketika Anda tekan tombol shift, karakternya sangat aneh, sehingga kodenya perlu dioptimalkan.
Bagian 3: Implementasi dan Optimasi Kode
3.1 Kode kunci dan kode karakter untuk peristiwa penting
Kode kunci dan kode karakter peristiwa penting tidak dapat dipindahkan antar browser. Untuk browser yang berbeda dan peristiwa kasus yang berbeda, metode penyimpanan kode kunci dan kode karakter berbeda.....
Di IE, hanya ada satu atribut keyCode, dan interpretasinya bergantung pada jenis peristiwa. Untuk keydown, keyCode menyimpan kode kunci. Untuk kejadian penekanan tombol, keyCode menyimpan kode karakter. Tidak ada atribut yang mana dan charCode di IE, sehingga atribut yang mana dan charCode selalu tidak terdefinisi.
KeyCode di FireFox selalu 0. Saat waktunya keydown/keyup, charCode=0, yang merupakan kode kunci. Ketika peristiwa penekanan tombol terjadi, nilainya dan charCode sama, dan kode karakter disimpan.
Di Opera, nilai keyCode dan yang selalu sama. Dalam acara keydown/keyup, mereka menyimpan kode kunci. Saat tombol ditekan, mereka menyimpan kode karakter, dan charCode tidak ditentukan dan selalu tidak ditentukan.
3.2 Gunakan keydown/keyup atau penekanan tombol
Bagian pertama telah memperkenalkan perbedaan antara keydown/keyup dan penekanan tombol. Ada aturan umum bahwa event keydown paling berguna untuk tombol fungsi, sedangkan event keypress paling berguna untuk tombol yang dapat dicetak [3].
Pencatatan keyboard terutama untuk karakter yang dapat dicetak dan beberapa tombol fungsi, jadi penekanan tombol adalah pilihan pertama. Namun, seperti yang disebutkan di bagian pertama, penekanan tombol di IE tidak mendukung tombol fungsi, jadi peristiwa keydown/keyup harus digunakan untuk melengkapinya.
3.3 Penerapan kode
Ide umumnya adalah menggunakan objek peristiwa penekanan tombol untuk mendapatkan karakter kunci, dan menggunakan peristiwa keydown untuk mendapatkan karakter fungsi, seperti Enter, Backspace, dll.
Implementasi kodenya adalah sebagai berikut
Copy kode kodenya sebagai berikut:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transisi//EN">
<HTML>
<HEAD><TITLE>rekaman penekanan tombol js</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Penulis" CONTENT="Yu Shangren">
<META NAME="Kata Kunci" CONTENT="rekaman penekanan tombol js">
<META NAME="Deskripsi" CONTENT="rekaman keystroke js">
</KEPALA>
<TUBUH>
<skrip tipe="teks/javascript">
var keystring = "";//Rekam string kunci
fungsi $(s){kembalikan dokumen.getElementById(s)?document.getElementById(s):s;}
penekanan tombol fungsi(e)
{
var currKey=0,CapsLock=0,e=e||acara;
currKey=e.keyCode||e.which||e.charCode;
CapsLock=currKey>=65&&currKey<=90;
beralih (kunci saat ini)
{
//Blokir spasi mundur, tab, tombol kembali, spasi, tombol arah, dan tombol hapus
kasus 8: kasus 9:kasus 13:kasus 32:kasus 37:kasus 38:kasus 39:kasus 40:kasus 46:keyName = "";break;
default:keyName = String.fromCharCode(currKey);
}
string kunci += Namakunci;
}
tombol fungsi turun (e)
{
var e=e||acara;
var currKey=e.keyCode||e.which||e.charCode;
if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
{
beralih (kunci saat ini)
{
kasus 8: keyName = "[Backspace]";
kasus 9: keyName = "[Tabulasi]";
kasus 13:keyName = "[Masukkan]";
kasus 32:keyName = "[spasi]";
kasus 33:keyName = "[PageUp]";
kasus 34:keyName = "[PageDown]";
kasus 35:keyName = "[Akhir]";
kasus 36:keyName = "[Beranda]";
kasus 37:keyName = "[tombol panah kiri]";
kasus 38:keyName = "[tombol panah atas]";
kasus 39:keyName = "[tombol panah kanan]";
case 40:keyName = "[tombol panah bawah]";
kasus 46:keyName = "[Hapus]";
default:namakunci = ""; istirahat;
}
string kunci += Namakunci;
}
$("konten").innerHTML=string kunci;
}
tombol fungsi(e)
{
$("konten").innerHTML=string kunci;
}
document.onkeypress=tekan tombol;
dokumen.onkeydown =keydown;
dokumen.onkeyup =keyup;
</skrip>
<tipe masukan="teks" />
<input type="button" value="Hapus catatan" onclick="$('content').innerHTML = '';keystring = '';"/>
<br/>Silakan tekan tombol apa saja untuk melihat nilai kunci respons keyboard: <span id="content"></span>
</BODI>
</HTML>
Analisis kode:
$(): Dapatkan dom berdasarkan ID
penekanan tombol(e): mengimplementasikan intersepsi kode karakter. Karena tombol fungsi perlu diperoleh menggunakan tombol bawah, tombol fungsi ini diblokir saat tombol ditekan.
keydown(e): Terutama merealisasikan perolehan tombol fungsi.
keyup(e): Menampilkan string yang dicegat.