前端安全防护深度实践：从XSS到CSRF的完整安全解决方案

在数字化时代，前端安全已成为Web应用的生命线。本文将深入探讨现代前端安全防护体系，从XSS、CSRF等经典攻击到现代安全威胁，提供完整的防护解决方案和最佳实践。

1. 前端安全概述

1.1 安全威胁分析

前端安全面临的主要威胁包括：

• XSS攻击：跨站脚本攻击，注入恶意脚本
• CSRF攻击：跨站请求伪造，利用用户身份执行恶意操作
• 点击劫持：通过透明iframe诱导用户点击
• 数据泄露：敏感信息暴露和传输安全
• 依赖安全：第三方库和组件的安全漏洞
• 内容安全：恶意内容注入和篡改

1.2 安全防护架构

// 前端安全管理器
class FrontendSecurityManager {
  constructor(config = {}) {
    this.config = {
      enableXSSProtection: true,
      enableCSRFProtection: true,
      enableClickjackingProtection: true,
      enableContentSecurityPolicy: true,
      enableInputValidation: true,
      enableSecureStorage: true,
      enableSecureCommunication: true,
      enableDependencyScanning: true,
      ...config
    };
    
    this.protectionModules = new Map();
    this.securityEvents = [];
    this.threatDetectors = new Map();
    this.securityPolicies = new Map();
    
    this.init();
  }
  
  // 初始化安全模块
  init() {
    if (this.config.enableXSSProtection) {
      this.protectionModules.set('xss', new XSSProtection());
    }
    
    if (this.config.enableCSRFProtection) {
      this.protectionModules.set('csrf', new CSRFProtection());
    }
    
    if (this.config.enableClickjackingProtection) {
      this.protectionModules.set('clickjacking', new ClickjackingProtection());
    }
    
    if (this.config.enableContentSecurityPolicy) {
      this.protectionModules.set('csp', new ContentSecurityPolicy());
    }
    
    if (this.config.enableInputValidation) {
      this.protectionModules.set('input', new InputValidation());
    }
    
    if (this.config.enableSecureStorage) {
      this.protectionModules.set('storage', new SecureStorage());
    }
    
    if (this.config.enableSecureCommunication) {
      this.protectionModules.set('communication', new SecureCommunication());
    }
    
    if (this.config.enableDependencyScanning) {
      this.protectionModules.set('dependency', new DependencyScanner());
    }
    
    this.setupGlobalProtection();
    this.startThreatMonitoring();
  }
  
  // 设置全局保护
  setupGlobalProtection() {
    // 设置全局错误处理
    window.addEventListener('error', (event) => {
      this.handleSecurityEvent({
        type: 'error',
        message: event.message,
        source: event.filename,
        line: event.lineno,
        column: event.colno,
        timestamp: Date.now()
      });
    });
    
    // 设置CSP违规处理
    document.addEventListener('securitypolicyviolation', (event) => {
      this.handleSecurityEvent({
        type: 'csp_violation',
        violatedDirective: event.violatedDirective,
        blockedURI: event.blockedURI,
        documentURI: event.documentURI,
        timestamp: Date.now()
      });
    });
    
    // 监控DOM变化
    if (typeof MutationObserver !== 'undefined') {
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          this.scanDOMChanges(mutation);
        });
      });
      
      observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['src', 'href', 'onclick', 'onload']
      });
    }
  }
  
  // 启动威胁监控
  startThreatMonitoring() {
    // 定期扫描威胁
    setInterval(() => {
      this.performSecurityScan();
    }, 30000); // 每30秒扫描一次
    
    // 监控网络请求
    this.interceptNetworkRequests();
    
    // 监控用户行为
    this.monitorUserBehavior();
  }
  
  // 处理安全事件
  handleSecurityEvent(event) {
    this.securityEvents.push(event);
    
    // 触发相应的保护模块
    this.protectionModules.forEach((module, type) => {
      if (module.canHandle && module.canHandle(event)) {
        module.handle(event);
      }
    });
    
    // 发送安全报告
    this.reportSecurityEvent(event);
    
    // 检查是否需要紧急响应
    if (this.isHighRiskEvent(event)) {
      this.triggerEmergencyResponse(event);
    }
  }
  
  // 扫描DOM变化
  scanDOMChanges(mutation) {
    const xssProtection = this.protectionModules.get('xss');
    if (xssProtection) {
      xssProtection.scanMutation(mutation);
    }
  }
  
  // 执行安全扫描
  performSecurityScan() {
    const scanResults = {};
    
    this.protectionModules.forEach((module, type) => {
      if (module.scan) {
        scanResults[type] = module.scan();
      }
    });
    
    return scanResults;
  }
  
  // 拦截网络请求
  interceptNetworkRequests() {
    const originalFetch = window.fetch;
    const originalXHR = window.XMLHttpRequest;
    
    // 拦截fetch请求
    window.fetch = async (...args) => {
      const [url, options] = args;
      
      // CSRF保护
      const csrfProtection = this.protectionModules.get('csrf');
      if (csrfProtection) {
        args[1] = csrfProtection.protectRequest(url, options);
      }
      
      // 安全通信保护
      const secureComm = this.protectionModules.get('communication');
      if (secureComm) {
        args[1] = secureComm.protectRequest(url, args[1]);
      }
      
      try {
        const response = await originalFetch.apply(this, args);
        
        // 检查响应安全性
        this.validateResponse(response);
        
        return response;
      } catch (error) {
        this.handleSecurityEvent({
          type: 'network_error',
          url,
          error: error.message,
          timestamp: Date.now()
        });
        throw error;
      }
    };
    
    // 拦截XMLHttpRequest
    window.XMLHttpRequest = function() {
      const xhr = new originalXHR();
      const originalOpen = xhr.open;
      const originalSend = xhr.send;
      
      xhr.open = function(method, url, ...args) {
        this._url = url;
        this._method = method;
        return originalOpen.apply(this, [method, url, ...args]);
      };
      
      xhr.send = function(data) {
        // CSRF保护
        const csrfProtection = this.protectionModules.get('csrf');
        if (csrfProtection) {
          csrfProtection.protectXHR(this);
        }
        
        return originalSend.apply(this, [data]);
      }.bind(this);
      
      return xhr;
    }.bind(this);
  }
  
  // 监控用户行为
  monitorUserBehavior() {
    let clickCount = 0;
    let lastClickTime = 0;
    
    document.addEventListener('click', (event) => {
      const currentTime = Date.now();
      
      // 检测异常点击行为
      if (currentTime - lastClickTime < 100) {
        clickCount++;
        if (clickCount > 10) {
          this.handleSecurityEvent({
            type: 'suspicious_clicking',
            element: event.target.tagName,
            timestamp: currentTime
          });
          clickCount = 0;
        }
      } else {
        clickCount = 0;
      }
      
      lastClickTime = currentTime;
      
      // 检查点击劫持
      const clickjackingProtection = this.protectionModules.get('clickjacking');
      if (clickjackingProtection) {
        clickjackingProtection.validateClick(event);
      }
    });
  }
  
  // 验证响应安全性
  validateResponse(response) {
    // 检查响应头
    const securityHeaders = [
      'x-frame-options',
      'x-content-type-options',
      'x-xss-protection',
      'strict-transport-security',
      'content-security-policy'
    ];
    
    const missingHeaders = securityHeaders.filter(header => 
      !response.headers.has(header)
    );
    
    if (missingHeaders.length > 0) {
      this.handleSecurityEvent({
        type: 'missing_security_headers',
        headers: missingHeaders,
        url: response.url,
        timestamp: Date.now()
      });
    }
  }
  
  // 判断是否为高风险事件
  isHighRiskEvent(event) {
    const highRiskTypes = [
      'xss_detected',
      'csrf_attack',
      'clickjacking_attempt',
      'data_exfiltration',
      'malicious_script'
    ];
    
    return highRiskTypes.includes(event.type);
  }
  
  // 触发紧急响应
  triggerEmergencyResponse(event) {
    console.warn('🚨 Security Alert:', event);
    
    // 可以在这里实现更多紧急响应措施
    // 例如：禁用某些功能、清除敏感数据、通知服务器等
    
    if (event.type === 'xss_detected') {
      // 清理可能的XSS内容
      this.protectionModules.get('xss')?.emergencyCleanup();
    }
    
    if (event.type === 'data_exfiltration') {
      // 阻止数据传输
      this.blockDataTransmission();
    }
  }
  
  // 阻止数据传输
  blockDataTransmission() {
    // 临时禁用网络请求
    const originalFetch = window.fetch;
    window.fetch = () => Promise.reject(new Error('Data transmission blocked for security'));
    
    // 5分钟后恢复
    setTimeout(() => {
      window.fetch = originalFetch;
    }, 5 * 60 * 1000);
  }
  
  // 报告安全事件
  reportSecurityEvent(event) {
    // 发送到安全监控服务
    if (typeof navigator.sendBeacon === 'function') {
      const data = JSON.stringify({
        event,
        userAgent: navigator.userAgent,
        url: window.location.href,
        timestamp: Date.now()
      });
      
      navigator.sendBeacon('/api/security/report', data);
    }
  }
  
  // 获取安全状态
  getSecurityStatus() {
    const status = {
      protectionModules: {},
      recentEvents: this.securityEvents.slice(-10),
      threatLevel: this.calculateThreatLevel(),
      lastScan: this.lastScanTime
    };
    
    this.protectionModules.forEach((module, type) => {
      status.protectionModules[type] = {
        enabled: true,
        status: module.getStatus ? module.getStatus() : 'active',
        lastUpdate: module.lastUpdate || Date.now()
      };
    });
    
    return status;
  }
  
  // 计算威胁等级
  calculateThreatLevel() {
    const recentEvents = this.securityEvents.filter(
      event => Date.now() - event.timestamp < 3600000 // 最近1小时
    );
    
    const highRiskEvents = recentEvents.filter(event => 
      this.isHighRiskEvent(event)
    ).length;
    
    if (highRiskEvents > 5) return 'critical';
    if (highRiskEvents > 2) return 'high';
    if (recentEvents.length > 10) return 'medium';
    return 'low';
  }
  
  // 更新安全配置
  updateConfig(newConfig) {
    this.config = { ...this.config, ...newConfig };
    
    // 重新初始化受影响的模块
    Object.keys(newConfig).forEach(key => {
      if (key.startsWith('enable')) {
        const moduleName = key.replace('enable', '').replace('Protection', '').toLowerCase();
        
        if (newConfig[key] && !this.protectionModules.has(moduleName)) {
          // 启用模块
          this.enableProtectionModule(moduleName);
        } else if (!newConfig[key] && this.protectionModules.has(moduleName)) {
          // 禁用模块
          this.disableProtectionModule(moduleName);
        }
      }
    });
  }
  
  // 启用保护模块
  enableProtectionModule(moduleName) {
    switch (moduleName) {
      case 'xss':
        this.protectionModules.set('xss', new XSSProtection());
        break;
      case 'csrf':
        this.protectionModules.set('csrf', new CSRFProtection());
        break;
      // ... 其他模块
    }
  }
  
  // 禁用保护模块
  disableProtectionModule(moduleName) {
    const module = this.protectionModules.get(moduleName);
    if (module && module.cleanup) {
      module.cleanup();
    }
    this.protectionModules.delete(moduleName);
  }
}

2. XSS防护深度实践

2.1 XSS攻击类型与检测

// XSS保护模块
class XSSProtection {
  constructor(config = {}) {
    this.config = {
      enableReflectedXSSProtection: true,
      enableStoredXSSProtection: true,
      enableDOMXSSProtection: true,
      enableContentSanitization: true,
      enableInputValidation: true,
      strictMode: false,
      ...config
    };
    
    this.xssPatterns = this.initializeXSSPatterns();
    this.sanitizer = new DOMPurify();
    this.detectedThreats = [];
    this.whitelist = new Set();
    this.blacklist = new Set();
    
    this.init();
  }
  
  // 初始化XSS检测模式
  initializeXSSPatterns() {
    return {
      // 脚本标签模式
      scriptTags: [
        /<script[^>]*>.*?<\/script>/gi,
        /<script[^>]*>/gi,
        /javascript:/gi,
        /vbscript:/gi
      ],
      
      // 事件处理器模式
      eventHandlers: [
        /on\w+\s*=/gi,
        /onclick/gi,
        /onload/gi,
        /onerror/gi,
        /onmouseover/gi
      ],
      
      // 数据URI模式
      dataUris: [
        /data:text\/html/gi,
        /data:application\/javascript/gi,
        /data:text\/javascript/gi
      ],
      
      // 表达式模式
      expressions: [
        /expression\s*\(/gi,
        /eval\s*\(/gi,
        /setTimeout\s*\(/gi,
        /setInterval\s*\(/gi
      ],
      
      // 编码绕过模式
      encodingBypass: [
        /&#x[0-9a-f]+;/gi,
        /&#[0-9]+;/gi,
        /%[0-9a-f]{2}/gi,
        /\\u[0-9a-f]{4}/gi
      ]
    };
  }
  
  // 初始化保护
  init() {
    this.setupInputProtection();
    this.setupOutputProtection();
    this.setupDOMProtection();
    this.setupCSPIntegration();
  }
  
  // 设置输入保护
  setupInputProtection() {
    // 监控表单输入
    document.addEventListener('input', (event) => {
      if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
        this.validateInput(event.target);
      }
    });
    
    // 监控粘贴事件
    document.addEventListener('paste', (event) => {
      const clipboardData = event.clipboardData || window.clipboardData;
      const pastedData = clipboardData.getData('text');
      
      if (this.detectXSS(pastedData)) {
        event.preventDefault();
        this.handleXSSDetection({
          type: 'paste_xss',
          content: pastedData,
          element: event.target
        });
      }
    });
  }
  
  // 设置输出保护
  setupOutputProtection() {
    // 拦截innerHTML设置
    const originalInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
    
    Object.defineProperty(Element.prototype, 'innerHTML', {
      set: function(value) {
        const sanitizedValue = this.sanitizeContent(value);
        return originalInnerHTML.set.call(this, sanitizedValue);
      }.bind(this),
      get: originalInnerHTML.get
    });
    
    // 拦截outerHTML设置
    const originalOuterHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'outerHTML');
    
    Object.defineProperty(Element.prototype, 'outerHTML', {
      set: function(value) {
        const sanitizedValue = this.sanitizeContent(value);
        return originalOuterHTML.set.call(this, sanitizedValue);
      }.bind(this),
      get: originalOuterHTML.get
    });
  }
  
  // 设置DOM保护
  setupDOMProtection() {
    // 监控动态脚本创建
    const originalCreateElement = document.createElement;
    
    document.createElement = function(tagName) {
      const element = originalCreateElement.call(document, tagName);
      
      if (tagName.toLowerCase() === 'script') {
        this.validateScriptElement(element);
      }
      
      return element;
    }.bind(this);
    
    // 监控属性设置
    this.setupAttributeProtection();
  }
  
  // 设置属性保护
  setupAttributeProtection() {
    const dangerousAttributes = ['src', 'href', 'action', 'formaction'];
    
    dangerousAttributes.forEach(attr => {
      this.interceptAttribute(attr);
    });
  }
  
  // 拦截属性设置
  interceptAttribute(attributeName) {
    const originalSetAttribute = Element.prototype.setAttribute;
    
    Element.prototype.setAttribute = function(name, value) {
      if (name.toLowerCase() === attributeName.toLowerCase()) {
        value = this.sanitizeAttributeValue(name, value);
      }
      
      return originalSetAttribute.call(this, name, value);
    }.bind(this);
  }
  
  // 验证输入
  validateInput(element) {
    const value = element.value;
    
    if (this.detectXSS(value)) {
      this.handleXSSDetection({
        type: 'input_xss',
        content: value,
        element: element
      });
      
      // 清理输入
      element.value = this.sanitizeContent(value);
    }
  }
  
  // 检测XSS
  detectXSS(content) {
    if (!content || typeof content !== 'string') {
      return false;
    }
    
    // 检查黑名单
    if (this.blacklist.has(content)) {
      return true;
    }
    
    // 检查白名单
    if (this.whitelist.has(content)) {
      return false;
    }
    
    // 模式匹配检测
    for (const [category, patterns] of Object.entries(this.xssPatterns)) {
      for (const pattern of patterns) {
        if (pattern.test(content)) {
          return true;
        }
      }
    }
    
    // 启发式检测
    return this.heuristicDetection(content);
  }
  
  // 启发式检测
  heuristicDetection(content) {
    const suspiciousIndicators = [
      // 多个连续的特殊字符
      /[<>"'&]{3,}/,
      // 编码后的脚本标签
      /%3Cscript/i,
      // Base64编码的可疑内容
      /data:.*base64.*script/i,
      // 多层编码
      /%25[0-9a-f]{2}/i,
      // 异常的URL协议
      /^(data|javascript|vbscript):/i
    ];
    
    return suspiciousIndicators.some(pattern => pattern.test(content));
  }
  
  // 内容清理
  sanitizeContent(content) {
    if (!content || typeof content !== 'string') {
      return content;
    }
    
    // 使用DOMPurify清理
    if (this.sanitizer && this.sanitizer.sanitize) {
      return this.sanitizer.sanitize(content, {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br', 'span'],
        ALLOWED_ATTR: ['class', 'id'],
        FORBID_SCRIPT: true,
        FORBID_TAGS: ['script', 'object', 'embed', 'link', 'style'],
        FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover']
      });
    }
    
    // 备用清理方法
    return this.basicSanitize(content);
  }
  
  // 基础清理
  basicSanitize(content) {
    return content
      .replace(/<script[^>]*>.*?<\/script>/gi, '')
      .replace(/<script[^>]*>/gi, '')
      .replace(/javascript:/gi, '')
      .replace(/on\w+\s*=/gi, '')
      .replace(/expression\s*\(/gi, '')
      .replace(/eval\s*\(/gi, '');
  }
  
  // 清理属性值
  sanitizeAttributeValue(attributeName, value) {
    if (!value || typeof value !== 'string') {
      return value;
    }
    
    // URL属性特殊处理
    if (['src', 'href', 'action', 'formaction'].includes(attributeName.toLowerCase())) {
      return this.sanitizeURL(value);
    }
    
    return this.sanitizeContent(value);
  }
  
  // URL清理
  sanitizeURL(url) {
    // 检查协议
    const dangerousProtocols = ['javascript:', 'vbscript:', 'data:text/html'];
    
    for (const protocol of dangerousProtocols) {
      if (url.toLowerCase().startsWith(protocol)) {
        return '#';
      }
    }
    
    // 检查编码绕过
    const decodedUrl = decodeURIComponent(url);
    if (this.detectXSS(decodedUrl)) {
      return '#';
    }
    
    return url;
  }
  
  // 验证脚本元素
  validateScriptElement(scriptElement) {
    // 监控src属性设置
    Object.defineProperty(scriptElement, 'src', {
      set: function(value) {
        if (this.isAllowedScript(value)) {
          scriptElement._src = value;
        } else {
          this.handleXSSDetection({
            type: 'malicious_script',
            src: value,
            element: scriptElement
          });
        }
      }.bind(this),
      get: function() {
        return scriptElement._src;
      }
    });
  }
  
  // 检查是否为允许的脚本
  isAllowedScript(src) {
    // 检查白名单域名
    const allowedDomains = [
      'cdn.jsdelivr.net',
      'unpkg.com',
      'cdnjs.cloudflare.com'
    ];
    
    try {
      const url = new URL(src, window.location.origin);
      return allowedDomains.some(domain => url.hostname.endsWith(domain));
    } catch {
      return false;
    }
  }
  
  // 处理XSS检测
  handleXSSDetection(threat) {
    this.detectedThreats.push({
      ...threat,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      url: window.location.href
    });
    
    // 触发安全事件
    const event = new CustomEvent('xss-detected', {
      detail: threat
    });
    document.dispatchEvent(event);
    
    // 记录到控制台
    console.warn('🛡️ XSS Threat Detected:', threat);
    
    // 严格模式下阻止执行
    if (this.config.strictMode) {
      throw new Error('XSS threat detected and blocked');
    }
  }
  
  // 扫描DOM变化
  scanMutation(mutation) {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          this.scanElement(node);
        }
      });
    }
    
    if (mutation.type === 'attributes') {
      this.scanElementAttributes(mutation.target);
    }
  }
  
  // 扫描元素
  scanElement(element) {
    // 检查标签名
    if (element.tagName === 'SCRIPT') {
      this.validateScriptElement(element);
    }
    
    // 检查属性
    this.scanElementAttributes(element);
    
    // 递归检查子元素
    element.querySelectorAll('*').forEach(child => {
      this.scanElementAttributes(child);
    });
  }
  
  // 扫描元素属性
  scanElementAttributes(element) {
    const attributes = element.attributes;
    
    for (let i = 0; i < attributes.length; i++) {
      const attr = attributes[i];
      
      // 检查事件处理器
      if (attr.name.startsWith('on')) {
        this.handleXSSDetection({
          type: 'event_handler_xss',
          attribute: attr.name,
          value: attr.value,
          element: element
        });
        
        element.removeAttribute(attr.name);
      }
      
      // 检查危险属性值
      if (this.detectXSS(attr.value)) {
        this.handleXSSDetection({
          type: 'attribute_xss',
          attribute: attr.name,
          value: attr.value,
          element: element
        });
        
        element.setAttribute(attr.name, this.sanitizeAttributeValue(attr.name, attr.value));
      }
    }
  }
  
  // 紧急清理
  emergencyCleanup() {
    // 移除所有脚本标签
    document.querySelectorAll('script').forEach(script => {
      if (!this.isAllowedScript(script.src)) {
        script.remove();
      }
    });
    
    // 移除所有事件处理器
    document.querySelectorAll('*').forEach(element => {
      const attributes = [...element.attributes];
      attributes.forEach(attr => {
        if (attr.name.startsWith('on')) {
          element.removeAttribute(attr.name);
        }
      });
    });
    
    console.log('🧹 Emergency XSS cleanup completed');
  }
  
  // 获取状态
  getStatus() {
    return {
      threatsDetected: this.detectedThreats.length,
      lastThreat: this.detectedThreats[this.detectedThreats.length - 1],
      config: this.config
    };
  }
  
  // 添加到白名单
  addToWhitelist(content) {
    this.whitelist.add(content);
  }
  
  // 添加到黑名单
  addToBlacklist(content) {
    this.blacklist.add(content);
  }
  
  // 清理
  cleanup() {
    this.detectedThreats = [];
    this.whitelist.clear();
    this.blacklist.clear();
  }
}

3. CSRF防护深度实践

3.1 CSRF攻击检测与防护

// CSRF保护模块
class CSRFProtection {
  constructor(config = {}) {
    this.config = {
      tokenName: '_csrf_token',
      headerName: 'X-CSRF-Token',
      cookieName: 'csrf_token',
      tokenLength: 32,
      enableSameSiteCookies: true,
      enableOriginValidation: true,
      enableReferrerValidation: true,
      enableDoubleSubmitCookies: true,
      trustedOrigins: [],
      ...config
    };
    
    this.tokens = new Map();
    this.sessionToken = null;
    this.detectedAttacks = [];
    
    this.init();
  }
  
  // 初始化CSRF保护
  init() {
    this.generateSessionToken();
    this.setupTokenValidation();
    this.setupOriginValidation();
    this.setupSameSiteCookies();
    this.interceptFormSubmissions();
  }
  
  // 生成会话令牌
  generateSessionToken() {
    this.sessionToken = this.generateToken();
    
    // 设置到meta标签
    let metaTag = document.querySelector('meta[name="csrf-token"]');
    if (!metaTag) {
      metaTag = document.createElement('meta');
      metaTag.name = 'csrf-token';
      document.head.appendChild(metaTag);
    }
    metaTag.content = this.sessionToken;
    
    // 设置到cookie（双重提交模式）
    if (this.config.enableDoubleSubmitCookies) {
      this.setCookie(this.config.cookieName, this.sessionToken, {
        secure: location.protocol === 'https:',
        sameSite: 'Strict',
        httpOnly: false // 需要JavaScript访问
      });
    }
  }
  
  // 生成随机令牌
  generateToken() {
    const array = new Uint8Array(this.config.tokenLength);
    crypto.getRandomValues(array);
    return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');
  }
  
  // 设置Cookie
  setCookie(name, value, options = {}) {
    let cookieString = `${name}=${value}`;
    
    if (options.expires) {
      cookieString += `; expires=${options.expires.toUTCString()}`;
    }
    
    if (options.maxAge) {
      cookieString += `; max-age=${options.maxAge}`;
    }
    
    if (options.domain) {
      cookieString += `; domain=${options.domain}`;
    }
    
    if (options.path) {
      cookieString += `; path=${options.path}`;
    }
    
    if (options.secure) {
      cookieString += '; secure';
    }
    
    if (options.httpOnly) {
      cookieString += '; httponly';
    }
    
    if (options.sameSite) {
      cookieString += `; samesite=${options.sameSite}`;
    }
    
    document.cookie = cookieString;
  }
  
  // 获取Cookie值
  getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
      return parts.pop().split(';').shift();
    }
    return null;
  }
  
  // 设置令牌验证
  setupTokenValidation() {
    // 为所有表单添加CSRF令牌
    document.addEventListener('DOMContentLoaded', () => {
      this.addTokensToForms();
    });
    
    // 监控新添加的表单
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (node.tagName === 'FORM') {
              this.addTokenToForm(node);
            } else {
              const forms = node.querySelectorAll('form');
              forms.forEach(form => this.addTokenToForm(form));
            }
          }
        });
      });
    });
    
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }
  
  // 为所有表单添加令牌
  addTokensToForms() {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => this.addTokenToForm(form));
  }
  
  // 为单个表单添加令牌
  addTokenToForm(form) {
    // 检查是否已经有CSRF令牌
    let tokenInput = form.querySelector(`input[name="${this.config.tokenName}"]`);
    
    if (!tokenInput) {
      tokenInput = document.createElement('input');
      tokenInput.type = 'hidden';
      tokenInput.name = this.config.tokenName;
      form.appendChild(tokenInput);
    }
    
    tokenInput.value = this.sessionToken;
  }
  
  // 设置来源验证
  setupOriginValidation() {
    if (!this.config.enableOriginValidation) return;
    
    // 添加受信任的来源
    this.config.trustedOrigins.push(window.location.origin);
  }
  
  // 设置SameSite Cookie
  setupSameSiteCookies() {
    if (!this.config.enableSameSiteCookies) return;
    
    // 检查现有cookie的SameSite设置
    const cookies = document.cookie.split(';');
    cookies.forEach(cookie => {
      const [name] = cookie.trim().split('=');
      if (!cookie.includes('SameSite')) {
        console.warn(`Cookie ${name} missing SameSite attribute`);
      }
    });
  }
  
  // 拦截表单提交
  interceptFormSubmissions() {
    document.addEventListener('submit', (event) => {
      const form = event.target;
      
      if (form.tagName === 'FORM') {
        if (!this.validateFormSubmission(form)) {
          event.preventDefault();
          this.handleCSRFAttack({
            type: 'form_submission',
            form: form,
            action: form.action,
            method: form.method
          });
        }
      }
    });
  }
  
  // 验证表单提交
  validateFormSubmission(form) {
    // 只验证POST、PUT、DELETE等修改性请求
    const method = form.method.toLowerCase();
    if (['get', 'head', 'options'].includes(method)) {
      return true;
    }
    
    // 检查CSRF令牌
    const tokenInput = form.querySelector(`input[name="${this.config.tokenName}"]`);
    if (!tokenInput || tokenInput.value !== this.sessionToken) {
      return false;
    }
    
    // 验证来源
    if (this.config.enableOriginValidation) {
      if (!this.validateOrigin()) {
        return false;
      }
    }
    
    // 验证Referrer
    if (this.config.enableReferrerValidation) {
      if (!this.validateReferrer()) {
        return false;
      }
    }
    
    return true;
  }
  
  // 保护请求
  protectRequest(url, options = {}) {
    const method = (options.method || 'GET').toLowerCase();
    
    // 只保护修改性请求
    if (['get', 'head', 'options'].includes(method)) {
      return options;
    }
    
    // 添加CSRF令牌到请求头
    if (!options.headers) {
      options.headers = {};
    }
    
    options.headers[this.config.headerName] = this.sessionToken;
    
    // 双重提交Cookie验证
    if (this.config.enableDoubleSubmitCookies) {
      const cookieToken = this.getCookie(this.config.cookieName);
      if (cookieToken !== this.sessionToken) {
        throw new Error('CSRF token mismatch');
      }
    }
    
    // 验证来源
    if (this.config.enableOriginValidation && !this.validateOrigin()) {
      throw new Error('Invalid origin');
    }
    
    return options;
  }
  
  // 保护XMLHttpRequest
  protectXHR(xhr) {
    const originalSetRequestHeader = xhr.setRequestHeader;
    
    xhr.setRequestHeader = function(name, value) {
      originalSetRequestHeader.call(this, name, value);
    };
    
    // 添加CSRF令牌
    xhr.setRequestHeader(this.config.headerName, this.sessionToken);
  }
  
  // 验证来源
  validateOrigin() {
    const origin = window.location.origin;
    return this.config.trustedOrigins.includes(origin);
  }
  
  // 验证Referrer
  validateReferrer() {
    const referrer = document.referrer;
    
    if (!referrer) {
      // 某些情况下referrer可能为空，需要根据安全策略决定
      return this.config.allowEmptyReferrer || false;
    }
    
    try {
      const referrerUrl = new URL(referrer);
      const currentUrl = new URL(window.location.href);
      
      return referrerUrl.origin === currentUrl.origin;
    } catch {
      return false;
    }
  }
  
  // 处理CSRF攻击
  handleCSRFAttack(attack) {
    this.detectedAttacks.push({
      ...attack,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      url: window.location.href,
      referrer: document.referrer
    });
    
    // 触发安全事件
    const event = new CustomEvent('csrf-attack-detected', {
      detail: attack
    });
    document.dispatchEvent(event);
    
    console.warn('🛡️ CSRF Attack Detected:', attack);
    
    // 刷新令牌
    this.refreshToken();
  }
  
  // 刷新令牌
  refreshToken() {
    this.generateSessionToken();
    this.addTokensToForms();
    
    console.log('🔄 CSRF token refreshed');
  }
  
  // 获取状态
  getStatus() {
    return {
      sessionToken: this.sessionToken ? '***' + this.sessionToken.slice(-4) : null,
      attacksDetected: this.detectedAttacks.length,
      lastAttack: this.detectedAttacks[this.detectedAttacks.length - 1],
      config: this.config
    };
  }
  
  // 清理
  cleanup() {
    this.tokens.clear();
    this.detectedAttacks = [];
    this.sessionToken = null;
  }
}

4. 点击劫持防护

4.1 点击劫持检测与防护

// 点击劫持保护模块
class ClickjackingProtection {
  constructor(config = {}) {
    this.config = {
      enableFrameBusting: true,
      enableXFrameOptions: true,
      enableCSPFrameAncestors: true,
      allowedFrameOrigins: [],
      enableClickTracking: true,
      suspiciousClickThreshold: 5,
      clickTimeWindow: 1000,
      ...config
    };
    
    this.clickHistory = [];
    this.suspiciousActivities = [];
    this.frameDetected = false;
    
    this.init();
  }
  
  // 初始化保护
  init() {
    this.detectFraming();
    this.setupFrameBusting();
    this.setupClickTracking();
    this.setupVisibilityDetection();
    this.setupCSPHeaders();
  }
  
  // 检测是否在iframe中
  detectFraming() {
    try {
      this.frameDetected = window.self !== window.top;
      
      if (this.frameDetected) {
        this.handleFrameDetection();
      }
    } catch (error) {
      // 跨域iframe会抛出异常
      this.frameDetected = true;
      this.handleFrameDetection();
    }
  }
  
  // 处理框架检测
  handleFrameDetection() {
    console.warn('🚨 Page loaded in frame detected');
    
    // 检查是否为允许的来源
    if (!this.isAllowedFrameOrigin()) {
      this.handleClickjackingAttempt({
        type: 'unauthorized_framing',
        parentOrigin: this.getParentOrigin(),
        timestamp: Date.now()
      });
    }
  }
  
  // 检查是否为允许的框架来源
  isAllowedFrameOrigin() {
    try {
      const parentOrigin = window.parent.location.origin;
      return this.config.allowedFrameOrigins.includes(parentOrigin);
    } catch {
      // 跨域情况下无法获取父窗口信息
      return false;
    }
  }
  
  // 获取父窗口来源
  getParentOrigin() {
    try {
      return window.parent.location.origin;
    } catch {
      return 'unknown';
    }
  }
  
  // 设置框架破坏
  setupFrameBusting() {
    if (!this.config.enableFrameBusting) return;
    
    // 经典的frame busting代码
    if (this.frameDetected && !this.isAllowedFrameOrigin()) {
      try {
        window.top.location = window.location;
      } catch {
        // 如果无法重定向，显示警告
        this.showFramingWarning();
      }
    }
    
    // 防止被重新框架化
    Object.defineProperty(window, 'top', {
      get: function() {
        return window;
      },
      configurable: false
    });
  }
  
  // 显示框架警告
  showFramingWarning() {
    const warning = document.createElement('div');
    warning.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 0, 0, 0.9);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      z-index: 999999;
      text-align: center;
    `;
    
    warning.innerHTML = `
      <div>
        <h2>⚠️ Security Warning</h2>
        <p>This page is being displayed in an unauthorized frame.</p>
        <p>This may be a clickjacking attack.</p>
        <button onclick="window.open(window.location.href, '_blank')">Open in New Window</button>
      </div>
    `;
    
    document.body.appendChild(warning);
  }
  
  // 设置点击跟踪
  setupClickTracking() {
    if (!this.config.enableClickTracking) return;
    
    document.addEventListener('click', (event) => {
      this.trackClick(event);
    }, true); // 使用捕获阶段
    
    document.addEventListener('mousedown', (event) => {
      this.trackMouseDown(event);
    }, true);
  }
  
  // 跟踪点击
  trackClick(event) {
    const clickData = {
      timestamp: Date.now(),
      x: event.clientX,
      y: event.clientY,
      target: event.target.tagName,
      targetId: event.target.id,
      targetClass: event.target.className,
      button: event.button,
      ctrlKey: event.ctrlKey,
      shiftKey: event.shiftKey,
      altKey: event.altKey
    };
    
    this.clickHistory.push(clickData);
    
    // 保持点击历史在合理范围内
    if (this.clickHistory.length > 100) {
      this.clickHistory.shift();
    }
    
    // 分析点击模式
    this.analyzeClickPattern(clickData);
  }
  
  // 跟踪鼠标按下
  trackMouseDown(event) {
    // 检测是否在透明元素上点击
    const element = event.target;
    const computedStyle = window.getComputedStyle(element);
    
    if (computedStyle.opacity === '0' || computedStyle.visibility === 'hidden') {
      this.handleClickjackingAttempt({
        type: 'transparent_element_click',
        element: element.tagName,
        elementId: element.id,
        opacity: computedStyle.opacity,
        visibility: computedStyle.visibility,
        timestamp: Date.now()
      });
    }
  }
  
  // 分析点击模式
  analyzeClickPattern(clickData) {
    const recentClicks = this.clickHistory.filter(
      click => clickData.timestamp - click.timestamp < this.config.clickTimeWindow
    );
    
    // 检测快速连续点击
    if (recentClicks.length > this.config.suspiciousClickThreshold) {
      this.handleClickjackingAttempt({
        type: 'rapid_clicking',
        clickCount: recentClicks.length,
        timeWindow: this.config.clickTimeWindow,
        timestamp: Date.now()
      });
    }
    
    // 检测点击位置模式
    this.detectClickPositionPattern(recentClicks);
  }
  
  // 检测点击位置模式
  detectClickPositionPattern(clicks) {
    if (clicks.length < 3) return;
    
    // 检测是否所有点击都在同一位置（可能是自动化攻击）
    const firstClick = clicks[0];
    const samePosition = clicks.every(click => 
      Math.abs(click.x - firstClick.x) < 5 && 
      Math.abs(click.y - firstClick.y) < 5
    );
    
    if (samePosition && clicks.length > 3) {
      this.handleClickjackingAttempt({
        type: 'automated_clicking',
        position: { x: firstClick.x, y: firstClick.y },
        clickCount: clicks.length,
        timestamp: Date.now()
      });
    }
  }
  
  // 设置可见性检测
  setupVisibilityDetection() {
    // 检测页面可见性变化
    document.addEventListener('visibilitychange', () => {
      if (document.hidden && this.frameDetected) {
        this.handleClickjackingAttempt({
          type: 'visibility_manipulation',
          hidden: document.hidden,
          timestamp: Date.now()
        });
      }
    });
    
    // 检测窗口焦点变化
    window.addEventListener('blur', () => {
      if (this.frameDetected) {
        this.handleClickjackingAttempt({
          type: 'focus_manipulation',
          timestamp: Date.now()
        });
      }
    });
  }
  
  // 设置CSP头
  setupCSPHeaders() {
    if (!this.config.enableCSPFrameAncestors) return;
    
    // 检查是否已设置CSP
    const metaCSP = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
    
    if (!metaCSP) {
      const cspMeta = document.createElement('meta');
      cspMeta.httpEquiv = 'Content-Security-Policy';
      
      let frameAncestors = "frame-ancestors 'self'";
      if (this.config.allowedFrameOrigins.length > 0) {
        frameAncestors += ' ' + this.config.allowedFrameOrigins.join(' ');
      }
      
      cspMeta.content = frameAncestors;
      document.head.appendChild(cspMeta);
    }
  }
  
  // 验证点击
  validateClick(event) {
    // 检查点击是否在可疑区域
    const suspiciousAreas = this.identifySuspiciousAreas();
    
    for (const area of suspiciousAreas) {
      if (this.isClickInArea(event, area)) {
        this.handleClickjackingAttempt({
          type: 'suspicious_area_click',
          area: area,
          clickPosition: { x: event.clientX, y: event.clientY },
          timestamp: Date.now()
        });
        
        return false;
      }
    }
    
    return true;
  }
  
  // 识别可疑区域
  identifySuspiciousAreas() {
    const areas = [];
    
    // 查找透明或隐藏的可点击元素
    const clickableElements = document.querySelectorAll('a, button, input[type="submit"], input[type="button"]');
    
    clickableElements.forEach(element => {
      const style = window.getComputedStyle(element);
      const rect = element.getBoundingClientRect();
      
      if ((style.opacity === '0' || style.visibility === 'hidden') && 
          rect.width > 0 && rect.height > 0) {
        areas.push({
          element: element,
          rect: rect,
          reason: 'transparent_clickable'
        });
      }
    });
    
    return areas;
  }
  
  // 检查点击是否在区域内
  isClickInArea(event, area) {
    const rect = area.rect;
    return event.clientX >= rect.left && 
           event.clientX <= rect.right && 
           event.clientY >= rect.top && 
           event.clientY <= rect.bottom;
  }
  
  // 处理点击劫持攻击
  handleClickjackingAttempt(attempt) {
    this.suspiciousActivities.push(attempt);
    
    // 触发安全事件
    const event = new CustomEvent('clickjacking-detected', {
      detail: attempt
    });
    document.dispatchEvent(event);
    
    console.warn('🛡️ Clickjacking Attempt Detected:', attempt);
    
    // 根据攻击类型采取相应措施
    this.respondToAttack(attempt);
  }
  
  // 响应攻击
  respondToAttack(attempt) {
    switch (attempt.type) {
      case 'unauthorized_framing':
        if (this.config.enableFrameBusting) {
          this.showFramingWarning();
        }
        break;
        
      case 'rapid_clicking':
        this.temporarilyDisableClicks();
        break;
        
      case 'transparent_element_click':
        this.highlightSuspiciousElements();
        break;
    }
  }
  
  // 临时禁用点击
  temporarilyDisableClicks() {
    const overlay = document.createElement('div');
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 0, 0.3);
      z-index: 999998;
      pointer-events: auto;
    `;
    
    overlay.innerHTML = `
      <div style="
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      ">
        <h3>⚠️ Suspicious Activity Detected</h3>
        <p>Rapid clicking detected. Please wait a moment.</p>
        <div id="countdown">5</div>
      </div>
    `;
    
    document.body.appendChild(overlay);
    
    let countdown = 5;
    const countdownElement = overlay.querySelector('#countdown');
    
    const timer = setInterval(() => {
      countdown--;
      countdownElement.textContent = countdown;
      
      if (countdown <= 0) {
        clearInterval(timer);
        overlay.remove();
      }
    }, 1000);
  }
  
  // 高亮可疑元素
  highlightSuspiciousElements() {
    const suspiciousAreas = this.identifySuspiciousAreas();
    
    suspiciousAreas.forEach(area => {
      const highlight = document.createElement('div');
      highlight.style.cssText = `
        position: absolute;
        border: 3px solid red;
        background: rgba(255, 0, 0, 0.2);
        pointer-events: none;
        z-index: 999997;
      `;
      
      const rect = area.rect;
      highlight.style.left = rect.left + 'px';
      highlight.style.top = rect.top + 'px';
      highlight.style.width = rect.width + 'px';
      highlight.style.height = rect.height + 'px';
      
      document.body.appendChild(highlight);
      
      // 5秒后移除高亮
      setTimeout(() => {
        highlight.remove();
      }, 5000);
    });
  }
  
  // 获取状态
  getStatus() {
    return {
      frameDetected: this.frameDetected,
      suspiciousActivities: this.suspiciousActivities.length,
      recentClicks: this.clickHistory.length,
      lastActivity: this.suspiciousActivities[this.suspiciousActivities.length - 1],
      config: this.config
    };
  }
  
  // 清理
  cleanup() {
    this.clickHistory = [];
    this.suspiciousActivities = [];
  }
}

5. 内容安全策略（CSP）

5.1 CSP策略管理

// 内容安全策略管理器
class ContentSecurityPolicyManager {
  constructor(config = {}) {
    this.config = {
      enableReporting: true,
      reportUri: '/csp-report',
      enableViolationLogging: true,
      strictMode: false,
      allowedSources: {
        script: ["'self'"],
        style: ["'self'", "'unsafe-inline'"],
        img: ["'self'", 'data:', 'https:'],
        connect: ["'self'"],
        font: ["'self'"],
        object: ["'none'"],
        media: ["'self'"],
        frame: ["'none'"]
      },
      ...config
    };
    
    this.violations = [];
    this.policies = new Map();
    this.dynamicNonces = new Set();
    
    this.init();
  }
  
  // 初始化CSP
  init() {
    this.generateCSPHeader();
    this.setupViolationReporting();
    this.setupDynamicNonces();
    this.monitorPolicyViolations();
  }
  
  // 生成CSP头
  generateCSPHeader() {
    const directives = [];
    
    // 基础指令
    directives.push(`default-src 'self'`);
    
    // 脚本源
    if (this.config.allowedSources.script.length > 0) {
      directives.push(`script-src ${this.config.allowedSources.script.join(' ')}`);
    }
    
    // 样式源
    if (this.config.allowedSources.style.length > 0) {
      directives.push(`style-src ${this.config.allowedSources.style.join(' ')}`);
    }
    
    // 图片源
    if (this.config.allowedSources.img.length > 0) {
      directives.push(`img-src ${this.config.allowedSources.img.join(' ')}`);
    }
    
    // 连接源
    if (this.config.allowedSources.connect.length > 0) {
      directives.push(`connect-src ${this.config.allowedSources.connect.join(' ')}`);
    }
    
    // 字体源
    if (this.config.allowedSources.font.length > 0) {
      directives.push(`font-src ${this.config.allowedSources.font.join(' ')}`);
    }
    
    // 对象源
    directives.push(`object-src ${this.config.allowedSources.object.join(' ')}`);
    
    // 媒体源
    if (this.config.allowedSources.media.length > 0) {
      directives.push(`media-src ${this.config.allowedSources.media.join(' ')}`);
    }
    
    // 框架源
    directives.push(`frame-src ${this.config.allowedSources.frame.join(' ')}`);
    
    // 框架祖先
    directives.push(`frame-ancestors 'self'`);
    
    // 基础URI
    directives.push(`base-uri 'self'`);
    
    // 表单动作
    directives.push(`form-action 'self'`);
    
    // 报告URI
    if (this.config.enableReporting) {
      directives.push(`report-uri ${this.config.reportUri}`);
    }
    
    const cspHeader = directives.join('; ');
    this.setCSPHeader(cspHeader);
    
    return cspHeader;
  }
  
  // 设置CSP头
  setCSPHeader(policy) {
    // 通过meta标签设置CSP
    let metaTag = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
    
    if (!metaTag) {
      metaTag = document.createElement('meta');
      metaTag.httpEquiv = 'Content-Security-Policy';
      document.head.appendChild(metaTag);
    }
    
    metaTag.content = policy;
    this.policies.set('main', policy);
  }
  
  // 设置违规报告
  setupViolationReporting() {
    if (!this.config.enableReporting) return;
    
    document.addEventListener('securitypolicyviolation', (event) => {
      this.handleViolation(event);
    });
  }
  
  // 处理CSP违规
  handleViolation(event) {
    const violation = {
      documentURI: event.documentURI,
      referrer: event.referrer,
      blockedURI: event.blockedURI,
      violatedDirective: event.violatedDirective,
      effectiveDirective: event.effectiveDirective,
      originalPolicy: event.originalPolicy,
      sourceFile: event.sourceFile,
      lineNumber: event.lineNumber,
      columnNumber: event.columnNumber,
      statusCode: event.statusCode,
      timestamp: Date.now()
    };
    
    this.violations.push(violation);
    
    if (this.config.enableViolationLogging) {
      console.warn('🛡️ CSP Violation:', violation);
    }
    
    // 触发违规事件
    const customEvent = new CustomEvent('csp-violation', {
      detail: violation
    });
    document.dispatchEvent(customEvent);
    
    // 发送违规报告
    this.sendViolationReport(violation);
  }
  
  // 发送违规报告
  async sendViolationReport(violation) {
    if (!this.config.reportUri) return;
    
    try {
      await fetch(this.config.reportUri, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          'csp-report': violation
        })
      });
    } catch (error) {
      console.error('Failed to send CSP violation report:', error);
    }
  }
  
  // 设置动态nonce
  setupDynamicNonces() {
    // 为内联脚本生成nonce
    this.generateNonce();
    
    // 监控新添加的脚本
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (node.tagName === 'SCRIPT' && !node.src) {
              this.addNonceToScript(node);
            } else if (node.tagName === 'STYLE') {
              this.addNonceToStyle(node);
            }
          }
        });
      });
    });
    
    observer.observe(document.head, {
      childList: true,
      subtree: true
    });
  }
  
  // 生成nonce
  generateNonce() {
    const array = new Uint8Array(16);
    crypto.getRandomValues(array);
    const nonce = btoa(String.fromCharCode(...array));
    this.dynamicNonces.add(nonce);
    return nonce;
  }
  
  // 为脚本添加nonce
  addNonceToScript(script) {
    if (!script.nonce) {
      const nonce = this.generateNonce();
      script.nonce = nonce;
      
      // 更新CSP策略以包含新的nonce
      this.updateScriptSrcWithNonce(nonce);
    }
  }
  
  // 为样式添加nonce
  addNonceToStyle(style) {
    if (!style.nonce) {
      const nonce = this.generateNonce();
      style.nonce = nonce;
      
      // 更新CSP策略以包含新的nonce
      this.updateStyleSrcWithNonce(nonce);
    }
  }
  
  // 更新脚本源策略
  updateScriptSrcWithNonce(nonce) {
    const currentSources = this.config.allowedSources.script;
    const nonceSource = `'nonce-${nonce}'`;
    
    if (!currentSources.includes(nonceSource)) {
      currentSources.push(nonceSource);
      this.generateCSPHeader();
    }
  }
  
  // 更新样式源策略
  updateStyleSrcWithNonce(nonce) {
    const currentSources = this.config.allowedSources.style;
    const nonceSource = `'nonce-${nonce}'`;
    
    if (!currentSources.includes(nonceSource)) {
      currentSources.push(nonceSource);
      this.generateCSPHeader();
    }
  }
  
  // 监控策略违规
  monitorPolicyViolations() {
    // 检查现有脚本是否符合CSP
    const scripts = document.querySelectorAll('script');
    scripts.forEach(script => {
      if (!script.src && !script.nonce && script.innerHTML.trim()) {
        console.warn('Inline script without nonce detected:', script);
      }
    });
    
    // 检查现有样式是否符合CSP
    const styles = document.querySelectorAll('style');
    styles.forEach(style => {
      if (!style.nonce && style.innerHTML.trim()) {
        console.warn('Inline style without nonce detected:', style);
      }
    });
  }
  
  // 添加允许的源
  addAllowedSource(directive, source) {
    if (this.config.allowedSources[directive]) {
      if (!this.config.allowedSources[directive].includes(source)) {
        this.config.allowedSources[directive].push(source);
        this.generateCSPHeader();
      }
    }
  }
  
  // 移除允许的源
  removeAllowedSource(directive, source) {
    if (this.config.allowedSources[directive]) {
      const index = this.config.allowedSources[directive].indexOf(source);
      if (index > -1) {
        this.config.allowedSources[directive].splice(index, 1);
        this.generateCSPHeader();
      }
    }
  }
  
  // 验证资源
  validateResource(type, url) {
    const allowedSources = this.config.allowedSources[type] || [];
    
    // 检查是否为允许的源
    for (const source of allowedSources) {
      if (source === "'self'" && this.isSameOrigin(url)) {
        return true;
      }
      
      if (source === "'none'") {
        return false;
      }
      
      if (source.startsWith('http') && url.startsWith(source)) {
        return true;
      }
      
      if (source === 'data:' && url.startsWith('data:')) {
        return true;
      }
      
      if (source === 'https:' && url.startsWith('https:')) {
        return true;
      }
    }
    
    return false;
  }
  
  // 检查是否为同源
  isSameOrigin(url) {
    try {
      const urlObj = new URL(url, window.location.href);
      return urlObj.origin === window.location.origin;
    } catch {
      return false;
    }
  }
  
  // 获取违规统计
  getViolationStats() {
    const stats = {
      total: this.violations.length,
      byDirective: {},
      bySource: {},
      recent: this.violations.slice(-10)
    };
    
    this.violations.forEach(violation => {
      // 按指令统计
      const directive = violation.violatedDirective;
      stats.byDirective[directive] = (stats.byDirective[directive] || 0) + 1;
      
      // 按源统计
      const source = violation.blockedURI;
      stats.bySource[source] = (stats.bySource[source] || 0) + 1;
    });
    
    return stats;
  }
  
  // 获取状态
  getStatus() {
    return {
      policies: Object.fromEntries(this.policies),
      violations: this.violations.length,
      nonces: this.dynamicNonces.size,
      config: this.config,
      stats: this.getViolationStats()
    };
  }
  
  // 清理
  cleanup() {
    this.violations = [];
    this.policies.clear();
    this.dynamicNonces.clear();
  }
}

6. 输入验证与数据清理

6.1 输入验证管理器

// 输入验证管理器
class InputValidationManager {
  constructor(config = {}) {
    this.config = {
      enableRealTimeValidation: true,
      enableSanitization: true,
      maxInputLength: 10000,
      allowedTags: ['b', 'i', 'em', 'strong', 'p', 'br'],
      allowedAttributes: ['class', 'id'],
      enableCSRFValidation: true,
      enableRateLimiting: true,
      rateLimitWindow: 60000, // 1分钟
      rateLimitMax: 100,
      ...config
    };
    
    this.validators = new Map();
    this.sanitizers = new Map();
    this.inputHistory = [];
    this.rateLimitData = new Map();
    
    this.init();
  }
  
  // 初始化
  init() {
    this.setupDefaultValidators();
    this.setupDefaultSanitizers();
    this.setupInputMonitoring();
    this.setupRateLimiting();
  }
  
  // 设置默认验证器
  setupDefaultValidators() {
    // 邮箱验证
    this.addValidator('email', (value) => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(value);
    });
    
    // URL验证
    this.addValidator('url', (value) => {
      try {
        new URL(value);
        return true;
      } catch {
        return false;
      }
    });
    
    // 电话号码验证
    this.addValidator('phone', (value) => {
      const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/;
      return phoneRegex.test(value.replace(/[\s\-\(\)]/g, ''));
    });
    
    // 数字验证
    this.addValidator('number', (value) => {
      return !isNaN(value) && isFinite(value);
    });
    
    // 整数验证
    this.addValidator('integer', (value) => {
      return Number.isInteger(Number(value));
    });
    
    // 日期验证
    this.addValidator('date', (value) => {
      const date = new Date(value);
      return date instanceof Date && !isNaN(date);
    });
    
    // 密码强度验证
    this.addValidator('password', (value) => {
      // 至少8位，包含大小写字母、数字和特殊字符
      const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
      return passwordRegex.test(value);
    });
    
    // SQL注入检测
    this.addValidator('sql-safe', (value) => {
      const sqlPatterns = [
        /('|(\-\-)|(;)|(\||\|)|(\*|\*))/i,
        /(union|select|insert|delete|update|drop|create|alter|exec|execute)/i
      ];
      
      return !sqlPatterns.some(pattern => pattern.test(value));
    });
    
    // XSS检测
    this.addValidator('xss-safe', (value) => {
      const xssPatterns = [
        /<script[^>]*>.*?<\/script>/gi,
        /<iframe[^>]*>.*?<\/iframe>/gi,
        /javascript:/gi,
        /on\w+\s*=/gi,
        /<object[^>]*>.*?<\/object>/gi,
        /<embed[^>]*>.*?<\/embed>/gi
      ];
      
      return !xssPatterns.some(pattern => pattern.test(value));
    });
  }
  
  // 设置默认清理器
  setupDefaultSanitizers() {
    // HTML清理
    this.addSanitizer('html', (value) => {
      return this.sanitizeHTML(value);
    });
    
    // 移除脚本标签
    this.addSanitizer('remove-scripts', (value) => {
      return value.replace(/<script[^>]*>.*?<\/script>/gi, '');
    });
    
    // 移除事件处理器
    this.addSanitizer('remove-events', (value) => {
      return value.replace(/on\w+\s*=\s*["'][^"']*["']/gi, '');
    });
    
    // 移除危险协议
    this.addSanitizer('safe-urls', (value) => {
      return value.replace(/(javascript|data|vbscript):/gi, '');
    });
    
    // 转义HTML实体
    this.addSanitizer('escape-html', (value) => {
      const div = document.createElement('div');
      div.textContent = value;
      return div.innerHTML;
    });
    
    // 移除多余空白
    this.addSanitizer('trim-whitespace', (value) => {
      return value.replace(/\s+/g, ' ').trim();
    });
  }
  
  // 设置输入监控
  setupInputMonitoring() {
    if (!this.config.enableRealTimeValidation) return;
    
    // 监控所有输入元素
    document.addEventListener('input', (event) => {
      if (event.target.matches('input, textarea, select')) {
        this.validateInput(event.target);
      }
    });
    
    // 监控表单提交
    document.addEventListener('submit', (event) => {
      if (event.target.tagName === 'FORM') {
        if (!this.validateForm(event.target)) {
          event.preventDefault();
        }
      }
    });
  }
  
  // 设置速率限制
  setupRateLimiting() {
    if (!this.config.enableRateLimiting) return;
    
    document.addEventListener('input', (event) => {
      if (event.target.matches('input, textarea')) {
        this.checkRateLimit(event.target);
      }
    });
  }
  
  // 添加验证器
  addValidator(name, validator) {
    this.validators.set(name, validator);
  }
  
  // 添加清理器
  addSanitizer(name, sanitizer) {
    this.sanitizers.set(name, sanitizer);
  }
  
  // 验证输入
  validateInput(input) {
    const value = input.value;
    const validationRules = this.getValidationRules(input);
    const errors = [];
    
    // 长度检查
    if (value.length > this.config.maxInputLength) {
      errors.push(`Input too long (max: ${this.config.maxInputLength})`);
    }
    
    // 应用验证规则
    validationRules.forEach(rule => {
      const validator = this.validators.get(rule);
      if (validator && !validator(value)) {
        errors.push(`Validation failed: ${rule}`);
      }
    });
    
    // 显示验证结果
    this.displayValidationResult(input, errors);
    
    // 记录输入历史
    this.recordInput(input, value, errors);
    
    return errors.length === 0;
  }
  
  // 获取验证规则
  getValidationRules(input) {
    const rules = [];
    
    // 从data属性获取规则
    if (input.dataset.validate) {
      rules.push(...input.dataset.validate.split(','));
    }
    
    // 根据输入类型添加默认规则
    switch (input.type) {
      case 'email':
        rules.push('email');
        break;
      case 'url':
        rules.push('url');
        break;
      case 'tel':
        rules.push('phone');
        break;
      case 'number':
        rules.push('number');
        break;
      case 'password':
        rules.push('password');
        break;
    }
    
    // 安全检查
    rules.push('xss-safe', 'sql-safe');
    
    return rules;
  }
  
  // 显示验证结果
  displayValidationResult(input, errors) {
    // 移除现有错误提示
    const existingError = input.parentNode.querySelector('.validation-error');
    if (existingError) {
      existingError.remove();
    }
    
    // 更新输入样式
    if (errors.length > 0) {
      input.classList.add('invalid');
      input.classList.remove('valid');
      
      // 显示错误信息
      const errorDiv = document.createElement('div');
      errorDiv.className = 'validation-error';
      errorDiv.style.cssText = 'color: red; font-size: 12px; margin-top: 2px;';
      errorDiv.textContent = errors[0]; // 只显示第一个错误
      
      input.parentNode.insertBefore(errorDiv, input.nextSibling);
    } else {
      input.classList.add('valid');
      input.classList.remove('invalid');
    }
  }
  
  // 验证表单
  validateForm(form) {
    const inputs = form.querySelectorAll('input, textarea, select');
    let isValid = true;
    
    inputs.forEach(input => {
      if (!this.validateInput(input)) {
        isValid = false;
      }
    });
    
    return isValid;
  }
  
  // 清理输入
  sanitizeInput(value, sanitizers = ['html', 'remove-scripts', 'remove-events']) {
    let sanitized = value;
    
    sanitizers.forEach(sanitizerName => {
      const sanitizer = this.sanitizers.get(sanitizerName);
      if (sanitizer) {
        sanitized = sanitizer(sanitized);
      }
    });
    
    return sanitized;
  }
  
  // HTML清理
  sanitizeHTML(html) {
    const div = document.createElement('div');
    div.innerHTML = html;
    
    // 移除不允许的标签
    const allElements = div.querySelectorAll('*');
    allElements.forEach(element => {
      if (!this.config.allowedTags.includes(element.tagName.toLowerCase())) {
        element.remove();
      } else {
        // 移除不允许的属性
        const attributes = Array.from(element.attributes);
        attributes.forEach(attr => {
          if (!this.config.allowedAttributes.includes(attr.name)) {
            element.removeAttribute(attr.name);
          }
        });
      }
    });
    
    return div.innerHTML;
  }
  
  // 检查速率限制
  checkRateLimit(input) {
    const now = Date.now();
    const key = input.name || input.id || 'anonymous';
    
    if (!this.rateLimitData.has(key)) {
      this.rateLimitData.set(key, []);
    }
    
    const timestamps = this.rateLimitData.get(key);
    
    // 移除过期的时间戳
    const validTimestamps = timestamps.filter(
      timestamp => now - timestamp < this.config.rateLimitWindow
    );
    
    validTimestamps.push(now);
    this.rateLimitData.set(key, validTimestamps);
    
    // 检查是否超过限制
    if (validTimestamps.length > this.config.rateLimitMax) {
      this.handleRateLimitExceeded(input);
      return false;
    }
    
    return true;
  }
  
  // 处理速率限制超出
  handleRateLimitExceeded(input) {
    input.disabled = true;
    input.placeholder = 'Rate limit exceeded. Please wait...';
    
    // 显示警告
    const warning = document.createElement('div');
    warning.className = 'rate-limit-warning';
    warning.style.cssText = 'color: orange; font-size: 12px; margin-top: 2px;';
    warning.textContent = 'Too many inputs. Please slow down.';
    
    input.parentNode.insertBefore(warning, input.nextSibling);
    
    // 30秒后恢复
    setTimeout(() => {
      input.disabled = false;
      input.placeholder = '';
      warning.remove();
    }, 30000);
  }
  
  // 记录输入
  recordInput(input, value, errors) {
    this.inputHistory.push({
      element: input.name || input.id,
      value: value.substring(0, 100), // 只记录前100个字符
      errors: errors,
      timestamp: Date.now()
    });
    
    // 保持历史记录在合理范围内
    if (this.inputHistory.length > 1000) {
      this.inputHistory.shift();
    }
  }
  
  // 获取输入统计
  getInputStats() {
    const stats = {
      totalInputs: this.inputHistory.length,
      errorCount: this.inputHistory.filter(input => input.errors.length > 0).length,
      rateLimitViolations: 0,
      recentErrors: this.inputHistory.filter(input => 
        input.errors.length > 0 && 
        Date.now() - input.timestamp < 300000 // 5分钟内
      )
    };
    
    return stats;
  }
  
  // 获取状态
  getStatus() {
    return {
      validators: Array.from(this.validators.keys()),
      sanitizers: Array.from(this.sanitizers.keys()),
      inputHistory: this.inputHistory.length,
      rateLimitData: this.rateLimitData.size,
      stats: this.getInputStats(),
      config: this.config
    };
  }
  
  // 清理
  cleanup() {
    this.inputHistory = [];
    this.rateLimitData.clear();
  }
}