fix: handle `--allowed-hosts all" correctly (#3720)

Author: anshumanv

lib/Server.js

@@ -190,19 +190,24 @@ class Server {
     };
 
     if (typeof options.allowedHosts === "undefined") {
-      // allowedHosts allows some default hosts picked from
-      // `options.host` or `webSocketURL.hostname` and `localhost`
+      // AllowedHosts allows some default hosts picked from `options.host` or `webSocketURL.hostname` and `localhost`
       options.allowedHosts = "auto";
     }
-
-    if (
+    // We store allowedHosts as array when supplied as string
+    else if (
       typeof options.allowedHosts === "string" &&
       options.allowedHosts !== "auto" &&
       options.allowedHosts !== "all"
     ) {
-      // we store allowedHosts as array when supplied as string
       options.allowedHosts = [options.allowedHosts];
     }
+    // CLI pass options as array, we should normalize them
+    else if (
+      Array.isArray(this.options.allowedHosts) &&
+      this.options.allowedHosts.includes("all")
+    ) {
+      options.allowedHosts = "all";
+    }
 
     if (typeof options.bonjour === "undefined") {
       options.bonjour = false;

test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4

@@ -66,6 +66,28 @@ Array [
 
 exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value ("ws"): page errors 1`] = `Array []`;
 
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("ws"): page errors 1`] = `Array []`;
+
 exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the custom hostname value ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",

test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5

@@ -66,6 +66,28 @@ Array [
 
 exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value ("ws"): page errors 1`] = `Array []`;
 
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the "all" value in array ("ws"): page errors 1`] = `Array []`;
+
 exports[`allowed hosts should connect web socket client using custom hostname to web socket server with the custom hostname value ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",

test/e2e/allowed-hosts.test.js

@@ -456,6 +456,82 @@ describe("allowed hosts", () => {
       await server.stop();
     });
 
+    it(`should connect web socket client using custom hostname to web socket server with the "all" value in array ("${webSocketServer}")`, async () => {
+      const devServerHost = "127.0.0.1";
+      const devServerPort = port1;
+      const proxyHost = devServerHost;
+      const proxyPort = port2;
+
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            port: port2,
+          },
+        },
+        webSocketServer,
+        port: devServerPort,
+        host: devServerHost,
+        allowedHosts: ["all"],
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await server.start();
+
+      function startProxy(callback) {
+        const app = express();
+
+        app.use(
+          "/",
+          createProxyMiddleware({
+            // Emulation
+            onProxyReqWs: (proxyReq) => {
+              proxyReq.setHeader("origin", "http://my-test-origin.com/");
+            },
+            target: `http://${devServerHost}:${devServerPort}`,
+            ws: true,
+            changeOrigin: true,
+            logLevel: "warn",
+          })
+        );
+
+        return app.listen(proxyPort, proxyHost, callback);
+      }
+
+      const proxy = await new Promise((resolve) => {
+        const proxyCreated = startProxy(() => {
+          resolve(proxyCreated);
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      const pageErrors = [];
+      const consoleMessages = [];
+
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+      expect(pageErrors).toMatchSnapshot("page errors");
+
+      proxy.close();
+
+      await browser.close();
+      await server.stop();
+    });
+
     it(`should connect web socket client using custom hostname to web socket server with the custom hostname value ("${webSocketServer}")`, async () => {
       const devServerHost = "127.0.0.1";
       const devServerPort = port1;

test/server/__snapshots__/Server.test.js.snap.webpack4

@@ -58,9 +58,7 @@ exports[`Server Server.getFreePort should throws the error when the port isn't f
 
 exports[`Server normalizeOptions allowedHosts is array 1`] = `
 Object {
-  "allowedHosts": Array [
-    "all",
-  ],
+  "allowedHosts": "all",
   "bonjour": false,
   "client": Object {
     "logging": "info",

test/server/__snapshots__/Server.test.js.snap.webpack5

@@ -58,9 +58,7 @@ exports[`Server Server.getFreePort should throws the error when the port isn't f
 
 exports[`Server normalizeOptions allowedHosts is array 1`] = `
 Object {
-  "allowedHosts": Array [
-    "all",
-  ],
+  "allowedHosts": "all",
   "bonjour": false,
   "client": Object {
     "logging": "info",