security: 修复前端 XSS 注入风险

- 添加 escapeHtml() 和 escapeJs() 转义函数
- tokens.js: 转义所有 token 数据（refresh_token, access_token, email, projectId）
- ui.js: 转义 showToast/showConfirm/showLoading 的用户输入
- quota.js: 转义所有 API 返回的数据（modelId, email, message 等）

public/js/quota.js

@@ -50,7 +50,7 @@ async function loadTokenQuotaSummary(refreshToken) {
             quotaCache.set(refreshToken, data.data);
             renderQuotaSummary(summaryEl, data.data);
         } else {
-            const errMsg = data.message || '未知错误';
+            const errMsg = escapeHtml(data.message || '未知错误');
             summaryEl.innerHTML = `<span class="quota-summary-error">📊 ${errMsg}</span>`;
         }
     } catch (error) {
@@ -81,12 +81,13 @@ function renderQuotaSummary(summaryEl, quotaData) {
     
     const percentage = minQuota.remaining * 100;
     const percentageText = `${percentage.toFixed(2)}%`;
-    const shortName = minModel.replace('models/', '').replace('publishers/google/', '').split('/').pop();
+    const shortName = escapeHtml(minModel.replace('models/', '').replace('publishers/google/', '').split('/').pop());
+    const safeMinModel = escapeHtml(minModel);
     const barColor = percentage > 50 ? '#10b981' : percentage > 20 ? '#f59e0b' : '#ef4444';
     
     summaryEl.innerHTML = `
         <span class="quota-summary-icon">📊</span>
-        <span class="quota-summary-model" title="${minModel}">${shortName}</span>
+        <span class="quota-summary-model" title="${safeMinModel}">${shortName}</span>
         <span class="quota-summary-bar"><span style="width:${percentage}%;background:${barColor}"></span></span>
         <span class="quota-summary-pct">${percentageText}</span>
     `;
@@ -150,9 +151,11 @@ async function loadQuotaDetail(cardId, refreshToken) {
                     const percentage = quota.remaining * 100;
                     const percentageText = `${percentage.toFixed(2)}%`;
                     const barColor = percentage > 50 ? '#10b981' : percentage > 20 ? '#f59e0b' : '#ef4444';
-                    const shortName = modelId.replace('models/', '').replace('publishers/google/', '').split('/').pop();
+                    const shortName = escapeHtml(modelId.replace('models/', '').replace('publishers/google/', '').split('/').pop());
+                    const safeModelId = escapeHtml(modelId);
+                    const safeResetTime = escapeHtml(quota.resetTime);
                     groupHtml += `
-                        <div class="quota-detail-row" title="${modelId} - 重置: ${quota.resetTime}">
+                        <div class="quota-detail-row" title="${safeModelId} - 重置: ${safeResetTime}">
                             <span class="quota-detail-icon">${icon}</span>
                             <span class="quota-detail-name">${shortName}</span>
                             <span class="quota-detail-bar"><span style="width:${percentage}%;background:${barColor}"></span></span>
@@ -167,11 +170,11 @@ async function loadQuotaDetail(cardId, refreshToken) {
             html += renderGroup(grouped.gemini, '💎');
             html += renderGroup(grouped.other, '🔧');
             html += '</div>';
-            html += `<button class="btn btn-info btn-xs quota-refresh-btn" onclick="refreshInlineQuota('${cardId}', '${refreshToken}')">🔄 刷新额度</button>`;
+            html += `<button class="btn btn-info btn-xs quota-refresh-btn" onclick="refreshInlineQuota('${escapeJs(cardId)}', '${escapeJs(refreshToken)}')">🔄 刷新额度</button>`;
             
             detailEl.innerHTML = html;
         } else {
-            const errMsg = data.message || '未知错误';
+            const errMsg = escapeHtml(data.message || '未知错误');
             detailEl.innerHTML = `<div class="quota-error-small">加载失败: ${errMsg}</div>`;
         }
     } catch (error) {
@@ -213,7 +216,9 @@ async function showQuotaModal(refreshToken) {
         const email = t.email || '未知';
         const shortEmail = email.length > 20 ? email.substring(0, 17) + '...' : email;
         const isActive = index === activeIndex;
-        return `<button type="button" class="quota-tab${isActive ? ' active' : ''}" data-index="${index}" onclick="switchQuotaAccountByIndex(${index})" title="${email}">${shortEmail}</button>`;
+        const safeEmail = escapeHtml(email);
+        const safeShortEmail = escapeHtml(shortEmail);
+        return `<button type="button" class="quota-tab${isActive ? ' active' : ''}" data-index="${index}" onclick="switchQuotaAccountByIndex(${index})" title="${safeEmail}">${safeShortEmail}</button>`;
     }).join('');
     
     const modal = document.createElement('div');
@@ -315,11 +320,11 @@ async function loadQuotaData(refreshToken, forceRefresh = false) {
             quotaCache.set(refreshToken, data.data);
             renderQuotaModal(quotaContent, data.data);
         } else {
-            quotaContent.innerHTML = `<div class="quota-error">加载失败: ${data.message}</div>`;
+            quotaContent.innerHTML = `<div class="quota-error">加载失败: ${escapeHtml(data.message)}</div>`;
         }
     } catch (error) {
         if (quotaContent) {
-            quotaContent.innerHTML = `<div class="quota-error">加载失败: ${error.message}</div>`;
+            quotaContent.innerHTML = `<div class="quota-error">加载失败: ${escapeHtml(error.message)}</div>`;
         }
     } finally {
         if (refreshBtn) {
@@ -363,20 +368,22 @@ function renderQuotaModal(quotaContent, quotaData) {
     
     const renderGroup = (items, title) => {
         if (items.length === 0) return '';
-        let groupHtml = `<div class="quota-group-title">${title}</div><div class="quota-grid">`;
+        let groupHtml = `<div class="quota-group-title">${escapeHtml(title)}</div><div class="quota-grid">`;
         items.forEach(({ modelId, quota }) => {
             const percentage = quota.remaining * 100;
             const percentageText = `${percentage.toFixed(2)}%`;
             const barColor = percentage > 50 ? '#10b981' : percentage > 20 ? '#f59e0b' : '#ef4444';
-            const shortName = modelId.replace('models/', '').replace('publishers/google/', '');
+            const shortName = escapeHtml(modelId.replace('models/', '').replace('publishers/google/', ''));
+            const safeModelId = escapeHtml(modelId);
+            const safeResetTime = escapeHtml(quota.resetTime);
             groupHtml += `
                 <div class="quota-item">
-                    <div class="quota-model-name" title="${modelId}">${shortName}</div>
+                    <div class="quota-model-name" title="${safeModelId}">${shortName}</div>
                     <div class="quota-bar-container">
                         <div class="quota-bar" style="width: ${percentage}%; background: ${barColor};"></div>
                     </div>
                     <div class="quota-info-row">
-                        <span class="quota-reset">重置: ${quota.resetTime}</span>
+                        <span class="quota-reset">重置: ${safeResetTime}</span>
                         <span class="quota-percentage">${percentageText}</span>
                     </div>
                 </div>

public/js/tokens.js

@@ -56,50 +56,58 @@ function renderTokens(tokens) {
             expiredTokensToRefresh.push(token.refresh_token);
         }
         
+        // 转义所有用户数据防止 XSS
+        const safeRefreshToken = escapeJs(token.refresh_token);
+        const safeAccessTokenSuffix = escapeHtml(token.access_token_suffix || '');
+        const safeProjectId = escapeHtml(token.projectId || '');
+        const safeEmail = escapeHtml(token.email || '');
+        const safeProjectIdJs = escapeJs(token.projectId || '');
+        const safeEmailJs = escapeJs(token.email || '');
+        
         return `
-        <div class="token-card ${!token.enable ? 'disabled' : ''} ${isExpired ? 'expired' : ''} ${isRefreshing ? 'refreshing' : ''}" id="card-${cardId}">
+        <div class="token-card ${!token.enable ? 'disabled' : ''} ${isExpired ? 'expired' : ''} ${isRefreshing ? 'refreshing' : ''}" id="card-${escapeHtml(cardId)}">
             <div class="token-header">
                 <span class="status ${token.enable ? 'enabled' : 'disabled'}">
                     ${token.enable ? '✅ 启用' : '❌ 禁用'}
                 </span>
                 <div class="token-header-right">
-                    <button class="btn-icon" onclick="showTokenDetail('${token.refresh_token}')" title="编辑全部">✏️</button>
-                    <span class="token-id">#${token.refresh_token.substring(0, 6)}</span>
+                    <button class="btn-icon" onclick="showTokenDetail('${safeRefreshToken}')" title="编辑全部">✏️</button>
+                    <span class="token-id">#${escapeHtml(token.refresh_token.substring(0, 6))}</span>
                 </div>
             </div>
             <div class="token-info">
                 <div class="info-row">
                     <span class="info-label">🎫</span>
-                    <span class="info-value sensitive-info" title="${token.access_token_suffix}">${token.access_token_suffix}</span>
+                    <span class="info-value sensitive-info" title="${safeAccessTokenSuffix}">${safeAccessTokenSuffix}</span>
                 </div>
-                <div class="info-row editable" onclick="editField(event, '${token.refresh_token}', 'projectId', '${(token.projectId || '').replace(/'/g, "\\'")}')" title="点击编辑">
+                <div class="info-row editable" onclick="editField(event, '${safeRefreshToken}', 'projectId', '${safeProjectIdJs}')" title="点击编辑">
                     <span class="info-label">📦</span>
-                    <span class="info-value sensitive-info">${token.projectId || '点击设置'}</span>
+                    <span class="info-value sensitive-info">${safeProjectId || '点击设置'}</span>
                     <span class="info-edit-icon">✏️</span>
                 </div>
-                <div class="info-row editable" onclick="editField(event, '${token.refresh_token}', 'email', '${(token.email || '').replace(/'/g, "\\'")}')" title="点击编辑">
+                <div class="info-row editable" onclick="editField(event, '${safeRefreshToken}', 'email', '${safeEmailJs}')" title="点击编辑">
                     <span class="info-label">📧</span>
-                    <span class="info-value sensitive-info">${token.email || '点击设置'}</span>
+                    <span class="info-value sensitive-info">${safeEmail || '点击设置'}</span>
                     <span class="info-edit-icon">✏️</span>
                 </div>
-                <div class="info-row ${isExpired ? 'expired-text' : ''}" id="expire-row-${cardId}">
+                <div class="info-row ${isExpired ? 'expired-text' : ''}" id="expire-row-${escapeHtml(cardId)}">
                     <span class="info-label">⏰</span>
-                    <span class="info-value">${isRefreshing ? '🔄 刷新中...' : expireStr}${isExpired && !isRefreshing ? ' (已过期)' : ''}</span>
+                    <span class="info-value">${isRefreshing ? '🔄 刷新中...' : escapeHtml(expireStr)}${isExpired && !isRefreshing ? ' (已过期)' : ''}</span>
                 </div>
             </div>
-            <div class="token-quota-inline" id="quota-inline-${cardId}">
-                <div class="quota-inline-header" onclick="toggleQuotaExpand('${cardId}', '${token.refresh_token}')">
-                    <span class="quota-inline-summary" id="quota-summary-${cardId}">📊 加载中...</span>
-                    <span class="quota-inline-toggle" id="quota-toggle-${cardId}">▼</span>
+            <div class="token-quota-inline" id="quota-inline-${escapeHtml(cardId)}">
+                <div class="quota-inline-header" onclick="toggleQuotaExpand('${escapeJs(cardId)}', '${safeRefreshToken}')">
+                    <span class="quota-inline-summary" id="quota-summary-${escapeHtml(cardId)}">📊 加载中...</span>
+                    <span class="quota-inline-toggle" id="quota-toggle-${escapeHtml(cardId)}">▼</span>
                 </div>
-                <div class="quota-inline-detail hidden" id="quota-detail-${cardId}"></div>
+                <div class="quota-inline-detail hidden" id="quota-detail-${escapeHtml(cardId)}"></div>
             </div>
             <div class="token-actions">
-                <button class="btn btn-info btn-xs" onclick="showQuotaModal('${token.refresh_token}')" title="查看额度">📊 详情</button>
-                <button class="btn ${token.enable ? 'btn-warning' : 'btn-success'} btn-xs" onclick="toggleToken('${token.refresh_token}', ${!token.enable})" title="${token.enable ? '禁用' : '启用'}">
+                <button class="btn btn-info btn-xs" onclick="showQuotaModal('${safeRefreshToken}')" title="查看额度">📊 详情</button>
+                <button class="btn ${token.enable ? 'btn-warning' : 'btn-success'} btn-xs" onclick="toggleToken('${safeRefreshToken}', ${!token.enable})" title="${token.enable ? '禁用' : '启用'}">
                     ${token.enable ? '⏸️ 禁用' : '▶️ 启用'}
                 </button>
-                <button class="btn btn-danger btn-xs" onclick="deleteToken('${token.refresh_token}')" title="删除">🗑️ 删除</button>
+                <button class="btn btn-danger btn-xs" onclick="deleteToken('${safeRefreshToken}')" title="删除">🗑️ 删除</button>
             </div>
         </div>
     `}).join('');
@@ -309,6 +317,14 @@ function showTokenDetail(refreshToken) {
         return;
     }
     
+    // 转义所有用户数据防止 XSS
+    const safeAccessToken = escapeHtml(token.access_token || '');
+    const safeRefreshToken = escapeHtml(token.refresh_token);
+    const safeRefreshTokenJs = escapeJs(refreshToken);
+    const safeProjectId = escapeHtml(token.projectId || '');
+    const safeEmail = escapeHtml(token.email || '');
+    const expireTimeStr = escapeHtml(new Date(token.timestamp + token.expires_in * 1000).toLocaleString('zh-CN'));
+    
     const modal = document.createElement('div');
     modal.className = 'modal form-modal';
     modal.innerHTML = `
@@ -316,27 +332,27 @@ function showTokenDetail(refreshToken) {
             <div class="modal-title">📝 Token详情</div>
             <div class="form-group compact">
                 <label>🎫 Access Token (只读)</label>
-                <div class="token-display">${token.access_token || ''}</div>
+                <div class="token-display">${safeAccessToken}</div>
             </div>
             <div class="form-group compact">
                 <label>🔄 Refresh Token (只读)</label>
-                <div class="token-display">${token.refresh_token}</div>
+                <div class="token-display">${safeRefreshToken}</div>
             </div>
             <div class="form-group compact">
                 <label>📦 Project ID</label>
-                <input type="text" id="editProjectId" value="${token.projectId || ''}" placeholder="项目ID">
+                <input type="text" id="editProjectId" value="${safeProjectId}" placeholder="项目ID">
             </div>
             <div class="form-group compact">
                 <label>📧 邮箱</label>
-                <input type="email" id="editEmail" value="${token.email || ''}" placeholder="账号邮箱">
+                <input type="email" id="editEmail" value="${safeEmail}" placeholder="账号邮箱">
             </div>
             <div class="form-group compact">
                 <label>⏰ 过期时间</label>
-                <input type="text" value="${new Date(token.timestamp + token.expires_in * 1000).toLocaleString('zh-CN')}" readonly style="background: var(--bg); cursor: not-allowed;">
+                <input type="text" value="${expireTimeStr}" readonly style="background: var(--bg); cursor: not-allowed;">
             </div>
             <div class="modal-actions">
                 <button class="btn btn-secondary" onclick="this.closest('.modal').remove()">取消</button>
-                <button class="btn btn-success" onclick="saveTokenDetail('${refreshToken}')">💾 保存</button>
+                <button class="btn btn-success" onclick="saveTokenDetail('${safeRefreshTokenJs}')">💾 保存</button>
             </div>
         </div>
     `;

public/js/ui.js

@@ -5,11 +5,14 @@ function showToast(message, type = 'info', title = '') {
     const titles = { success: '成功', error: '错误', warning: '警告', info: '提示' };
     const toast = document.createElement('div');
     toast.className = `toast ${type}`;
+    // 转义用户输入防止 XSS
+    const safeTitle = escapeHtml(title || titles[type]);
+    const safeMessage = escapeHtml(message);
     toast.innerHTML = `
         <div class="toast-icon">${icons[type]}</div>
         <div class="toast-content">
-            <div class="toast-title">${title || titles[type]}</div>
-            <div class="toast-message">${message}</div>
+            <div class="toast-title">${safeTitle}</div>
+            <div class="toast-message">${safeMessage}</div>
         </div>
     `;
     document.body.appendChild(toast);
@@ -23,10 +26,13 @@ function showConfirm(message, title = '确认操作') {
     return new Promise((resolve) => {
         const modal = document.createElement('div');
         modal.className = 'modal';
+        // 转义用户输入防止 XSS
+        const safeTitle = escapeHtml(title);
+        const safeMessage = escapeHtml(message);
         modal.innerHTML = `
             <div class="modal-content">
-                <div class="modal-title">${title}</div>
-                <div class="modal-message">${message}</div>
+                <div class="modal-title">${safeTitle}</div>
+                <div class="modal-message">${safeMessage}</div>
                 <div class="modal-actions">
                     <button class="btn btn-secondary" onclick="this.closest('.modal').remove(); window.modalResolve(false)">取消</button>
                     <button class="btn btn-danger" onclick="this.closest('.modal').remove(); window.modalResolve(true)">确定</button>
@@ -43,7 +49,9 @@ function showLoading(text = '处理中...') {
     const overlay = document.createElement('div');
     overlay.className = 'loading-overlay';
     overlay.id = 'loadingOverlay';
-    overlay.innerHTML = `<div class="spinner"></div><div class="loading-text">${text}</div>`;
+    // 转义用户输入防止 XSS
+    const safeText = escapeHtml(text);
+    overlay.innerHTML = `<div class="spinner"></div><div class="loading-text">${safeText}</div>`;
     document.body.appendChild(overlay);
 }
 

public/js/utils.js

@@ -1,3 +1,25 @@
+// HTML 转义函数 - 防止 XSS 注入
+function escapeHtml(str) {
+    if (str === null || str === undefined) return '';
+    return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+// 转义用于 JavaScript 字符串的内容
+function escapeJs(str) {
+    if (str === null || str === undefined) return '';
+    return String(str)
+        .replace(/\\/g, '\\\\')
+        .replace(/'/g, "\\'")
+        .replace(/"/g, '\\"')
+        .replace(/\n/g, '\\n')
+        .replace(/\r/g, '\\r');
+}
+
 // 字体大小设置
 function initFontSize() {
     const savedSize = localStorage.getItem('fontSize') || '18';