如何防御Basic Clickjacking攻击：CSRF Token保护的实战指南

1次阅读

共计 2598 个字符，预计需要花费 7 分钟才能阅读完成。

Clickjacking（点击劫持）是一种欺骗用户点击他们看不见或不知情的 UI 元素的攻击方式。攻击者通过 iframe 将目标网站嵌入自己的恶意页面，并设置透明度为 0 或将其隐藏在诱饵按钮下方。当用户点击看似无害的按钮时，实际上触发了目标网站的关键操作。

即使系统部署了 CSRF Token 保护，Clickjacking 仍然构成严重威胁，因为：

CSRF Token 验证的是请求的合法性而非用户意图
用户是在 ” 自愿 ” 情况下触发的操作
浏览器会自动携带 Cookie 和 Session 信息

常见的 Clickjacking 防御方法各有缺陷：

X-Frame-Options
只能设置 DENY 或 SAMEORIGIN
不支持精细化的域名白名单控制
逐渐被 CSP 取代
Content-Security-Policy
需要现代浏览器支持
配置复杂容易出错
旧版浏览器兼容性问题
JavaScript 防御脚本
可以被攻击者绕过
依赖客户端执行环境
可能被浏览器插件禁用

我们推荐的分层防御体系包含以下组件：

add_header X-Frame-Options "DENY";

add_header Content-Security-Policy "frame-ancestors'self';";

// 检测页面是否被 iframe 嵌套
if (window !== window.top || window.location !== window.parent.location) {
  document.body.style.display = 'none';
  throw new Error('Clickjacking protection triggered');
}

// 动态调整关键操作按钮的可见性
const protectButtons = () => {const sensitiveButtons = document.querySelectorAll('[data-sensitive-action]');
  sensitiveButtons.forEach(btn => {
    btn.style.opacity = window === window.top ? '1' : '0';
    btn.style.pointerEvents = window === window.top ? 'auto' : 'none';
  });
};

// 初始化和持续监控
protectButtons();
setInterval(protectButtons, 500);

对于敏感操作（如转账、删除），应增加：

视觉验证码
密码重新输入
操作延迟执行

const express = require('express');
const helmet = require('helmet');

const app = express();

// 安全中间件
app.use(helmet.frameguard({ action: 'deny'}));
app.use((req, res, next) => {res.header('Content-Security-Policy', "frame-ancestors'self'");
  next();});

// 敏感操作接口
app.post('/transfer', (req, res) => {
  // CSRF Token 验证
  if (!validateCsrfToken(req)) {return res.status(403).send('Invalid CSRF token');
  }

  // Clickjacking 头部检查
  if (req.get('Sec-Fetch-Dest') === 'iframe') {return res.status(403).send('Frame embedding not allowed');
  }

  // 业务逻辑处理
  processTransfer(req.body);
  res.send('Transfer completed');
});

import {useEffect} from 'react';

const ProtectedButton = ({action, children}) => {useEffect(() => {const checkFrame = () => {if (window !== window.top) {document.body.innerHTML = '<h1>Security Alert: Clickjacking Detected</h1>';}
    };

    checkFrame();
    window.addEventListener('resize', checkFrame);
    return () => window.removeEventListener('resize', checkFrame);
  }, []);

  return (
    <button 
      data-sensitive-action={action}
      style={{
        opacity: window === window.top ? 1 : 0,
        pointerEvents: window === window.top ? 'auto' : 'none'
      }}
    >
      {children}
    </button>
  );
};