JavaScript系列（26）--安全编程实践详解

JavaScript安全编程实践详解 🔒

今天，让我们深入探讨JavaScript的安全编程实践。在当今的网络环境中，安全性已经成为开发者必须重点关注的领域。

安全编程基础 🌟

💡 小知识：JavaScript安全编程涉及多个方面，包括XSS防护、CSRF防御、输入验证、安全存储、安全通信等。通过采用正确的安全实践，我们可以有效防范常见的安全威胁。

XSS防护实践 🛡️

// 1. HTML转义工具
class HTMLEscaper {
    static escapeMap = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#x27;',
        '/': '&#x2F;'
    };
    
    static escape(str) {
        return str.replace(/[&<>"'/]/g, char => this.escapeMap[char]);
    }
    
    static createSafeHTML(unsafeHTML) {
        const div = document.createElement('div');
        div.textContent = unsafeHTML;
        return div.innerHTML;
    }
}

// 2. XSS防护包装器
class XSSProtector {
    constructor() {
        this.sanitizer = new DOMPurify();
    }
    
    // 安全地设置HTML内容
    setHTML(element, content) {
        element.innerHTML = this.sanitizer.sanitize(content, {
            ALLOWED_TAGS: ['p', 'span', 'b', 'i', 'em', 'strong'],
            ALLOWED_ATTR: ['class', 'id']
        });
    }
    
    // 安全地渲染用户输入
    renderUserContent(content) {
        return this.sanitizer.sanitize(content, {
            RETURN_DOM: true,
            RETURN_DOM_FRAGMENT: true
        });
    }
    
    // URL参数安全检查
    validateURL(url) {
        try {
            const parsedURL = new URL(url);
            return parsedURL.protocol === 'https:' || 
                   parsedURL.protocol === 'http:';
        } catch {
            return false;
        }
    }
}

CSRF防护机制 🔐

// 1. CSRF Token管理器
class CSRFTokenManager {
    constructor() {
        this.tokenName = 'csrf-token';
        this.token = this.generateToken();
    }
    
    generateToken() {
        return Array.from(
            crypto.getRandomValues(new Uint8Array(32)),
            byte => byte.toString(16).padStart(2, '0')
        ).join('');
    }
    
    // 为请求添加CSRF Token
    addTokenToRequest(request) {
        if (request instanceof Headers) {
            request.append(this.tokenName, this.token);
        } else if (request instanceof FormData) {
            request.append(this.tokenName, this.token);
        } else if (typeof request === 'object') {
            request[this.tokenName] = this.token;
        }
        return request;
    }
    
    // 验证CSRF Token
    validateToken(token) {
        return token === this.token;
    }
}

// 2. 安全请求包装器
class SecureRequestWrapper {
    constructor(csrfManager) {
        this.csrfManager = csrfManager;
    }
    
    async fetch(url, options = {}) {
        // 添加CSRF Token
        const headers = new Headers(options.headers);
        this.csrfManager.addTokenToRequest(headers);
        
        // 添加安全头部
        headers.append('X-Content-Type-Options', 'nosniff');
        headers.append('X-Frame-Options', 'DENY');
        
        const response = await fetch(url, {
            ...options,
            headers,
            credentials: 'same-origin'
        });
        
        return response;
    }
}

输入验证与清理 🧹

// 1. 输入验证器
class InputValidator {
    // 通用验证规则
    static rules = {
        email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        phone: /^\+?[\d\s-]{10,}$/,
        url: /^https?:\/\/[\w\-\.]+(:\d+)?\/?\S*$/,
        username: /^[\w\-]{3,16}$/,
        password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
    };
    
    static validate(value, type) {
        if (!this.rules[type]) {
            throw new Error(`Unknown validation type: ${type}`);
        }
        return this.rules[type].test(value);
    }
    
    // SQL注入检测
    static checkSQLInjection(value) {
        const sqlPatterns = [
            /(\s|^)(SELECT|INSERT|UPDATE|DELETE|DROP|UNION|ALTER)(\s|$)/i,
            /'.*?'|\s+OR\s+'.*?'/i,
            /--|\#|\/\*/
        ];
        
        return !sqlPatterns.some(pattern => pattern.test(value));
    }
    
    // 命令注入检测
    static checkCommandInjection(value) {
        const cmdPatterns = [
            /[;&|`]/,
            /\$\([^)]*\)/,
            /\${[^}]*}/
        ];
        
        return !cmdPatterns.some(pattern => pattern.test(value));
    }
}

// 2. 输入清理器
class InputSanitizer {
    // HTML特殊字符转义
    static escapeHTML(input) {
        return input.replace(/[&<>"']/g, char => ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        })[char]);
    }
    
    // 移除危险字符
    static removeDangerousChars(input) {
        return input.replace(/[<>'"();]/g, '');
    }
    
    // 规范化输入
    static normalize(input) {
        return input
            .trim()
            .normalize('NFKC')
            .replace(/\s+/g, ' ');
    }
}

安全存储实践 🗄️

// 1. 安全存储管理器
class SecureStorageManager {
    constructor(storage = localStorage) {
        this.storage = storage;
        this.encryptionKey = this.getOrCreateKey();
    }
    
    // 获取或创建加密密钥
    getOrCreateKey() {
        let key = this.storage.getItem('encryption_key');
        if (!key) {
            key = crypto.getRandomValues(new Uint8Array(32));
            this.storage.setItem('encryption_key', key);
        }
        return key;
    }
    
    // 加密数据
    async encrypt(data) {
        const encoder = new TextEncoder();
        const dataBuffer = encoder.encode(JSON.stringify(data));
        
        const iv = crypto.getRandomValues(new Uint8Array(12));
        const key = await crypto.subtle.importKey(
            'raw',
            this.encryptionKey,
            'AES-GCM',
            false,
            ['encrypt']
        );
        
        const encryptedData = await crypto.subtle.encrypt(
            {
                name: 'AES-GCM',
                iv
            },
            key,
            dataBuffer
        );
        
        return {
            data: Array.from(new Uint8Array(encryptedData)),
            iv: Array.from(iv)
        };
    }
    
    // 解密数据
    async decrypt(encryptedData) {
        const key = await crypto.subtle.importKey(
            'raw',
            this.encryptionKey,
            'AES-GCM',
            false,
            ['decrypt']
        );
        
        const decryptedData = await crypto.subtle.decrypt(
            {
                name: 'AES-GCM',
                iv: new Uint8Array(encryptedData.iv)
            },
            key,
            new Uint8Array(encryptedData.data)
        );
        
        const decoder = new TextDecoder();
        return JSON.parse(decoder.decode(decryptedData));
    }
}

// 2. 敏感数据处理器
class SensitiveDataHandler {
    // 掩码处理
    static mask(value, start = 0, end) {
        const str = String(value);
        const maskLength = end ? end - start : str.length - start;
        const maskStr = '*'.repeat(maskLength);
        return str.slice(0, start) + maskStr + str.slice(start + maskLength);
    }
    
    // 数据脱敏
    static desensitize(data, rules) {
        const result = { ...data };
        
        for (const [key, rule] of Object.entries(rules)) {
            if (result[key]) {
                result[key] = this.mask(
                    result[key],
                    rule.start,
                    rule.end
                );
            }
        }
        
        return result;
    }
}

安全通信实践 📡

// 1. 安全WebSocket
class SecureWebSocket {
    constructor(url, options = {}) {
        this.url = url;
        this.options = options;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = options.maxReconnectAttempts || 5;
        this.init();
    }
    
    init() {
        this.ws = new WebSocket(this.url);
        this.setupEventHandlers();
    }
    
    setupEventHandlers() {
        this.ws.onopen = () => {
            this.reconnectAttempts = 0;
            if (this.options.onOpen) {
                this.options.onOpen();
            }
        };
        
        this.ws.onclose = () => {
            if (this.reconnectAttempts < this.maxReconnectAttempts) {
                setTimeout(() => {
                    this.reconnectAttempts++;
                    this.init();
                }, 1000 * Math.pow(2, this.reconnectAttempts));
            }
        };
        
        this.ws.onmessage = async (event) => {
            try {
                const data = JSON.parse(event.data);
                if (this.options.onMessage) {
                    this.options.onMessage(data);
                }
            } catch (error) {
                console.error('Invalid message format:', error);
            }
        };
    }
    
    send(data) {
        if (this.ws.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify(data));
        }
    }
    
    close() {
        this.ws.close();
    }
}

// 2. 安全HTTP客户端
class SecureHTTPClient {
    constructor(baseURL) {
        this.baseURL = baseURL;
        this.interceptors = [];
    }
    
    // 添加请求拦截器
    addInterceptor(interceptor) {
        this.interceptors.push(interceptor);
    }
    
    // 应用拦截器
    async applyInterceptors(config) {
        let currentConfig = { ...config };
        
        for (const interceptor of this.interceptors) {
            currentConfig = await interceptor(currentConfig);
        }
        
        return currentConfig;
    }
    
    // 发送请求
    async request(config) {
        const finalConfig = await this.applyInterceptors({
            ...config,
            headers: {
                'Content-Type': 'application/json',
                ...config.headers
            }
        });
        
        try {
            const response = await fetch(
                this.baseURL + finalConfig.url,
                finalConfig
            );
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('Request failed:', error);
            throw error;
        }
    }
}

最佳实践建议 💡

安全检查工具

// 1. 安全检查器
class SecurityChecker {
    // 检查安全头部
    static checkSecurityHeaders(response) {
        const requiredHeaders = {
            'Content-Security-Policy': true,
            'X-Content-Type-Options': 'nosniff',
            'X-Frame-Options': ['DENY', 'SAMEORIGIN'],
            'X-XSS-Protection': '1; mode=block',
            'Strict-Transport-Security': true
        };
        
        const issues = [];
        
        for (const [header, value] of Object.entries(requiredHeaders)) {
            const actualValue = response.headers.get(header);
            
            if (!actualValue) {
                issues.push(`Missing ${header}`);
            } else if (value !== true) {
                if (Array.isArray(value)) {
                    if (!value.includes(actualValue)) {
                        issues.push(
                            `Invalid ${header}: ${actualValue}`
                        );
                    }
                } else if (value !== actualValue) {
                    issues.push(
                        `Invalid ${header}: ${actualValue}`
                    );
                }
            }
        }
        
        return issues;
    }
    
    // 检查安全配置
    static checkSecurityConfig() {
        const issues = [];
        
        // 检查HTTPS
        if (window.location.protocol !== 'https:') {
            issues.push('Not using HTTPS');
        }
        
        // 检查Cookies配置
        document.cookie.split(';').forEach(cookie => {
            if (!cookie.includes('Secure')) {
                issues.push('Cookie without Secure flag');
            }
            if (!cookie.includes('HttpOnly')) {
                issues.push('Cookie without HttpOnly flag');
            }
            if (!cookie.includes('SameSite')) {
                issues.push('Cookie without SameSite attribute');
            }
        });
        
        return issues;
    }
}

// 2. 安全审计工具
class SecurityAuditor {
    constructor() {
        this.vulnerabilities = [];
    }
    
    // 检查DOM XSS漏洞
    checkDOMXSS() {
        const dangerousProps = [
            'innerHTML',
            'outerHTML',
            'insertAdjacentHTML',
            'document.write'
        ];
        
        const scripts = document.getElementsByTagName('script');
        for (const script of scripts) {
            const content = script.textContent;
            dangerousProps.forEach(prop => {
                if (content.includes(prop)) {
                    this.vulnerabilities.push({
                        type: 'DOM XSS',
                        location: script.src || 'inline script',
                        description: `Using dangerous property: ${prop}`
                    });
                }
            });
        }
    }
    
    // 检查不安全的配置
    checkInsecureConfigs() {
        // 检查eval使用
        if (window.eval) {
            this.vulnerabilities.push({
                type: 'Insecure Config',
                description: 'eval is enabled'
            });
        }
        
        // 检查内联事件处理器
        document.querySelectorAll('*').forEach(element => {
            for (const attr of element.attributes) {
                if (attr.name.startsWith('on')) {
                    this.vulnerabilities.push({
                        type: 'Insecure Config',
                        description: `Inline event handler: ${attr.name}`,
                        element: element.tagName
                    });
                }
            }
        });
    }
    
    // 生成审计报告
    generateReport() {
        return {
            timestamp: new Date().toISOString(),
            vulnerabilities: this.vulnerabilities,
            summary: {
                total: this.vulnerabilities.length,
                byType: this.vulnerabilities.reduce((acc, vuln) => {
                    acc[vuln.type] = (acc[vuln.type] || 0) + 1;
                    return acc;
                }, {})
            }
        };
    }
}