XSS过滤器绕过技术

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

↑

# XSS过滤器绕过技术

## XSS过滤器概述

XSS过滤器是Web应用程序防御XSS攻击的重要组成部分。然而，攻击者经常能找到绕过这些过滤器的方法。本文将详细介绍常见的XSS过滤器绕过技术，以及如何构建更强大的防御机制。

## 常见过滤器绕过技术

### 1. HTML编码绕过

```javascript
// 不安全的过滤实现
class BasicFilter {
    static sanitize(input) {
        // 简单替换尖括号
        return input
            .replace(/</g, '<')
            .replace(/>/g, '>');
    }
}

// 攻击者可以使用以下方式绕过：
/*
1. 使用HTML实体编码
<script>alert(1)</script>

2. 使用Unicode编码
\u003cscript\u003ealert(1)\u003c/script\u003e

3. 使用URL编码
%3Cscript%3Ealert(1)%3C/script%3E
*/

// 安全的实现
class SecureFilter {
    static sanitize(input) {
        // 使用DOMPurify进行全面过滤
        return DOMPurify.sanitize(input, {
            ALLOWED_TAGS: [],
            ALLOWED_ATTR: [],
            ALLOW_DATA_ATTR: false,
            USE_PROFILES: { html: false }
        });
    }
}
```

### 2. 属性注入绕过

```javascript
// 不安全的属性过滤
class AttributeFilter {
    static sanitizeAttr(value) {
        // 仅过滤常见的JavaScript伪协议
        return value.replace(/^javascript:/i, '');
    }
    
    static createLink(url) {
        return `<a href="${this.sanitizeAttr(url)}">Link</a>`;
    }
}

// 攻击者可以使用以下方式绕过：
/*
1. 使用data协议
href="data:text/html,<script>alert(1)</script>"

2. 使用base64编码
href="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg=="

3. 使用vbscript协议（在旧版IE中）
href="vbscript:msgbox(1)"
*/

// 安全的实现
class SecureAttributeFilter {
    constructor() {
        this.allowedProtocols = new Set([
            'http:', 'https:', 'mailto:', 'tel:'
        ]);
    }
    
    sanitizeAttr(value) {
        try {
            const url = new URL(value);
            if (!this.allowedProtocols.has(url.protocol)) {
                return '#';
            }
            return url.toString();
        } catch {
            return '#';
        }
    }
}
```

### 3. 事件处理器绕过

```javascript
// 不安全的事件处理器过滤
class EventFilter {
    static sanitizeHandler(handler) {
        // 简单移除alert和eval
        return handler
            .replace(/alert\s*\(/g, '')
            .replace(/eval\s*\(/g, '');
    }
    
    static createButton(onclick) {
        return `
            <button onclick="${this.sanitizeHandler(onclick)}">
                Click me
            </button>
        `;
    }
}

// 攻击者可以使用以下方式绕过：
/*
1. 使用其他危险函数
onclick="Function('alert(1)')()"

2. 使用字符串拼接
onclick="'al'+'ert(1)'"

3. 使用编码函数
onclick="String.fromCharCode(97,108,101,114,116,40,49,41)"
*/

// 安全的实现
class SecureEventFilter {
    constructor() {
        this.allowedHandlers = new Set([
            'handleClick',
            'handleSubmit',
            'validateForm'
        ]);
    }
    
    sanitizeHandler(handler) {
        // 只允许调用预定义的处理函数
        if (!this.allowedHandlers.has(handler)) {
            return 'void(0)';
        }
        return handler;
    }
}
```

### 4. 标签过滤绕过

```javascript
// 不安全的标签过滤
class TagFilter {
    static sanitize(html) {
        // 移除script标签
        return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
    }
}

// 攻击者可以使用以下方式绕过：
/*
1. 使用其他危险标签
<img src="x" onerror="alert(1)">
<iframe src="javascript:alert(1)">
<svg onload="alert(1)">

2. 使用大小写混合
<ScRiPt>alert(1)</ScRiPt>

3. 使用注释拆分
<script>alert(1)</script>
*/

// 安全的实现
class SecureTagFilter {
    constructor() {
        this.config = {
            ALLOWED_TAGS: [
                'p', 'b', 'i', 'em', 'strong',
                'a', 'ul', 'li', 'br'
            ],
            ALLOWED_ATTR: ['href', 'title', 'class'],
            ALLOW_DATA_ATTR: false,
            ALLOW_UNKNOWN_PROTOCOLS: false,
            SAFE_FOR_TEMPLATES: true
        };
    }
    
    sanitize(html) {
        return DOMPurify.sanitize(html, this.config);
    }
}
```

## 高级绕过技术

### 1. 模板注入绕过

```javascript
// 不安全的模板实现
class TemplateEngine {
    constructor() {
        this.templates = {};
    }
    
    // 不安全：直接执行模板字符串
    compile(template) {
        return new Function('data',
            `return \`${template}\`;`
        );
    }
    
    render(template, data) {
        const compiled = this.compile(template);
        return compiled(data);
    }
}

// 攻击者可以使用以下方式绕过：
/*
1. 模板字符串注入
${alert(1)}

2. 上下文逃逸
${process.env.SECRET}

3. 原型链污染
${constructor.constructor('alert(1)')()}
*/

// 安全的实现
class SecureTemplateEngine {
    constructor() {
        this.engine = Handlebars;
        this.registerHelpers();
    }
    
    registerHelpers() {
        // 注册安全的辅助函数
        Handlebars.registerHelper('escape', (text) => {
            return new Handlebars.SafeString(
                DOMPurify.sanitize(text)
            );
        });
    }
    
    compile(template) {
        // 预编译模板
        return Handlebars.compile(template);
    }
    
    render(template, data) {
        const compiled = this.compile(template);
        return compiled(data);
    }
}
```

### 2. DOM Clobbering绕过

```javascript
// 容易受到DOM Clobbering攻击的代码
class ConfigManager {
    constructor() {
        // 不安全：直接使用DOM属性
        this.config = window.config || {};
    }
    
    getConfig(key) {
        return this.config[key];
    }
}

// 攻击者可以通过以下HTML覆盖config属性：
/*
<form id="config">
    <input name="admin" value="true">
</form>
*/

// 安全的实现
class SecureConfigManager {
    constructor() {
        // 使用Symbol作为私有属性
        this.configKey = Symbol('config');
        this[this.configKey] = Object.create(null);
    }
    
    setConfig(key, value) {
        // 验证配置值
        if (this.validateConfig(key, value)) {
            this[this.configKey][key] = value;
        }
    }
    
    getConfig(key) {
        return this[this.configKey][key];
    }
    
    validateConfig(key, value) {
        // 实现配置验证逻辑
        return true;
    }
}
```

## 防护措施

### 1. 输入验证

```javascript
// 输入验证工具
class InputValidator {
    constructor() {
        this.validators = new Map();
        this.initializeValidators();
    }
    
    initializeValidators() {
        // 注册常用验证器
        this.validators.set('text', (input) => {
            return typeof input === 'string' &&
                input.length <= 1000;
        });
        
        this.validators.set('url', (input) => {
            try {
                new URL(input);
                return true;
            } catch {
                return false;
            }
        });
        
        this.validators.set('email', (input) => {
            return /^[^@]+@[^@]+\.[^@]+$/.test(input);
        });
    }
    
    validate(input, type) {
        const validator = this.validators.get(type);
        if (!validator) {
            throw new Error(`Unknown validator: ${type}`);
        }
        return validator(input);
    }
}
```

### 2. 输出编码

```javascript
// 输出编码工具
class OutputEncoder {
    static encodeHTML(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    static encodeAttribute(text) {
        return text
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '<')
            .replace(/>/g, '>')
            .replace(/&/g, '&');
    }
    
    static encodeJavaScript(text) {
        return JSON.stringify(text);
    }
    
    static encodeURL(text) {
        return encodeURIComponent(text);
    }
}
```

### 3. CSP配置

```javascript
// CSP配置生成器
class CSPGenerator {
    constructor() {
        this.policies = new Map();
        this.initializeDefaultPolicies();
    }
    
    initializeDefaultPolicies() {
        // 设置默认策略
        this.policies.set('default-src', ["'self'"]);
        this.policies.set('script-src', [
            "'self'",
            "'strict-dynamic'",
            "'nonce-${this.generateNonce()}'"
        ]);
        this.policies.set('style-src', ["'self'"]);
        this.policies.set('img-src', ["'self'", 'data:']);
        this.policies.set('connect-src', ["'self'"]);
        this.policies.set('frame-src', ["'none'"]);
        this.policies.set('object-src', ["'none'"]);
    }
    
    generateNonce() {
        return crypto.getRandomValues(
            new Uint8Array(16)
        ).join('');
    }
    
    addPolicy(directive, source) {
        const sources = this.policies.get(directive) || [];
        sources.push(source);
        this.policies.set(directive, sources);
    }
    
    generateHeader() {
        const policies = [];
        
        for (let [directive, sources] of this.policies) {
            policies.push(
                `${directive} ${sources.join(' ')}`
            );
        }
        
        return policies.join('; ');
    }
}
```

## 最佳实践

1. 输入处理
   - 实施严格的输入验证
   - 使用白名单而不是黑名单
   - 对不同上下文使用不同的验证规则

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

3. 框架使用
   - 使用现代前端框架的XSS防护
   - 保持框架和依赖包更新
   - 正确配置安全选项

4. 安全配置
   - 实施严格的CSP策略
   - 启用浏览器XSS过滤器
   - 使用安全的Cookie设置

## 总结

XSS过滤器绕过是一个持续演进的领域，需要多层防护：

1. 代码层面
   - 使用安全的API

元素码农