The internet relies on trust. When a web user visits a site, they assume the buttons they click perform the actions labeled on them. However, cybercriminals constantly develop methods to exploit this trust. One such deceptive method is the clickjacking attack.
Clickjacking occurs when an attacker tricks a user into clicking on something different from what the user intended to click.
By overlaying a transparent layer or an invisible iframe on top of a legitimate page, hackers can hijack clicks meant for a dummy button or harmless link. This can lead to serious consequences, such as downloading malware, transferring funds, or unknowingly liking a social media page.
If you are a website owner, understanding this threat is crucial. This guide covers the mechanics of this UI redressing technique, how to detect vulnerabilities, and the specific steps to secure your WordPress site using the X-Frame-Options header and Content Security Policy (CSP).
Understanding Clickjacking Attacks: The Risks of UI Redressing
The term “clickjacking” is a portmanteau of “click” and “hijacking.” In security circles, it is formally known as a UI redressing attack.
This name perfectly describes the mechanism: the attacker changes the user interface (UI) to hide the actual target website.
In a standard clickjacking attack, the attacker creates a malicious page. This page loads a targeted page, typically a sensitive page such as a bank login or a settings panel, within an iframe.
The attacker sets the iframe to be fully transparent. They then place their own visible content, such as a video player or a claim for a free prize, directly under or over the invisible frame.
The user clicks on what they think is a “Play” button or a “Claim Prize” link. In reality, they are clicking on the invisible page loaded from a different origin.
Because the user’s computer and browser still hold the session cookies for the targeted site, the action is authenticated and processed immediately. The user has no idea they just performed a high-risk action.
This attack exploits the web’s capability to frame content. While framing is proper for embedding maps or videos, it becomes dangerous when a web page does not explicitly restrict who can frame it.
Without adequate control, any website can become a victim of UI redressing.
Read More: Real Cost of WordPress Security Mistakes
Secure Your WordPress Site Before Attackers Strike
Protect your website from clickjacking and other threats with Seahawk’s expert website care services.
How Clickjacking Attacks Work Using Invisible iframes and Overlays?
To fully grasp the danger, we must look at the technical execution. The core of a clickjacking attack relies on the CSS opacity property.
An attacker builds a decoy site. This site serves as the bait. On this page, the attacker uses HTML to load the victim’s web page within an iframe.
The code might look innocent, but the CSS tells a different story. The attacker sets the opacity of the iframe to 0.0. This creates an invisible iframe.
Although the framed content is technically there, the user cannot see it. The attacker then positions this invisible layer precisely over a visible button on their decoy site.
For example, imagine an attacker wants to force you to delete your blog. They load your blog’s “Delete Account” page in an invisible iframe. They position the invisible “Delete” button directly over a visible “Win a Gift” button on their malicious site.
When the user clicks the “Win a Gift” button, the click event passes through the visible elements and hits the top window of the invisible frame. The browser interprets this as a legitimate click on the “Delete” button. Since the user is likely logged in on the same browser, the command executes instantly without the user’s knowledge.
This method allows attackers to bypass CSRF (Cross-Site Request Forgery) tokens in some instances, as the browser sends the request as if the user had physically clicked the button on the legitimate page.
Further Reading: How to Use Malware Protection to Safeguard Your Website Effectively
Major Types of Clickjacking Attacks and Common Variations
While the basic overlay is the most common method, there are several variations of clickjacking designed to exploit specific behaviors or browser vulnerabilities.
Likejacking: Exploiting Social Media Interactions
Likejacking is a specific form of clickjacking targeting social media networks. The attacker aims to manipulate the user into “liking” or “sharing” a page without their consent.
In this scenario, the invisible iframe contains a Facebook “Like” button or a Twitter “Follow” button. The attacker positions this transparent layer over a video or an image on a malicious page.
When the user tries to click play on the video, they inadvertently “like” the attacker’s page. This enhances the social credibility of malicious sites and facilitates the spread of spam or scams to the user’s friends.
Nested Clickjacking and X-Frame-Options Vulnerabilities
Nested clickjacking targets web pages that attempt to use frame-busting scripts but fail to implement them correctly. Some legacy browsers or specific configurations allow attackers to thwart these scripts.
In this variation, the attacker nests the target iframe within two different frames. By manipulating the way the browser handles the window location and navigation, the attacker prevents the legitimate site from “breaking out” of the frame.
This highlights why relying solely on client-side scripts is not a best practice; robust server-side headers are required.
Further Reading: Preventing Brute Force Attacks Against WordPress Websites
CursorJacking, MouseJack, and Other Deceptive Techniques
CursorJacking is a highly deceptive variation. Here, the attacker replaces the actual mouse cursor with a fake custom cursor. Using CSS and JavaScript, the attacker offsets the real cursor from the fake one.
The user perceives their mouse is hovering over a safe link. However, the actual cursor (which might be invisible or offset) is hovering over a malicious element. When the user clicks, the action occurs at the real cursor’s location, not the visible fake one.
Similarly, other techniques involve rapidly moving the invisible frame to track the mouse (MouseJack), ensuring the malicious button is always under the cursor, regardless of where the user moves it.
Know More: Virtual Patching in WordPress: How it Works and Why it Matters
How to Detect Clickjacking Vulnerabilities on Your Web Pages?
Before you can prevent clickjacking, you must verify if your website is vulnerable. Fortunately, checking for this vulnerability is straightforward.
The primary check involves verifying whether your web page can be loaded within an iframe on a different origin. You can do this by creating a simple HTML file on your local machine:
<html>
<body>
<iframe src="https://yourwebsite.com" width="500" height="500"></iframe>
</body>
</html>
Open this file in modern browsers, such as Chrome or Firefox. If your website loads successfully inside the box, you are vulnerable to clickjacking.
A secure site should refuse to connect or display a blank space, indicating that the browser blocked the framed content.
You can also use online security scanners or browser add-ons designed for penetration testing. These tools analyze the HTTP response header of your site.
They specifically look for the absence of the X-Frame-Options header or the Content Security Policy header. If these headers are missing, the tool will flag your site as high risk.
Server-Side Prevention: Using X-Frame-Options to Restrict Framing
The most traditional and widely supported defense against clickjacking is the X-Frame-Options (XFO) header. This is a response header sent by the web server that tells the browser whether a page is allowed to be rendered in a <frame>, <iframe>, <embed>, or <object>.
When a browser loads a page, it checks this header. If the policy is violated, the browser ensures the user’s safety by not rendering the content.
There are three values typically used with the X-Frame-Options header:
- DENY: This is the strictest setting. It prevents any domain from framing the requested page. Even if the page attempts to frame itself, it will fail. This is ideal for a sensitive page that never needs to be embedded.
- SAMEORIGIN: This allows the page to be framed only by pages on the exact origin (same domain, protocol, and port). This is the most common method for securing WordPress sites, as it allows you to embed your own content while blocking external attackers.
- ALLOW-FROM uri: This directive is obsolete and was intended to allow framing from a specific URI. However, it is not supported by many modern browsers and should generally be avoided in favor of newer standards.
Setting X-Frame-Options to SAMEORIGIN is often sufficient to stop the vast majority of clickjacking attacks. It ensures that an attacker cannot load your login page on their decoy site.
However, XFO has limitations. It effectively allows only one domain (the same domain) or none. It lacks granularity if you need to enable multiple specific partners to frame your content. For that, we need a more modern solution.
Explore More: How to Create a Password-Protected Page on WordPress
Advanced Protection: Content Security Policy (CSP) and Frame-Ancestors
While X-Frame-Options is effective, the Content Security Policy (CSP) is the future of clickjacking defense. CSP is a security layer that helps detect and mitigate various types of attacks, including Cross-Site Scripting (XSS) and data injection.
For preventing clickjacking, we use the frame-ancestors directive. This directive specifies the parents who may embed a page.
Implementing the Frame-Ancestors Directive for Granular Control
The frame-ancestors directive offers far more flexibility than X-Frame-Options. It allows you to define a list of domains that are permitted to frame your content.
For example, a Content Security Policy CSP header might look like this:
Content-Security-Policy: frame-ancestors ‘self’ https://trusted-partner.com;
In this example:
- ‘self’ acts like the SAMEORIGIN XFO directive, allowing the same domain to frame the content.
- https://trusted-partner.com allows a specific external site to frame the content.
You can also use wildcards or allow all HTTPS schemes using allow from https, though strict listing is safer. This granular control is vital for enterprise websites that rely on cross-site integrations.
Why CSP Frame-Ancestors are Superior to Frame-Busting Scripts?
In the past, developers used JavaScript frame-busting code. These scripts would run on the client side and check if the top window location matched the current window location. If not, they would try to break out of the frame.
Attackers quickly found ways to neutralize these scripts. Browsers like Internet Explorer (in older versions) or features like the HTML5 sandbox attribute on iframes could block the frame-busting script from running, rendering the defense useless.
Frame ancestors and X-Frame-Options are server-side controls. The attacker cannot disable them because the browser enforces the rule before rendering the content. The browser reads the response header and simply refuses to display the malicious page element.
Using CSP frame-ancestors is the current best practice because it is standardized across modern browsers. While X-Frame-Options is still helpful for legacy browsers, frame-ancestors takes precedence in browsers that support both.
Step-by-Step: Securing Your WordPress Site Against Clickjacking
Securing a WordPress site requires adding the correct headers. You do not need to be a developer to implement these changes, but it is recommended that you always back up your site before editing server files.
Step 1: Configuring Headers in .htaccess or functions.php
If your WordPress site runs on an Apache web server, you can edit the .htaccess file found in your root directory.
To implement the X-Frame-Options header, add this line:
<IfModule mod_headers.c>
Header always append X-Frame-Options SAMEORIGIN
</IfModule>
To implement the Content Security Policy with frame-ancestors:
<IfModule mod_headers.c>
Header always append Content-Security-Policy "frame-ancestors 'self';"
</IfModule>
This configuration ensures that only your own site can frame your pages. To allow a partner, simply add their URL after ‘self’.
Alternatively, you can add headers via WordPress’s functions.php file in your active theme. This method works regardless of the server type (Apache or Nginx) as long as PHP handles the headers:
function add_security_headers() {
header('X-Frame-Options: SAMEORIGIN');
header("Content-Security-Policy: frame-ancestors 'self';");
}
add_action('send_headers', 'add_security_headers');
This code hooks into the WordPress header generation process and injects the protection directives for every web page served.
Step 2: Utilizing WordPress Security Plugins for Client-Side Defense
If editing code feels too risky, you can use WordPress security plugins. Many comprehensive security suites automatically add these headers.
- All-In-One Security (AIOS): This plugin has specific settings for iframe protection. You can enable “Deny Bad Queries” and specific firewall rules that often include frame options management.
- Headers Security Advanced & HSTS WP: This dedicated plugin enables you to configure specific HTTP headers without requiring code modifications. You can select X-Frame-Options from a dropdown menu and set it to SAMEORIGIN.
While plugins are convenient, ensure they configure the response header correctly.
Some plugins might only add meta tags, which are less effective for frame-ancestors (CSP via meta tags does not support frame-ancestors). Always verify the result using an online header checker.
Conclusion
The threat of clickjacking is persistent because it exploits the user’s visual perception rather than a software bug. As long as browsers support iframes, attackers will attempt UI redressing.
For a website owner, ignoring this vulnerability means risking your users’ safety and your site’s reputation. A user who ends up downloading malware or losing money because of a button on your site will lose trust in your brand.
The solution is a layered defense.
- Audit: Regularly scan your web pages to see if they can be framed.
- Implement XFO: Use the X-Frame-Options header set to SAMEORIGIN to protect users on legacy browsers and other browsers that may not fully support CSP.
- Implement CSP: Adopt the Content Security Policy frame-ancestors directive for robust, granular control on modern browsers.
- Monitor: Use security plugins to ensure headers remain active after theme or server updates.
By taking control of how your content is framed, you effectively dismantle the invisible layers hackers rely on. You ensure that when a user clicks, they are performing actions they intend, protecting them from falling victim to one of the web’s most deceptive attacks.
FAQs About a Clickjacking Attack
What is the most common method used in a clickjacking attack?
The most common method involves placing hidden layers over a legitimate web page. An attacker creates invisible iframes that trick users into clicking on elements they cannot see. These hidden layers enable attackers to trigger actions without user awareness, potentially facilitating their access to sensitive features.
How does same-origin X Frame Options help prevent clickjacking?
Same-origin X-Frame-Options is a response header that allows a page to be framed only by pages from the exact origin. This prevents external domains from embedding your site inside malicious frames and helps block unauthorized interactions.
What is the frame-ancestors policy in Content Security Policy?
The frame ancestors policy defines which domains are allowed to embed your web pages. It is part of Content Security Policy and provides more control than older headers. This policy is highly effective in preventing clickjacking attacks.
Can clickjacking attacks allow attackers to gain access to user accounts?
Yes, clickjacking can help attackers gain access to accounts indirectly. By disguising buttons and actions, attackers can trick users into changing settings, approving permissions, or submitting forms without their knowledge.
What is the best way to prevent clickjacking on a WordPress website?
The most effective way to avoid clickjacking is to employ multiple defenses. Set the X-Frame-Options response header, apply a frame-ancestors policy, and keep WordPress security plugins active. Combining these measures blocks attacks at the source.
