How to Build Keylogger in Browser Using PHP & Javascript

Welcome folks today in this blog post we will be recording keystrokes of the website user which is visiting the website and making a keylogger in browser using php and javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

As you can see in the above html code we have the simple textarea where the user can enter anything from the keyboard. All the keystrokes will be recorded and will be sent to the php server where we will be saving these keystrokes in the log.txt file.

Adding the AJAX Code

And now we need to write the javascript code to handle the key down event. We need to use some AJAX here for the realtime sending of data or keystrokes to the php script where we will saving the data inside the log.txt file.

Now create the keylog.js file inside the root directory and copy paste the below code

As you can see we are writing the DOMContentLoaded event and here we are calling the function which is init which is there inside the keylog object that we will be defining as shown below. This will execute as soon as the webpage loads in the browser.

As you can see we are first of all setting some additional properties for this keylogger. Inside the options we have the delay for the keylogger this value is in milliseconds. This is the amount of time that the keylogger should wait before sending the keystrokes to the php script where it will be saved inside the log.txt file. And we have the cache array variable which is empty. And then we have the boolean variable of sending which has default value set to false.

And then we are defining the init() method inside this object. Inside the method we have the keydown event listener attaching to the body. So whenever the user presses the key on the keyboard in the browser it will stored inside the cache array. For capturing which keyboard key is pressed we are using the event parameter which gets automatically passed to this callback function of this event. And then we are calling the send() method after the specified delay that we have set earlier on. For this we are using the setInterval() method for automatically calling the send() method after the keylogger delay.

Now we need to define the send() method which will actually send the keystrokes of the user to the php script in realtime using some ajax as shown below

As you can see inside the send() method we are first of all initiating a new formData object and then we are appending the keystrokes of the user. And then we are sending these keystrokes to the keylog.php script which we will make later. For this we are using the fetch api which is built in browser. And here we are using the post method and we are sending the data as an object. This will return the promise and using the then statement we will get the response whether the keystrokes were saved or not. And if any error takes place we will print the error in the console.

Now we will be making the php script where we will be storing the keystrokes of the user inside the log.txt file as shown below

keylog.php

Now if you open the index.html inside the browser and then if you press any key on the keyboard then as you can see log.txt file will be created automatically and also the keystrokes will be recorded as shown below