feat: make allowedHosts accept localhost subdomains by default

jdufresne · jdufresne · commit f51ff8c231a2 · 2022-03-27T14:11:24.000-07:00
Use Case:

Some web applications will serve multiple domains and render different
content depending on the incoming header. In a development environment,
these applications may use localhost subdomains to simulate these
alternative domains.

To reduce overall configuration, make the webpack-dev-server allow
"localhost" as well as its subdomains. As "localhost" is already
considered safe and convenient, the same can be said of its subdomains.

Available Workaround:

Without this feature, developing a multi-domain application requires
configuring webpack-dev-server with:

    allowedHosts: ".localhost"
diff --git a/lib/Server.js b/lib/Server.js
@@ -2944,12 +2944,14 @@ class Server {
     // an IPv6-address in URLs,
     // these are removed from the hostname in url.parse(),
     // so we have the pure IPv6-address in hostname.
-    // always allow localhost host, for convenience (hostname === 'localhost')
+    // For convenience, always allow localhost (hostname === 'localhost')
+    // and its subdomains (hostname.endsWith(".localhost")).
     // allow hostname of listening address  (hostname === this.options.host)
     const isValidHostname =
       (hostname !== null && ipaddr.IPv4.isValid(hostname)) ||
       (hostname !== null && ipaddr.IPv6.isValid(hostname)) ||
       hostname === "localhost" ||
+      (hostname !== null && hostname.endsWith(".localhost")) ||
       hostname === this.options.host;
 
     if (isValidHostname) {
diff --git a/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4 b/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4
@@ -18,6 +18,12 @@ exports[`allowed hosts check host headers should always allow \`localhost\` if o
 
 exports[`allowed hosts check host headers should always allow \`localhost\` if options.allowedHosts is auto: response status 1`] = `200`;
 
+exports[`allowed hosts check host headers should always allow \`localhost\` subdomain if options.allowedHosts is auto: console messages 1`] = `Array []`;
+
+exports[`allowed hosts check host headers should always allow \`localhost\` subdomain if options.allowedHosts is auto: page errors 1`] = `Array []`;
+
+exports[`allowed hosts check host headers should always allow \`localhost\` subdomain if options.allowedHosts is auto: response status 1`] = `200`;
+
 exports[`allowed hosts check host headers should always allow any host if options.allowedHosts is all: console messages 1`] = `Array []`;
 
 exports[`allowed hosts check host headers should always allow any host if options.allowedHosts is all: page errors 1`] = `Array []`;
diff --git a/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5 b/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
@@ -18,6 +18,12 @@ exports[`allowed hosts check host headers should always allow \`localhost\` if o
 
 exports[`allowed hosts check host headers should always allow \`localhost\` if options.allowedHosts is auto: response status 1`] = `200`;
 
+exports[`allowed hosts check host headers should always allow \`localhost\` subdomain if options.allowedHosts is auto: console messages 1`] = `Array []`;
+
+exports[`allowed hosts check host headers should always allow \`localhost\` subdomain if options.allowedHosts is auto: page errors 1`] = `Array []`;
+
+exports[`allowed hosts check host headers should always allow \`localhost\` subdomain if options.allowedHosts is auto: response status 1`] = `200`;
+
 exports[`allowed hosts check host headers should always allow any host if options.allowedHosts is all: console messages 1`] = `Array []`;
 
 exports[`allowed hosts check host headers should always allow any host if options.allowedHosts is all: page errors 1`] = `Array []`;
diff --git a/test/e2e/allowed-hosts.test.js b/test/e2e/allowed-hosts.test.js
@@ -1209,6 +1209,47 @@ describe("allowed hosts", () => {
       expect(pageErrors).toMatchSnapshot("page errors");
     });
 
+    it("should always allow `localhost` subdomain if options.allowedHosts is auto", async () => {
+      const options = {
+        allowedHosts: "auto",
+        port: port1,
+      };
+
+      const headers = {
+        host: "app.localhost",
+      };
+
+      server = new Server(options, compiler);
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://127.0.0.1:${port1}/main.js`, {
+        waitUntil: "networkidle0",
+      });
+
+      if (!server.checkHeader(headers, "host")) {
+        throw new Error("Validation didn't fail");
+      }
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages"
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    });
+
     it("should always allow value from the `host` options if options.allowedHosts is auto", async () => {
       const networkIP = Server.internalIPSync("v4");
       const options = {
