前端安全防护深度实践：从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: [ /]*>.*?/gi, /]*>/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(/]*>.*?/gi, \'\') .replace(/]*>/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 = ` 
 
⚠️ Security Warning
 
This page is being displayed in an unauthorized frame.
 
This may be a clickjacking attack.
 Open in New Window 
 `; 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 = ` 
 
⚠️ Suspicious Activity Detected
 
Rapid clicking detected. Please wait a moment.
 
5
 
 `; 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 = [ /]*>.*?/gi, /]*>.*?/gi, /javascript:/gi, /on\\w+\\s*=/gi, /]*>.*?/gi, /]*>.*?/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(/]*>.*?/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(); }}