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!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

QUICK SLIDES

 

 

TABLE OF CONTENTS

Download & Notes Keylogger Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • Launch keylog.html to start the example.
  • Take note to use http:// and not file://.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

JAVASCRIPT KEYLOGGER

All right, let us now get into the details of creating a simple keylogger with PHP and Javascript.

 

STEP 1) THE HTML

keylog.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

keylog.js
var keylog = {
  // (A) SETTINGS & PROPERTIES
  cache : [], // TEMP STORAGE FOR KEY PRESSES
  delay : 2000, // HOW OFTEN TO SEND DATA TO SERVER
  sending : false, // ONLY 1 UPLOAD ALLOWED 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

keylog.php
<?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.

 

 

USEFUL BITS & LINKS

That’s it for all the code, and here are some small extras that may be useful to you.

 

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 purposes, please make sure that the users are fully aware that their keystrokes are being recorded first.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Javascript PHP Keylogger (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this short guide. I hope that it has helped you with your project, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “3 Steps Simple Keylogger With Javascript PHP (Free Download)”

  1. I’ve downloaded and unzipped the files. After clicking on the HTML file I type in some characters on the bar but the keylog.txt doesn’t get created. Why is that?

Leave a Comment

Your email address will not be published.