diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index e920e7c9ecc160f3e1871268be1b2830b38f39c8..97caa82bf061a400804438eee02556d8f1cc24e4 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@@ -32,7 +32,7 @@ const LayoutTraffic = () => {
     if (!clashInfo) return;
 
     const { server = "", secret = "" } = clashInfo;
-    connect(`ws://${server}/traffic?token=${secret}`);
+    connect(`ws://${server}/traffic?token=${encodeURIComponent(secret)}`);
 
     return () => {
       disconnect();
diff --git a/src/components/layout/use-log-setup.ts b/src/components/layout/use-log-setup.ts
index 8dde19d163329d182213abc3edeb686d7ae472f4..0c130ac9e85df1e9b0b61d2e850fb6682cce3c16 100644
--- a/src/components/layout/use-log-setup.ts
+++ b/src/components/layout/use-log-setup.ts
@@ -30,7 +30,7 @@ export const useLogSetup = () => {
     getClashLogs().then(setLogData);
 
     const { server = "", secret = "" } = clashInfo;
-    connect(`ws://${server}/logs?token=${secret}`);
+    connect(`ws://${server}/logs?token=${encodeURIComponent(secret)}`);
 
     return () => {
       disconnect();