Browse Source

fix(frontend): guard the outbounds WebSocket handler against non-array payloads

onOutbounds wrote the raw WebSocket payload straight into the
outboundsTraffic cache, unlike the sibling onNodes/onInbounds handlers which
first check Array.isArray. A malformed non-array push (for example an object)
would land in the cache with staleTime Infinity; consumers that call
.find()/.map() on the outbounds list would then throw and crash the Outbounds
tab. Add the same Array.isArray guard so a bad push is ignored.
MHSanaei 1 day ago
parent
commit
d2ba6c9fc2

+ 1 - 0
frontend/src/api/websocketBridge.ts

@@ -31,6 +31,7 @@ export function useWebSocketBridge() {
     };
 
     const onOutbounds: Handler = (payload) => {
+      if (!Array.isArray(payload)) return;
       queryClient.setQueryData(keys.xray.outboundsTraffic(), payload);
     };
 

+ 51 - 0
frontend/src/test/websocket-bridge-outbounds.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+import { getSharedWebSocketClient } from '@/api/websocket';
+import { useWebSocketBridge } from '@/api/websocketBridge';
+import { keys } from '@/api/queryKeys';
+
+type ListenerMap = { listeners: Map<string, Set<(payload: unknown) => void>> };
+
+describe('websocket bridge outbounds handler', () => {
+  let originalWS: typeof WebSocket;
+
+  beforeEach(() => {
+    originalWS = globalThis.WebSocket;
+    class FakeWebSocket {
+      static readonly CONNECTING = 0;
+      static readonly OPEN = 1;
+      static readonly CLOSING = 2;
+      static readonly CLOSED = 3;
+      readyState = FakeWebSocket.CONNECTING;
+      addEventListener() {}
+      removeEventListener() {}
+      close() {}
+      send() {}
+    }
+    globalThis.WebSocket = FakeWebSocket as unknown as typeof WebSocket;
+  });
+
+  afterEach(() => {
+    globalThis.WebSocket = originalWS;
+  });
+
+  it('ignores a non-array outbounds push instead of poisoning the cache', () => {
+    const queryClient = new QueryClient();
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+
+    renderHook(() => useWebSocketBridge(), { wrapper });
+
+    const client = getSharedWebSocketClient() as unknown as ListenerMap;
+    const handlers = client.listeners.get('outbounds');
+    expect(handlers && handlers.size).toBeGreaterThan(0);
+
+    for (const handler of handlers ?? []) handler({ not: 'an array' });
+
+    expect(queryClient.getQueryData(keys.xray.outboundsTraffic())).toBeUndefined();
+  });
+});