refactor: implement cookie management and password hashing for improved security

Author: linyuchen

src/webui/BE/passwordHash.ts

@@ -0,0 +1,10 @@
+import crypto from 'node:crypto';
+
+/**
+ * 使用 SHA-256 对密码进行哈希
+ * @param password 明文密码
+ * @returns 哈希后的密码（十六进制字符串）
+ */
+export function hashPassword(password: string): string {
+  return crypto.createHash('sha256').update(password).digest('hex');
+}

src/webui/BE/server.ts

@@ -6,6 +6,7 @@ import { getConfigUtil, webuiTokenUtil } from '@/common/config'
 import { Config, WebUIConfig } from '@/common/types'
 import { Server } from 'http'
 import { Socket } from 'net'
+import { hashPassword } from './passwordHash'
 import { Context, Service } from 'cordis'
 import { selfInfo, LOG_DIR } from '@/common/globalVars'
 import { getAvailablePort } from '@/common/utils/port'
@@ -146,7 +147,10 @@ export class WebUIServer extends Service {
         })
         return
       }
-      if (reqToken !== token) {
+      
+      // 将存储的明文密码 hash 后与前端传来的 hash 对比
+      const hashedToken = hashPassword(token)
+      if (reqToken !== hashedToken) {
         // 记录失败尝试
         globalLoginAttempt.consecutiveFailures++
         globalLoginAttempt.lastAttempt = Date.now()

src/webui/FE/App.tsx

@@ -8,7 +8,7 @@ import QQLogin from './components/QQLogin';
 import { ToastContainer, showToast } from './components/Toast';
 import AnimatedBackground from './components/AnimatedBackground';
 import { Config, ResConfig } from './types';
-import { apiFetch, getToken, setPasswordPromptHandler, setTokenStorage } from './utils/api';
+import { apiFetch, setPasswordPromptHandler } from './utils/api';
 import { Save, Loader2, Settings, Eye, EyeOff } from 'lucide-react';
 import { defaultConfig } from '../../common/defaultConfig'
 import { version } from '../../version'
@@ -21,7 +21,6 @@ function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [checkingLogin, setCheckingLogin] = useState(true);
   const [accountInfo, setAccountInfo] = useState<{ nick: string; uin: string } | null>(null);
-  const [token, setToken] = useState(getToken() || '');
   const [showPasswordDialog, setShowPasswordDialog] = useState(false);
   const [passwordError, setPasswordError] = useState('');
   const [passwordResolve, setPasswordResolve] = useState<((value: string) => void) | null>(null);
@@ -91,7 +90,6 @@ function App() {
         body: JSON.stringify({ config: finalConfig }),
       });
       if (response.success) {
-        setTokenStorage(token);
         showToast('配置保存成功', 'success');
       } else {
         showToast('保存失败：' + response.message, 'error');
@@ -101,7 +99,7 @@ function App() {
     } finally {
       setLoading(false);
     }
-  }, [config, token]); // 依赖 config 和 token
+  }, [config]); // 依赖 config
 
   // 登录成功回调
   const handleLoginSuccess = useCallback(() => {

src/webui/FE/utils/api.ts

@@ -1,19 +1,23 @@
 import { ApiResponse } from '../types';
-import { showToast } from '../components/Toast'
+import { showToast } from '../components/Toast';
+import { hashPassword } from './passwordHash';
+import { getCookie, setCookie } from './cookie';
 
 const TOKEN_KEY = 'webui_token';
+const TOKEN_EXPIRY_DAYS = 30; // Cookie 过期天数
+
 let passwordPromptHandler: ((tip: string) => Promise<string>) | null = null;
 
 export function setPasswordPromptHandler(handler: (tip: string) => Promise<string>) {
   passwordPromptHandler = handler;
 }
 
 export function getToken(): string | null {
-  return localStorage.getItem(TOKEN_KEY);
+  return getCookie(TOKEN_KEY);
 }
 
 export function setTokenStorage(token: string) {
-  localStorage.setItem(TOKEN_KEY, token);
+  setCookie(TOKEN_KEY, token, TOKEN_EXPIRY_DAYS);
 }
 
 export async function apiFetch<T = any>(
@@ -49,7 +53,7 @@ export async function apiFetch<T = any>(
         throw new Error('密码不能为空');
       }
 
-      // 调用设置密码接口
+      // 调用设置密码接口（传送明文）
       const setTokenResponse = await fetch('/api/set-token', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -60,10 +64,12 @@ export async function apiFetch<T = any>(
         throw new Error('设置密码失败');
       }
 
-      setTokenStorage(newPassword.trim());
+      // 存储 hash 后的密码
+      const hashedPassword = await hashPassword(newPassword.trim());
+      setTokenStorage(hashedPassword);
 
-      // 重新请求原接口
-      response = await makeRequest(newPassword.trim());
+      // 重新请求原接口（使用 hash）
+      response = await makeRequest(hashedPassword);
     }
 
     // 403: 密码错误或账户锁定，需要重新输入
@@ -96,10 +102,12 @@ export async function apiFetch<T = any>(
             throw new Error('密码不能为空');
           }
 
-          setTokenStorage(newPassword.trim());
+          // 存储 hash 后的密码
+          const hashedPassword = await hashPassword(newPassword.trim());
+          setTokenStorage(hashedPassword);
 
-          // 重新请求
-          response = await makeRequest(newPassword.trim());
+          // 重新请求（使用 hash）
+          response = await makeRequest(hashedPassword);
 
           if (response.status === 200) {
             console.log('Authentication successful!');

src/webui/FE/utils/cookie.ts

@@ -0,0 +1,50 @@
+/**
+ * Cookie 工具函数
+ */
+
+/**
+ * 设置 Cookie
+ * @param name Cookie 名称
+ * @param value Cookie 值
+ * @param days 过期天数（默认 30 天）
+ */
+export function setCookie(name: string, value: string, days: number = 30): void {
+  const date = new Date();
+  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+  const expires = `expires=${date.toUTCString()}`;
+  
+  // 设置 Cookie 属性
+  // SameSite=Strict: 防止 CSRF 攻击
+  // Secure: 仅在 HTTPS 下传输（开发环境可能是 HTTP，所以条件判断）
+  // HttpOnly: 无法通过 JS 设置（但我们需要 JS 访问，所以不设置）
+  const isSecure = window.location.protocol === 'https:';
+  const secureFlag = isSecure ? '; Secure' : '';
+  
+  document.cookie = `${name}=${value}; ${expires}; path=/; SameSite=Strict${secureFlag}`;
+}
+
+/**
+ * 获取 Cookie
+ * @param name Cookie 名称
+ * @returns Cookie 值，如果不存在返回 null
+ */
+export function getCookie(name: string): string | null {
+  const nameEQ = name + '=';
+  const ca = document.cookie.split(';');
+  
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+  
+  return null;
+}
+
+/**
+ * 删除 Cookie
+ * @param name Cookie 名称
+ */
+export function deleteCookie(name: string): void {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}

src/webui/FE/utils/passwordHash.ts

@@ -0,0 +1,32 @@
+/**
+ * 密码哈希工具
+ * 使用 SHA-256 对密码进行哈希处理
+ */
+
+/**
+ * 将字符串转换为 SHA-256 哈希
+ * @param message 要哈希的字符串
+ * @returns 十六进制格式的哈希值
+ */
+export async function sha256(message: string): Promise<string> {
+  // 将字符串编码为 UTF-8
+  const msgBuffer = new TextEncoder().encode(message);
+  
+  // 计算哈希
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
+  
+  // 转换为十六进制字符串
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+  
+  return hashHex;
+}
+
+/**
+ * 对密码进行哈希处理
+ * @param password 明文密码
+ * @returns 哈希后的密码
+ */
+export async function hashPassword(password: string): Promise<string> {
+  return await sha256(password);
+}