Mask api key for api key page(protect from screenshot etc)

sdcb · sdcb · commit 2a1c7d00f361 · 2025-11-27T18:58:47.000+08:00
diff --git a/src/FE/components/settings/tabs/ApiKeysTab.tsx b/src/FE/components/settings/tabs/ApiKeysTab.tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 
 import useTranslation from '@/hooks/useTranslation';
 
-import { getApiUrl } from '@/utils/common';
+import { getApiUrl, maskApiKey } from '@/utils/common';
 import { formatDate } from '@/utils/date';
 
 import { UsageSource } from '@/types/chat';
@@ -151,7 +151,7 @@ const ApiKeysTab = () => {
                       className="max-w-[180px] truncate cursor-pointer text-blue-600 hover:underline"
                       onClick={() => viewApiKeyUsage(x.id)}
                     >
-                      {x.key}
+                      {maskApiKey(x.key)}
                     </span>
                     <CopyButton value={x.key} />
                   </div>
@@ -220,7 +220,7 @@ const ApiKeysTab = () => {
                           className="overflow-hidden text-ellipsis whitespace-nowrap text-blue-600 hover:underline cursor-pointer"
                           onClick={() => viewApiKeyUsage(x.id)}
                         >
-                          {x.key}
+                          {maskApiKey(x.key)}
                         </div>
                         <CopyButton value={x.key} />
                       </div>
diff --git a/src/FE/utils/common.ts b/src/FE/utils/common.ts
@@ -80,3 +80,24 @@ export function resolveTheme(theme?: string): 'dark' | 'light' {
   }
   return theme === 'dark' ? 'dark' : 'light';
 }
+
+/**
+ * 遮蔽API密钥，显示前缀和后缀，隐藏中间部分
+ * @param key API密钥
+ * @param prefixLength 前缀长度，默认6
+ * @param suffixLength 后缀长度，默认4
+ * @returns 遮蔽后的密钥，例如 "sk-abc1***xyz9"
+ */
+export function maskApiKey(
+  key: string,
+  prefixLength: number = 6,
+  suffixLength: number = 4,
+): string {
+  if (!key) return '';
+  if (key.length <= prefixLength + suffixLength) {
+    return key;
+  }
+  const prefix = key.slice(0, prefixLength);
+  const suffix = key.slice(-suffixLength);
+  return `${prefix}***${suffix}`;
+}
