A Detailed Explanation of Clickjacking Attacks

I. Attack Description
Clickjacking is a visual deception attack. The attacker overlays a transparent malicious page (e.g., a button or form) on top of a legitimate webpage, tricking the user into clicking on seemingly harmless elements (like a "Play Video" button) that actually trigger hidden malicious actions (such as following a social media account or transferring money). This attack exploits the user's trust in the visible interface and can be executed without exploiting a technical vulnerability.

II. Attack Principles and Steps

1. Construct the Malicious Page:

   • The attacker creates a page containing malicious operations (e.g., an HTTP request to "Follow a user").
   • The malicious page is made transparent (opacity: 0) using CSS and embedded within an iframe.

2. Induce User Interaction:

   • A decoy element (e.g., a "Free Lottery" button) is overlaid on top of the malicious page using CSS positioning to align it with the hidden malicious button.
   • When the user clicks the decoy, they inadvertently trigger the hidden malicious operation inside the iframe.

3. Bypassing Browser Security Restrictions:

   • If the target website is protected by the Same-Origin Policy, the attacker might combine XSS or open redirect vulnerabilities to execute the malicious operation within the context of the user's logged-in session.

III. Attack Example (Pseudo-code)

<!-- Malicious page code -->
<style>
  iframe {
    width: 100%;
    height: 100%;
    opacity: 0; /* Hide the iframe */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  button {
    position: absolute;
    top: 300px;
    left: 400px;
    z-index: 2; /* Decoy button overlays the iframe */
  }
</style>
<button>Click to Win an iPhone!</button>
<iframe src="https://legitimate-site.com/follow?user=attacker"></iframe>

When the user clicks the button, the "Follow the attacker" request inside the iframe is actually triggered.

IV. Defense Measures

1. Server-Side Defense:

   • X-Frame-Options Response Header:
     • Set to DENY (prohibits embedding in any frame) or SAMEORIGIN (allows embedding only from the same origin).
     • Example: X-Frame-Options: DENY.
   • Content-Security-Policy (CSP):
     • Use the frame-ancestors directive to restrict which origins can embed the page, e.g., Content-Security-Policy: frame-ancestors 'self';.

2. Client-Side Defense:

   • Frame-Busting Scripts:
     • Use JavaScript to detect if the page is embedded in an iframe, and if so, redirect to the top-level page:

       if (top !== self) top.location = self.location;
       

     • Note: This method can be bypassed by browser XSS filters or sandbox mechanisms.

3. Enhanced Verification:

   • Require secondary authentication (e.g., SMS verification code) for critical operations (like money transfers) to reduce the impact of a single click.

V. Advanced Bypass and Protection

• Partial Browser Compatibility Issues: Early browsers might ignore X-Frame-Options, requiring combined use with CSP.
• Multi-Layer Iframe Attacks: Attackers may nest multiple iframe layers to evade simple detection; ensure defenses cover all scenarios.

By combining server-side response headers with client-side verification, Clickjacking attacks can be effectively mitigated.