点击劫持是什么及防范方法
点击劫持是一种隐蔽性强、危害巨大的UI层视觉欺骗攻击——攻击者通过透明iframe将你的已登录敏感页面(如转账、改密页)悄然覆盖在诱饵按钮之下,用户毫无察觉地完成高危操作;它并非代码缺陷,而是利用浏览器嵌入机制的设计盲区,因此防范核心在于从源头阻断页面被非法嵌入,而非修补前端逻辑;当前最有效、标准化的防御方案是采用CSP的frame-ancestors指令(如'none'或'self'),彻底取代已过时且功能受限的X-Frame-Options,同时必须针对高风险页面(如支付、授权页)实施精细化策略配置,辅以简单可靠的本地测试方法快速验证防护是否生效。

点击劫持不是代码写错导致的报错,而是一种**UI层的视觉欺骗攻击**:攻击者用透明 叠在你的页面上,用户看似在点“领红包”,实际点击事件被传递到下方你已登录的银行页“确认转账”按钮。防范的关键不是改前端逻辑,而是**阻止页面被嵌入**。
怎么快速验证自己网站是否可被点击劫持
不用装工具,本地建一个 test.html 文件,填入以下最小可复现代码:
<!DOCTYPE html>
<html>
<body>
<button>假装这是个诱饵按钮</button>
<iframe src="https://your-site.com/withdraw"
style="opacity:0.01; position:absolute; top:0; left:0; width:100%; height:500px; z-index:2;">
</iframe>
</body>
</html>
把 https://your-site.com/withdraw 换成你自己的敏感页面地址(比如支付页、修改密码页),用浏览器打开这个 HTML。如果能正常加载且不跳转、不报错、不拦截——说明该页面目前可被 iframe 嵌套,存在点击劫持风险。
- 关键观察点:不是看“能不能显示”,而是看“是否静默加载成功”。透明度设为
0.01是为了肉眼可见地确认 iframe 是否真的加载了目标页 - 测试前必须已登录目标网站,否则无法触发真实操作场景
- Chrome 和 Firefox 的 DevTools → Elements 面板里搜
iframe,能看到子帧结构;Network 标签里查your-site.com是否发起了请求
X-Frame-Options 头为什么现在不够用了
X-Frame-Options 是最早也是最直接的防御手段,但它有硬伤:只支持 DENY、SAMEORIGIN、ALLOW-FROM 三种值,且 ALLOW-FROM 在 Chrome 79+ 和 Firefox 70+ 已被废弃,现代浏览器完全忽略它。
DENY最安全,但会阻断所有合法嵌入场景(比如你自己的管理后台 iframe 集成)SAMEORIGIN是折中选择,但无法应对子域名跨域(a.example.com嵌入b.example.com仍可能成功)- 它不支持通配符、不支持多源、不支持动态策略,纯静态响应头
应该用 CSP 的 frame-ancestors 替代 X-Frame-Options
真正该配置的是 Content-Security-Policy 中的 frame-ancestors 指令,它是 W3C 标准,覆盖所有现代浏览器,且语义更清晰、策略更灵活。
- 禁用所有嵌入:
Content-Security-Policy: frame-ancestors 'none'; - 仅允许同源:
Content-Security-Policy: frame-ancestors 'self'; - 允许多个指定域名:
Content-Security-Policy: frame-ancestors https://admin.example.com https://dashboard.example.com; - Nginx 示例配置:
add_header Content-Security-Policy "frame-ancestors 'self';"; - 注意单引号必须保留,
'none'和'self'是关键字,不能漏掉引号
部署后务必用 curl 验证响应头是否生效:curl -I https://your-site.com/withdraw | grep "Content-Security-Policy"。如果返回空,说明配置没生效或被其他中间件覆盖。
JavaScript Frame-Busting 脚本只是辅助手段,不可依赖
有些老教程推荐在页面开头加一段 JS 判断是否在 iframe 中并强制跳顶层,例如:
if (window.top !== window.self) {
window.top.location = window.self.location;
}
这类脚本问题很多:
- 现代浏览器(Chrome 80+)默认启用
cross-origin-opener-policy,可能直接阻断window.top访问,抛出 SecurityError - 攻击者可以加
sandbox属性禁用 JS 执行: - 页面加载过程中存在“闪现窗口”时间差,用户可能在这期间完成点击
- 移动端 Safari 对
window.top的访问限制更严格,脚本常失效
所以它只能作为服务端防护失效时的兜底,不能替代 frame-ancestors。
真正容易被忽略的是:敏感操作页面(如支付、密码修改、OAuth 授权页)必须单独设置 CSP 策略,而不是整个站点统一配置。因为首页允许嵌入广告 iframe,不代表付款页也能开绿灯——策略粒度必须和业务风险对齐。
理论要掌握,实操不能落!以上关于《点击劫持是什么及防范方法》的详细介绍,大家都掌握了吧!如果想要继续提升自己的能力,那么就来关注golang学习网公众号吧!
PHP5.5与PHP7.2性能函数对比及升级注意事项
- 上一篇
- PHP5.5与PHP7.2性能函数对比及升级注意事项
- 下一篇
- Word插件快捷命令设置教程
-
- 文章 · 前端 | 12分钟前 |
- Expo热更新实战:开发警告与生产崩溃解决
- 404浏览 收藏
-
- 文章 · 前端 | 16分钟前 |
- Sass与Less深度对比:语法、功能与生态分析
- 216浏览 收藏
-
- 文章 · 前端 | 18分钟前 |
- React 声明式排序:使用 toSorted 实现高效更新
- 344浏览 收藏
-
- 文章 · 前端 | 21分钟前 |
- animation-play-state控制动画暂停与播放方法
- 136浏览 收藏
-
- 文章 · 前端 | 30分钟前 |
- CSS设置背景图不随滚动移动方法
- 419浏览 收藏
-
- 文章 · 前端 | 39分钟前 |
- Bootstrap 5 图片对齐方法详解
- 250浏览 收藏
-
- 文章 · 前端 | 40分钟前 |
- 使用 export 实现模块自销毁,降低内存占用
- 228浏览 收藏

