Remove host/port params, construct WebSocket URL from /json request (#39394)

Summary:
Pull Request resolved: #39394

* Constructs DevTools frontend WebSocket URLs with a client-accessible host, port and scheme derived from the initiating HTTP request (`/json` or `/open-debugger`), instead of from the static `host` and `port` parameters provided to `createDevMiddleware`. This results in more proxy-safe behaviour.
* Removes the now-unused `host` and `port` parameters from `createDevMiddleware`.

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D49158227

fbshipit-source-id: ec61d98458e5d5afba4eb937b84ff65071495cc9

Author: motiz88

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -113,8 +113,6 @@ async function runServer(
     watchFolders,
   });
   const {middleware, websocketEndpoints} = createDevMiddleware({
-    host,
-    port,
     projectRoot,
     logger,
     unstable_experiments: {

packages/dev-middleware/README.md

@@ -15,8 +15,6 @@ function myDevServerImpl(args) {
   ...
 
   const {middleware, websocketEndpoints} = createDevMiddleware({
-    host: args.host,
-    port: metroConfig.server.port,
     projectRoot: metroConfig.projectRoot,
     logger,
   });

packages/dev-middleware/src/createDevMiddleware.js

@@ -25,8 +25,6 @@ import InspectorProxy from './inspector-proxy/InspectorProxy';
 import DefaultBrowserLauncher from './utils/DefaultBrowserLauncher';
 
 type Options = $ReadOnly<{
-  host: string,
-  port: number,
   projectRoot: string,
   logger?: Logger,
   unstable_browserLauncher?: BrowserLauncher,
@@ -40,8 +38,6 @@ type DevMiddlewareAPI = $ReadOnly<{
 }>;
 
 export default function createDevMiddleware({
-  host,
-  port,
   projectRoot,
   logger,
   unstable_browserLauncher = DefaultBrowserLauncher,
@@ -76,9 +72,7 @@ export default function createDevMiddleware({
 
   return {
     middleware,
-    websocketEndpoints: inspectorProxy.createWebSocketListeners(
-      `${host}:${port}`,
-    ),
+    websocketEndpoints: inspectorProxy.createWebSocketListeners(),
   };
 }
 

packages/dev-middleware/src/inspector-proxy/InspectorProxy.js

@@ -22,6 +22,7 @@ import type {IncomingMessage, ServerResponse} from 'http';
 import url from 'url';
 import WS from 'ws';
 import Device from './Device';
+import getDevServerUrl from '../utils/getDevServerUrl';
 
 const debug = require('debug')('Metro:InspectorProxy');
 
@@ -46,11 +47,6 @@ export default class InspectorProxy {
   // Internal counter for device IDs -- just gets incremented for each new device.
   _deviceCounter: number = 0;
 
-  // We store server's address with port (like '127.0.0.1:8081') to be able to build URLs
-  // (devtoolsFrontendUrl and webSocketDebuggerUrl) for page descriptions. These URLs are used
-  // by debugger to know where to connect.
-  _serverBaseUrl: string = '';
-
   _eventReporter: ?EventReporter;
 
   _experiments: Experiments;
@@ -79,14 +75,20 @@ export default class InspectorProxy {
       request.url === PAGES_LIST_JSON_URL ||
       request.url === PAGES_LIST_JSON_URL_2
     ) {
+      const wsPublicBaseUrl = getDevServerUrl(request, 'public', 'ws');
       // Build list of pages from all devices.
       let result: Array<PageDescription> = [];
       Array.from(this._devices.entries()).forEach(([deviceId, device]) => {
         result = result.concat(
           device
             .getPagesList()
             .map((page: Page) =>
-              this._buildPageDescription(deviceId, device, page),
+              this._buildPageDescription(
+                deviceId,
+                device,
+                page,
+                wsPublicBaseUrl,
+              ),
             ),
         );
       });
@@ -102,11 +104,9 @@ export default class InspectorProxy {
     }
   }
 
-  createWebSocketListeners(devServerBaseUrl: string): {
+  createWebSocketListeners(): {
     [path: string]: WS.Server,
   } {
-    this._serverBaseUrl = devServerBaseUrl;
-
     return {
       [WS_DEVICE_URL]: this._createDeviceConnectionWSServer(),
       [WS_DEBUGGER_URL]: this._createDebuggerConnectionWSServer(),
@@ -119,16 +119,22 @@ export default class InspectorProxy {
     deviceId: string,
     device: Device,
     page: Page,
+    wsServerBaseUrl: string,
   ): PageDescription {
-    const debuggerUrl = `${this._serverBaseUrl}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`;
-    const webSocketDebuggerUrl = 'ws://' + debuggerUrl;
+    const webSocketDebuggerUrl = `${wsServerBaseUrl}${WS_DEBUGGER_URL}?device=${deviceId}&page=${page.id}`;
 
+    const isSecure = webSocketDebuggerUrl.startsWith('wss://');
+    const webSocketUrlWithoutProtocol = webSocketDebuggerUrl.replace(
+      /^wss?:\/\//,
+      '',
+    );
+    const scheme = isSecure ? 'wss' : 'ws';
     // For now, `/json/list` returns the legacy built-in `devtools://` URL, to
     // preserve existing handling by Flipper. This may return a placeholder in
     // future -- please use the `/open-debugger` endpoint.
     const devtoolsFrontendUrl =
-      'devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=' +
-      encodeURIComponent(webSocketDebuggerUrl);
+      `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&${scheme}=` +
+      encodeURIComponent(webSocketUrlWithoutProtocol);
 
     return {
       id: `${deviceId}-${page.id}`,

packages/dev-middleware/src/utils/getDevServerUrl.js

@@ -27,19 +27,31 @@ export default function getDevServerUrl(
    * 'local' for for a URL accessible from the machine running the dev server.
    */
   kind: 'public' | 'local',
+
+  /**
+   * If 'ws', returns a WebSocket URL corresponding to the current server,
+   * with the appropriate scheme (ws or wss) for HTTP / HTTPS connections.
+   */
+  protocolType: 'http' | 'ws' = 'http',
 ): string {
   if (kind === 'public') {
     const host = getHost(req);
     if (host != null) {
-      const scheme = getProto(req);
+      let scheme = getProto(req);
+      if (protocolType === 'ws') {
+        scheme = httpSchemeToWsScheme(scheme);
+      }
       return `${scheme}://${host}`;
     }
     // If we can't determine a public URL, fall back to a local URL, which *might* still work.
   }
-  const scheme =
+  let scheme =
     req.socket instanceof TLSSocket && req.socket.encrypted === true
       ? 'https'
       : 'http';
+  if (protocolType === 'ws') {
+    scheme = httpSchemeToWsScheme(scheme);
+  }
   const {localAddress, localPort} = req.socket;
   const address =
     localAddress && net.isIPv6(localAddress)
@@ -48,3 +60,14 @@ export default function getDevServerUrl(
 
   return `${scheme}://${address}:${localPort}`;
 }
+
+function httpSchemeToWsScheme(scheme: string) {
+  switch (scheme) {
+    case 'https':
+      return 'wss';
+    case 'http':
+      return 'ws';
+    default:
+      throw new Error(`Expected http or https but received ${scheme}`);
+  }
+}

packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js

@@ -28,13 +28,20 @@ export default function getDevToolsFrontendUrl(
   devServerUrl: string,
   experiments: Experiments,
 ): string {
-  const ws = webSocketDebuggerUrl.replace(/^ws:\/\//, '');
+  const isSecure = webSocketDebuggerUrl.startsWith('wss://');
+  const webSocketUrlWithoutProtocol = webSocketDebuggerUrl.replace(
+    /^wss?:\/\//,
+    '',
+  );
+  const scheme = isSecure ? 'wss' : 'ws';
   if (experiments.enableCustomDebuggerFrontend) {
     const urlBase = `${devServerUrl}/debugger-frontend/rn_inspector.html`;
-    return `${urlBase}?ws=${encodeURIComponent(
-      ws,
+    return `${urlBase}?${scheme}=${encodeURIComponent(
+      webSocketUrlWithoutProtocol,
     )}&sources.hide_add_folder=true`;
   }
   const urlBase = `https://chrome-devtools-frontend.appspot.com/serve_rev/@${DEVTOOLS_FRONTEND_REV}/devtools_app.html`;
-  return `${urlBase}?panel=console&ws=${encodeURIComponent(ws)}`;
+  return `${urlBase}?panel=console&${scheme}=${encodeURIComponent(
+    webSocketUrlWithoutProtocol,
+  )}`;
 }