From user journey to secure systems: how UX / UI influences cybersecurity

Ekaterina Gainullina, Security Vision

Introduction

Modern design that strives for convenience and intuitiveness can be a dangerous weapon in the hands of attackers. Minimalistic interfaces that mimic the style of popular brands inspire trust, allowing users to fraudulently obtain user data. Dark patterns - brightly coloured "Agree" buttons instead of almost invisible "Reject" buttons or false timers that say "Act now!" encourage hasty action. And emotional triggers like fake "Your account will be blocked!" notifications shut down critical thinking. Moreover, the desire for simplicity often obscures important details, such as site URLs or permission text. As a result, the user, relying on the convenience and familiarity of the interface, becomes an easy target. User inattention is the main ally of attackers in successful attacks. The human brain is designed to save effort: we are used to trusting familiar interfaces, doing things automatically, and not reading small text. Attackers are adept at exploiting these characteristics, creating attacks that masquerade as common tasks. For example, fake notifications or fake login windows that look identical to real ones rely on our inattention: we simply don't check details such as URLs or permissions. Another important factor is information overload. When interfaces are crammed with text or actions need to be performed quickly, the user doesn't have time to analyse what's going on. This is why attacks through familiar actions like clicking or scanning QR codes are so successful. Inattention allows the attacker to bypass logic and critical thinking, turning every unconscious action into a point of vulnerability.

The purpose of this article is to show how cybercriminals use the most unexpected and subtle mechanisms to launch attacks based on common user behaviour. The article will focus on interesting and unusual techniques that are not immediately obvious, but are capable of causing serious damage.

Clickjacking

Clickjacking or clickjacking is a technique in which attackers manipulate a user's actions, causing them to click in the wrong place. This is usually achieved by using invisible interface layers or frames that are layered on top of legitimate elements. The user thinks they're clicking on a "Play Video" or "Like Post" button, but they're actually activating a hidden function: subscribing to spam, transferring data, or running malicious code. One classic example is fake buttons on websites that are seemingly harmless but lead to subscription to paid services. Clickjacking takes advantage of a user's trust in the interface and their habit of automatic actions, turning mundane clicks into a cyberattack tool. And even in 2024, clickjacking vulnerabilities remain relevant:

 Figure 1: Clickjacking vulnerability in DBU [1]

Depending on the specifics of the operation, the attack can take different forms and names. There are the following variants [2]:

 - Likejacking: This type of attack aims to intercept users' clicks to redirect them to click the "Like" button on a Facebook page or other social networks.

 - Cookiejacking: The user is forced to interact with an interface element, such as through drag and drop, giving an attacker access to cookies stored in the browser. This may allow the attacker to perform actions on the target site on the user's behalf.

 - Filejacking: In this type of attack, the user allows an attacker to access their local file system and take files.

 - Cursorjacking: This technique changes the position of the cursor on the screen so that the user thinks he or she is performing one action, but is actually performing another.

 - Password Manager Attacks: This type of attack aims to trick password managers into taking advantage of the auto-fill feature to gain access to credentials.

Each of these types of attacks demonstrates the sophistication of attackers manipulating user interaction with the interface.

Figure 2: The process of a clickjacking attack [3]

sending a link

The attacker creates a malicious website or page and sends the user a link via email, social media or other communication channels.

The victim opens the link

The victim opens this link in their browser, unaware that the page contains a malicious element.

opening the target website through a frame

An attacker's website embeds a target site (such as a social network or online banking) in a hidden or invisible iframe. This creates the illusion that the user is interacting with a secure page.

Victim performs the act thinking it is safe

The victim clicks on a button or interface element that looks harmless (for example, a "Like" or "Confirm" button). But in reality, this action is performed inside the iframe, and the result goes to the target site. The attacker gains control over the action performed - for example, activating a subscription, transferring access to data, or hacking an account.

Bottom line

Clickjacking relies on the user's trust in the visible elements of the interface. The victim does not realise that clicks are redirected to another, hidden layer. Thus, the attacker can perform actions on behalf of the user without his consent.

So how do you protect yourself from such attacks?

OWASP (Open Web Application Security Project) offers several methods to protect against clickjacking attacks, including the use of HTTP headers and Content Security Policy (CSP) directives.

Header X-Frame-Options

The X-Frame-Options header allows you to control whether your web page can be loaded in an <iframe> on other sites. This helps prevent unauthorised embedding of your content.

Value options:

• DENY: Completely disallows page loading in <iframe>.
• SAMEORIGIN: Allow the page to be loaded in <iframe> only if the request comes from the same domain.
• ALLOW-FROM uri: Allows a page in <iframe> to be loaded only from the specified URI.

Example of setting:

X-Frame-Options: SAMEORIGIN

Restrictions:

• X-Frame-Options does not support specifying multiple sources.
• Some older browsers may not support this header.

Frame-ancestors directive in Content Security Policy (CSP)

The frame-ancestors directive in CSP defines which sources are allowed to embed your page in <iframe>. It provides a more flexible and modern way of protection than X-Frame-Options.

Example of setting:

Content-Security-Policy: frame-ancestors 'self' https://trusted.com;

This header only allows the page to be embedded by itself and the trusted.com domain.

Benefits:

• Supports specifying multiple sources.
• Provides more precise control over content embedding.

Restrictions:

• Requires browser support for CSP.
• Some older browsers may not support this directive.

Scrolling manipulation (Scrolljacking)

Scrolljacking (or scroll hijacking) is a technique in which attackers modify the default scrolling behaviour of a web page to manipulate user actions. This technique is used both to improve UX in legitimate projects and for malicious purposes. In the case of attacks, attackers use scrolling to trigger hidden actions that the user does not realise.

Examples of Scrolljacking attacks

Example 1: Automatic purchase of goods

An attacker creates a website offering a "free" product. As the user scrolls the page, they see more information about the product, but at some point a hidden "Buy" button is unnoticeably triggered. The scrolling automatically submits a form with the user's details if they have previously filled them in.

Mechanism: Attackers use JavaScript to intercept onscroll events and call functions that mimic clicking or submitting a form.

Example 2: Link Hijacking

A user visits a site with a long text or article. When scrolling down the page, a redirect is triggered, which redirects him to a phishing site.

Mechanism: JavaScript code tracks the scroll position and calls window.location.href to automatically load another URL.

Example 3: Discreet subscription

On sites with fake promotions or giveaways, scrolling through the page unnoticeably activates a subscription to a paid service. The user does not even realise that this has happened until they receive the invoice.

Mechanism: Scrolling down triggers JavaScript that simulates clicking on an invisible subscribe button.

Scrolljacking attack pattern

Step 1: Bait

   - The attacker creates a website with attractive content: promotions, free products, discounts or important information.

   - The user is prompted to view a page, often with long text or a list of products.

Step 2: Changing the scrolling behaviour

Through JavaScript, event handlers (onscroll) are added that intercept each user action as the page scrolls.

Step 3: Covert action

Scrolling initiates the following hidden actions:

   - Automatically click on a hidden button or link (via element.click()).

   - Sending a form with user data if it has already been filled in.

   - Redirect to a malicious site.

   - Adding an item to your basket and completing your purchase.

Step 4: Ending the attack

The user either doesn't realise that he or she has been the victim of an attack, or realises it too late (e.g. when debiting money or downloading a malicious file).

How do I protect myself?

For users:

•  Use modern browsers:

Updated versions of browsers such as Chrome, Firefox or Edge have built-in mechanisms to protect against malicious scripts.

•  Block scripts:

Install extensions like uBlock Origin or NoScript to prevent suspicious scripts from running.

•  Be careful:

If the site behaves strangely when scrolling (for example, something unexpected happens), close the page and do not enter your data.

For developers:

•  Limit the use of onscroll:

If scrolling is used for animations or UX improvements, avoid automatic clicks or changes.

•  Protect forms and buttons:

Validate user actions (e.g., confirmation before submitting a form).

•  Add notifications:

If the user performs an important action (purchase, subscription), require additional confirmation.

Scrolljacking is an example of how UX enhancements can become a tool to manipulate users. Attackers use simple scrolling tricks to get users to perform actions without their consent. Therefore, it's important to stay diligent and utilise modern security tools.

Conclusion

The balance between interface usability and security is one of the key challenges for developers. Interfaces should remain simple and clear, but at the same time protect the user. Tooltips, warnings, checking actions at critical moments - all this helps users to be more aware without sacrificing convenience. Intelligent design and modern security measures, such as two-factor authentication or the use of Content Security Policy, help to minimise risks.

However, no technology can replace the care and awareness of users themselves. Check links, be wary of notifications, and keep your software up to date. Remember: in the digital world, your security starts with your choices. Only by joining forces with developers and users can we counter new threats and make the internet a safer place.