当前位置：首页 > web >正文

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

web 2025/8/6 3:14:58

一、点击劫持的原理

点击劫持（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）的页面嵌入（注意：部分现代浏览器已不支持此值）

使用示例：
后端在响应头中添加：

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）。

使用示例：
后端设置响应头：

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 为例，安全配置如下：

<!-- 嵌入第三方 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）和内容，防止恶意数据注入。

// 父页面接收 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 被替换为恶意来源。