feat: implement dynamic WebSocket reverse-proxy for debug sessions in Vite

Author: ndorin

src/store/websocketMiddleware.ts

@@ -1,12 +1,12 @@
 import { Middleware } from "@reduxjs/toolkit";
 import {
-    connected,
-    disconnected,
-    messageReceived,
-    WS_CONNECT,
-    WS_DISCONNECT,
-    WsConnectAction,
-    WsDisconnectAction,
+  connected,
+  disconnected,
+  messageReceived,
+  WS_CONNECT,
+  WS_DISCONNECT,
+  WsConnectAction,
+  WsDisconnectAction,
 } from "./websocketSlice";
 
 export const websocketMiddleware: Middleware = (store) => {
@@ -23,29 +23,43 @@ export const websocketMiddleware: Middleware = (store) => {
         socket.close();
       }
 
-      socket = new WebSocket(url);
-
-      socket.onopen = () => {
-        store.dispatch(connected());
-      };
-
-      socket.onclose = () => {
-        store.dispatch(disconnected());
-        socket = null;
+      const initSocket = (effectiveUrl: string) => {
+        socket = new WebSocket(effectiveUrl);
+        socket.onopen = () => store.dispatch(connected());
+        socket.onclose = () => { store.dispatch(disconnected()); socket = null; };
+        socket.onerror = (err) => console.error('WebSocket error', err);
+        socket.onmessage = (event: MessageEvent<string>) => {
+          try {
+            store.dispatch(messageReceived(JSON.parse(event.data)));
+          } catch (e) {
+            console.error('Failed to parse WebSocket message', e);
+          }
+        };
       };
 
-      socket.onerror = (err) => {
-        console.error("WebSocket error", err);
-      };
-
-      socket.onmessage = (event: MessageEvent<string>) => {
-        try {
-          const msg = JSON.parse(event.data);
-          store.dispatch(messageReceived(msg));
-        } catch (e) {
-          console.error("Failed to parse WebSocket message", e);
-        }
-      };
+      if (import.meta.env.DEV) {
+        // In dev: register the dynamic port with Vite's proxy plugin so it can
+        // tunnel the connection, then connect via localhost (no cert issues).
+        fetch('/debug/ws-register', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ url }),
+        })
+          .then(() => {
+            const parsed = new URL(url);
+            const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            initSocket(`${proto}//${window.location.host}${parsed.pathname}${parsed.search}`);
+          })
+          .catch((err) => {
+            console.warn('[ws] Registration failed, connecting directly:', err);
+            initSocket(url);
+          });
+      } else {
+        // In production the app is served by the device itself, so the browser
+        // already trusts the device cert (TLS cert validation is per-hostname,
+        // not per-port) and can connect to the high-numbered port directly.
+        initSocket(url);
+      }
 
       return;
     }

vite.config.ts

@@ -1,7 +1,100 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig, loadEnv } from 'vite';
+import type { IncomingMessage } from 'node:http';
+import net from 'node:net';
+import tls from 'node:tls';
+import { defineConfig, loadEnv, Plugin } from 'vite';
 import svgr from 'vite-plugin-svgr';
 
+/**
+ * Vite-only plugin that creates a dynamic WebSocket reverse-proxy for the
+ * debug session endpoint. Because the backend picks a random port in the
+ * range 65435-65535 for each session, a static proxy target is not possible.
+ *
+ * Flow (dev only):
+ *   1. Browser calls POST /debug/ws-register with the wss:// URL returned by
+ *      the debugSession API, telling the plugin which host:port to tunnel to.
+ *   2. Browser dials ws://localhost:<vite-port>/debug/join (same origin, no
+ *      cert issues).
+ *   3. This plugin intercepts the WebSocket upgrade, opens a TLS tunnel to
+ *      the registered target, and splices the two sockets together.
+ */
+function dynamicWsProxyPlugin(): Plugin {
+  let registeredTarget: URL | null = null;
+
+  return {
+    name: 'dynamic-ws-proxy',
+    configureServer(server) {
+      // ── Registration endpoint ─────────────────────────────────────────────
+      server.middlewares.use('/debug/ws-register', (req, res) => {
+        if (req.method !== 'POST') {
+          res.statusCode = 405;
+          res.end();
+          return;
+        }
+        let body = '';
+        req.on('data', (chunk: Buffer) => (body += chunk.toString()));
+        req.on('end', () => {
+          try {
+            const { url } = JSON.parse(body) as { url: string };
+            registeredTarget = new URL(url);
+            res.statusCode = 200;
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({ ok: true }));
+          } catch {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: 'Invalid request body' }));
+          }
+        });
+      });
+
+      // ── Dynamic WebSocket tunnel ──────────────────────────────────────────
+      server.httpServer?.prependListener(
+        'upgrade',
+        (req: IncomingMessage, socket: any, head: Buffer) => {
+          if (!req.url?.startsWith('/debug/join') || !registeredTarget) return;
+
+          const target = registeredTarget;
+          const useSecure =
+            target.protocol === 'wss:' || target.protocol === 'https:';
+          const port = target.port
+            ? parseInt(target.port, 10)
+            : useSecure ? 443 : 80;
+
+          const upstream: net.Socket = useSecure
+            ? tls.connect({ host: target.hostname, port, rejectUnauthorized: false })
+            : net.createConnection({ host: target.hostname, port });
+
+          upstream.once(useSecure ? 'secureConnect' : 'connect', () => {
+            // Re-emit the full HTTP Upgrade request to the upstream server
+            const headerLines = [
+              `GET ${req.url} HTTP/1.1`,
+              `Host: ${target.host}`,
+              ...Object.entries(req.headers)
+                .filter(([k]) => k !== 'host')
+                .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : (v ?? '')}` ),
+              '',
+              '',
+            ];
+            upstream.write(headerLines.join('\r\n'));
+            if (head?.length) upstream.write(head);
+
+            socket.pipe(upstream);
+            upstream.pipe(socket);
+          });
+
+          upstream.on('error', (err: Error) => {
+            console.error('[dynamic-ws-proxy] upstream error:', err.message);
+            socket.destroy();
+          });
+          socket.on('error', () => upstream.destroy());
+          socket.on('close', () => upstream.destroy());
+          upstream.on('close', () => socket.destroy());
+        },
+      );
+    },
+  };
+}
+
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
 
@@ -12,7 +105,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     base: '/debug/',
-    plugins: [react(), svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named' } })],
+    plugins: [react(), svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named' } }), dynamicWsProxyPlugin()],
     server: {
       proxy: programHost
         ? {