feat: replace sampleID with secure key generator for Clash API secret

Author: Ayideyia

frontend/src/constant/profile.ts

@@ -1,5 +1,5 @@
 import i18n from '@/lang'
-import { sampleID } from '@/utils'
+import { generateSecureKey, sampleID } from '@/utils'
 import { DefaultTestURL } from './app'
 import {
   LogLevel,
@@ -60,7 +60,7 @@ export const DefaultExperimental = (): IExperimental => ({
     external_ui: '',
     external_ui_download_url: '',
     external_ui_download_detour: DefaultOutboundIds.Direct,
-    secret: sampleID(),
+    secret: generateSecureKey(),
     default_mode: ClashMode.Rule,
     access_control_allow_origin: ['*'],
     access_control_allow_private_network: false,

frontend/src/utils/others.ts

@@ -57,6 +57,15 @@ export const ignoredError = async <T>(fn: (...args: any) => Promise<T>, ...args:
 
 export const sampleID = () => 'ID_' + Math.random().toString(36).substring(2, 10)
 
+export const generateSecureKey = (bits = 256) => {
+  const bytes = bits / 8
+  const array = new Uint8Array(bytes)
+  crypto.getRandomValues(array)
+  return Array.from(array)
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+}
+
 export const getValue = (obj: Record<string, any>, expr: string) => {
   return expr.split('.').reduce((value, key) => {
     return value[key]

frontend/src/views/ProfilesView/components/GeneralConfig.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 
 import { useBool } from '@/hooks'
+import { generateSecureKey } from '@/utils'
 import { ModeOptions, LogLevelOptions } from '@/constant/kernel'
 
 interface Props {
@@ -48,7 +49,15 @@ const [showMore, toggleMore] = useBool(false)
     </div>
     <div class="form-item">
       {{ t('kernel.clash_api.secret') }}
-      <Input v-model="model.experimental.clash_api.secret" editable />
+      <div class="flex items-center">
+        <Input v-model="model.experimental.clash_api.secret" editable />
+        <Button
+          @click="() => (model.experimental.clash_api.secret = generateSecureKey())"
+          type="text"
+          size="small"
+          icon="refresh"
+        />
+      </div>
     </div>
     <Divider>
       <Button @click="toggleMore" type="text" size="small">{{ t('common.more') }}</Button>