关于Web前端安全防御之点击劫持的原理及防御措施

一、点击劫持的原理

**点击劫持(Clickjacking)**是一种视觉欺骗攻击,攻击者通过将目标网站页面嵌套在自己的恶意页面的 <iframe> 中,并设置透明样式覆盖在精心设计的诱导性内容(如按钮、链接)上方,诱导用户点击。用户看似点击的是恶意页面的元素,实际点击的是被嵌入的目标网站的敏感按钮(如 "确认支付""删除账号" 等),从而在用户不知情的情况下执行非预期操作。

攻击流程示例:

  • 攻击者创建一个恶意页面,通过 <iframe src="https://target.com/pay"></iframe> 嵌入银行转账页面。
  • 攻击者设置 iframe 为透明(opacity: 0),并覆盖在一个看似无害的按钮(如 "领取奖品")上方。
  • 用户点击 "领取奖品" 时,实际点击的是 iframe 中银行页面的 "确认转账" 按钮,导致资金被转走。

二、通过 X-Frame-Options 和 CSP 的 frame-src 防御点击劫持

两者均通过限制页面被嵌入到 <iframe> 中的场景,阻止恶意网站嵌套目标页面。

1. X-Frame-Options 响应头

这是早期防御点击劫持的标准,通过后端设置 HTTP 响应头控制页面是否允许被嵌入:

  • **DENY:**禁止页面被任何网站的 <iframe> 嵌入。
  • **SAMEORIGIN:**仅允许同域名下的页面嵌入(如 a.example.com 可嵌入 a.example.com 的页面,但 b.example.com 不行)。
  • ALLOW-FROM https://trusted.com:仅允许指定域名(如 trusted.com)的页面嵌入(注意:部分现代浏览器已不支持此值)

使用示例:

后端在响应头中添加:

html 复制代码
X-Frame-Options: SAMEORIGIN

此时,只有同域名的页面能嵌入当前页面,外部恶意网站的 <iframe> 会被浏览器拒绝加载。

2. CSP(Content-Security-Policy)的 frame-src 指令

CSP 是更灵活的安全策略,frame-src 专门控制哪些来源的资源可以被用作 <iframe> 或 <frame> 的内容,替代了 X-Frame-Options 的功能,且支持更精细的配置:

  • **frame-src 'self':**仅允许同域名的页面嵌入(等效于 X-Frame-Options 的 SAMEORIGIN)。
  • **frame-src https://trusted.com:**仅允许 trusted.com 域名的页面嵌入。
  • **frame-src 'none':**禁止任何页面嵌入(等效于 X-Frame-Options 的 DENY)。

使用示例:

后端设置响应头:

html 复制代码
Content-Security-Policy: frame-src 'self' https://trusted-partner.com

此时,当前页面仅允许被同域名页面或 trusted-partner.com 的页面嵌入,其他域名的 <iframe> 会被拦截。

三、必须嵌入第三方 iframe 时的安全沙箱机制

若业务需要嵌入第三方 iframe(如支付接口、地图服务等),需通过iframe 的 sandbox 属性内容限制策略 构建沙箱,限制第三方内容的权限,防止恶意行为。

1. iframe sandbox 属性

sandbox 是 HTML5 提供的属性,通过禁用 iframe 内页面的危险权限(如脚本执行、表单提交、跨域请求等)实现隔离,属性值为一组空格分隔的关键词:

|----------------------|---------------------|------------------|
| 关键词 | 作用 | 安全建议 |
| 不设置任何值 | 禁用所有权限(最严格) | 优先选择,仅在必要时开放权限 |
| allow-scripts | 允许 iframe 内执行脚本 | 谨慎使用,可能引入 XSS 风险 |
| allow-forms | 允许提交表单 | 仅在需要表单交互时开放 |
| allow-same-origin | 允许 iframe 内页面访问同域资源 | 避免开放,防止突破沙箱隔离 |
| allow-top-navigation | 允许 iframe 控制顶层页面导航 | 禁止,防止跳转恶意页面 |

2. 安全沙箱设计方案

以嵌入第三方支付 iframe 为例,安全配置如下:

html 复制代码
<!-- 嵌入第三方 iframe 并启用沙箱 -->
<iframe 
  src="https://third-party-payment.com/pay" 
  sandbox="allow-scripts allow-forms"  <!-- 仅开放必要权限 -->
  width="400" 
  height="300"
  frameborder="0"
  scrolling="no"
  referrerpolicy="no-referrer-when-downgrade"  <!-- 限制 referrer 泄露 -->
></iframe>

额外安全措施:

  • **限制 iframe 尺寸和位置:**通过 CSS 固定 iframe 大小和位置,避免被恶意覆盖或伪装。
  • **使用 postMessage 通信:**iframe 内外的交互仅通过 window.postMessage 实现,并严格验证消息来源(event.origin)和内容,防止恶意数据注入。
javascript 复制代码
// 父页面接收 iframe 消息
window.addEventListener('message', (event) => {
  // 验证消息来源是否为可信第三方
  if (event.origin !== 'https://third-party-payment.com') return;
  // 验证消息格式
  if (typeof event.data === 'object' && event.data.type === 'paymentSuccess') {
    // 处理支付成功逻辑
  }
});

监控 iframe 行为: 通过 MutationObserver 监控 iframe 内容变化,检测异常 DOM 操作(如添加透明覆盖层)。
**结合 CSP 限制:**在父页面的 CSP 中明确指定 frame-src 为第三方域名,防止 iframe 被替换为恶意来源。

总结

  • 点击劫持通过透明 iframe 欺骗用户点击,核心防御手段是限制页面被嵌入的场景。
  • X-Frame-Options 提供基础防御,CSP 的 frame-src 更灵活,推荐优先使用 CSP。
  • 必须嵌入第三方 iframe 时,通过 sandbox 属性最小化权限,结合 postMessage 安全通信和 CSP 限制,构建多层沙箱防护。
相关推荐
winkel_wang8 小时前
身份管理与安全 (Protect identities)
windows·安全
司徒轩宇10 小时前
Python secrets模块:安全随机数生成的最佳实践
运维·python·安全
会飞的鱼_12311 小时前
CentOS 7服务器初始化全攻略:从基础配置到安全加固
服务器·安全·centos
YJlio12 小时前
第17章|PowerShell 安全警报——高分学习笔记(运维实战向)
笔记·学习·安全
wanhengidc13 小时前
云手机会占用本地手机内存吗?
运维·服务器·网络·安全·智能手机
zzz1006618 小时前
CentOS 7 服务器初始化:从 0 到 1 的安全高效配置指南
服务器·安全·centos
绿算技术20 小时前
绿算技术解密金融科技安全:高性能计算与存储驱动金融防火墙新时代
科技·安全·金融
m0_738120721 天前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
WayneJoon.H1 天前
CTFSHOW | 其他篇题解(一)web396-web416
sql·安全·web安全·网络安全·php
cdprinter1 天前
安全、高效、可靠的物理隔离网络安全专用设备———信刻光盘安全隔离与文件单向导入系统!
网络·安全·web安全