登录
首页 >  文章 >  前端

点击劫持是什么及防范方法

时间：2026-05-16 09:00:34 387浏览 收藏

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

HTML中什么是点击劫持以及如何防范

点击劫持不是代码写错导致的报错，而是一种**UI层的视觉欺骗攻击**：攻击者用透明

把 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 执行：