webpack-dev-server 5.1.0 → 5.2.1

package/lib/Server.js

@@ -307,6 +307,8 @@ function useFn(route, fn) {
   return /** @type {BasicApplication} */ ({});
 }
 
+const DEFAULT_ALLOWED_PROTOCOLS = /^(file|.+-extension):/i;
+
 /**
  * @typedef {Object} BasicApplication
  * @property {typeof useFn} use
@@ -404,6 +406,7 @@ class Server {
       let host;
 
       const networks = Object.values(os.networkInterfaces())
+        // eslint-disable-next-line no-shadow
         .flatMap((networks) => networks ?? [])
         .filter((network) => {
           if (!network || !network.address) {
@@ -436,8 +439,9 @@ class Server {
           return network.address;
         });
 
-      for (const network of networks) {
-        host = network.address;
+      if (networks.length > 0) {
+        // Take the first network found
+        host = networks[0].address;
 
         if (host.includes(":")) {
           host = `[${host}]`;
@@ -793,15 +797,12 @@ class Server {
         webSocketURLStr = searchParams.toString();
       }
 
-      additionalEntries.push(
-        `${require.resolve("../client/index.js")}?${webSocketURLStr}`,
-      );
+      additionalEntries.push(`${this.getClientEntry()}?${webSocketURLStr}`);
     }
 
-    if (this.options.hot === "only") {
-      additionalEntries.push(require.resolve("webpack/hot/only-dev-server"));
-    } else if (this.options.hot) {
-      additionalEntries.push(require.resolve("webpack/hot/dev-server"));
+    const clientHotEntry = this.getClientHotEntry();
+    if (clientHotEntry) {
+      additionalEntries.push(clientHotEntry);
     }
 
     const webpack = compiler.webpack || require("webpack");
@@ -1676,6 +1677,25 @@ class Server {
     return implementation;
   }
 
+  /**
+   * @returns {string}
+   */
+  // eslint-disable-next-line class-methods-use-this
+  getClientEntry() {
+    return require.resolve("../client/index.js");
+  }
+
+  /**
+   * @returns {string | void}
+   */
+  getClientHotEntry() {
+    if (this.options.hot === "only") {
+      return require.resolve("webpack/hot/only-dev-server");
+    } else if (this.options.hot) {
+      return require.resolve("webpack/hot/dev-server");
+    }
+  }
+
   /**
    * @private
    * @returns {void}
@@ -1943,7 +1963,7 @@ class Server {
           (req.headers);
         const headerName = headers[":authority"] ? ":authority" : "host";
 
-        if (this.checkHeader(headers, headerName)) {
+        if (this.isValidHost(headers, headerName)) {
           next();
           return;
         }
@@ -1953,6 +1973,32 @@ class Server {
       },
     });
 
+    // Register setup cross origin request check for security
+    middlewares.push({
+      name: "cross-origin-header-check",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        const headers =
+          /** @type {{ [key: string]: string | undefined }} */
+          (req.headers);
+        if (
+          headers["sec-fetch-mode"] === "no-cors" &&
+          headers["sec-fetch-site"] === "cross-site"
+        ) {
+          res.statusCode = 403;
+          res.end("Cross-Origin request blocked");
+          return;
+        }
+
+        next();
+      },
+    });
+
     const isHTTP2 =
       /** @type {ServerConfiguration<A, S>} */ (this.options.server).type ===
       "http2";
@@ -2624,8 +2670,9 @@ class Server {
 
         if (
           !headers ||
-          !this.checkHeader(headers, "host") ||
-          !this.checkHeader(headers, "origin")
+          !this.isValidHost(headers, "host") ||
+          !this.isValidHost(headers, "origin") ||
+          !this.isSameOrigin(headers)
         ) {
           this.sendMessage([client], "error", "Invalid Host/Origin header");
 
@@ -2659,7 +2706,8 @@ class Server {
 
         if (
           this.options.client &&
-          /** @type {ClientConfiguration} */ (this.options.client).reconnect
+          /** @type {ClientConfiguration} */
+          (this.options.client).reconnect
         ) {
           this.sendMessage(
             [client],
@@ -2674,9 +2722,9 @@ class Server {
           /** @type {ClientConfiguration} */
           (this.options.client).overlay
         ) {
-          const overlayConfig = /** @type {ClientConfiguration} */ (
-            this.options.client
-          ).overlay;
+          const overlayConfig =
+            /** @type {ClientConfiguration} */
+            (this.options.client).overlay;
 
           this.sendMessage(
             [client],
@@ -3062,40 +3110,105 @@ class Server {
 
   /**
    * @private
-   * @param {{ [key: string]: string | undefined }} headers
-   * @param {string} headerToCheck
+   * @param {string} value
    * @returns {boolean}
    */
-  checkHeader(headers, headerToCheck) {
+  isHostAllowed(value) {
+    const { allowedHosts } = this.options;
+
     // allow user to opt out of this security check, at their own risk
     // by explicitly enabling allowedHosts
+    if (allowedHosts === "all") {
+      return true;
+    }
+
+    // always allow localhost host, for convenience
+    // allow if value is in allowedHosts
+    if (Array.isArray(allowedHosts) && allowedHosts.length > 0) {
+      for (let hostIdx = 0; hostIdx < allowedHosts.length; hostIdx++) {
+        /** @type {string} */
+        const allowedHost = allowedHosts[hostIdx];
+
+        if (allowedHost === value) {
+          return true;
+        }
+
+        // support "." as a subdomain wildcard
+        // e.g. ".example.com" will allow "example.com", "www.example.com", "subdomain.example.com", etc
+        if (allowedHost[0] === ".") {
+          // "example.com"  (value === allowedHost.substring(1))
+          // "*.example.com"  (value.endsWith(allowedHost))
+          if (
+            value === allowedHost.substring(1) ||
+            /** @type {string} */
+            (value).endsWith(allowedHost)
+          ) {
+            return true;
+          }
+        }
+      }
+    }
+
+    // Also allow if `client.webSocketURL.hostname` provided
+    if (
+      this.options.client &&
+      typeof (
+        /** @type {ClientConfiguration} */
+        (this.options.client).webSocketURL
+      ) !== "undefined"
+    ) {
+      return (
+        /** @type {WebSocketURL} */
+        (/** @type {ClientConfiguration} */ (this.options.client).webSocketURL)
+          .hostname === value
+      );
+    }
+
+    return false;
+  }
+
+  /**
+   * @private
+   * @param {{ [key: string]: string | undefined }} headers
+   * @param {string} headerToCheck
+   * @returns {boolean}
+   */
+  isValidHost(headers, headerToCheck) {
     if (this.options.allowedHosts === "all") {
       return true;
     }
 
     // get the Host header and extract hostname
     // we don't care about port not matching
-    const hostHeader = headers[headerToCheck];
+    const header = headers[headerToCheck];
 
-    if (!hostHeader) {
+    if (!header) {
       return false;
     }
 
-    if (/^(file|.+-extension):/i.test(hostHeader)) {
+    if (DEFAULT_ALLOWED_PROTOCOLS.test(header)) {
       return true;
     }
 
     // use the node url-parser to retrieve the hostname from the host-header.
     const hostname = url.parse(
-      // if hostHeader doesn't have scheme, add // for parsing.
-      /^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`,
+      // if header doesn't have scheme, add // for parsing.
+      /^(.+:)?\/\//.test(header) ? header : `//${header}`,
       false,
       true,
     ).hostname;
 
+    if (hostname === null) {
+      return false;
+    }
+
+    if (this.isHostAllowed(hostname)) {
+      return true;
+    }
+
     // always allow requests with explicit IPv4 or IPv6-address.
     // A note on IPv6 addresses:
-    // hostHeader will always contain the brackets denoting
+    // header will always contain the brackets denoting
     // an IPv6-address in URLs,
     // these are removed from the hostname in url.parse(),
     // so we have the pure IPv6-address in hostname.
@@ -3103,60 +3216,76 @@ class Server {
     // 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)) ||
+      ipaddr.IPv4.isValid(hostname) ||
+      ipaddr.IPv6.isValid(hostname) ||
       hostname === "localhost" ||
-      (hostname !== null && hostname.endsWith(".localhost")) ||
+      hostname.endsWith(".localhost") ||
       hostname === this.options.host;
 
     if (isValidHostname) {
       return true;
     }
 
-    const { allowedHosts } = this.options;
+    // disallow
+    return false;
+  }
 
-    // always allow localhost host, for convenience
-    // allow if hostname is in allowedHosts
-    if (Array.isArray(allowedHosts) && allowedHosts.length > 0) {
-      for (let hostIdx = 0; hostIdx < allowedHosts.length; hostIdx++) {
-        /** @type {string} */
-        const allowedHost = allowedHosts[hostIdx];
+  /**
+   * @private
+   * @param {{ [key: string]: string | undefined }} headers
+   * @returns {boolean}
+   */
+  isSameOrigin(headers) {
+    if (this.options.allowedHosts === "all") {
+      return true;
+    }
 
-        if (allowedHost === hostname) {
-          return true;
-        }
+    const originHeader = headers.origin;
 
-        // support "." as a subdomain wildcard
-        // e.g. ".example.com" will allow "example.com", "www.example.com", "subdomain.example.com", etc
-        if (allowedHost[0] === ".") {
-          // "example.com"  (hostname === allowedHost.substring(1))
-          // "*.example.com"  (hostname.endsWith(allowedHost))
-          if (
-            hostname === allowedHost.substring(1) ||
-            /** @type {string} */ (hostname).endsWith(allowedHost)
-          ) {
-            return true;
-          }
-        }
-      }
+    if (!originHeader) {
+      return this.options.allowedHosts === "all";
     }
 
-    // Also allow if `client.webSocketURL.hostname` provided
-    if (
-      this.options.client &&
-      typeof (
-        /** @type {ClientConfiguration} */ (this.options.client).webSocketURL
-      ) !== "undefined"
-    ) {
-      return (
-        /** @type {WebSocketURL} */
-        (/** @type {ClientConfiguration} */ (this.options.client).webSocketURL)
-          .hostname === hostname
-      );
+    if (DEFAULT_ALLOWED_PROTOCOLS.test(originHeader)) {
+      return true;
     }
 
-    // disallow
-    return false;
+    const origin = url.parse(originHeader, false, true).hostname;
+
+    if (origin === null) {
+      return false;
+    }
+
+    if (this.isHostAllowed(origin)) {
+      return true;
+    }
+
+    const hostHeader = headers.host;
+
+    if (!hostHeader) {
+      return this.options.allowedHosts === "all";
+    }
+
+    if (DEFAULT_ALLOWED_PROTOCOLS.test(hostHeader)) {
+      return true;
+    }
+
+    const host = url.parse(
+      // if hostHeader doesn't have scheme, add // for parsing.
+      /^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`,
+      false,
+      true,
+    ).hostname;
+
+    if (host === null) {
+      return false;
+    }
+
+    if (this.isHostAllowed(host)) {
+      return true;
+    }
+
+    return origin === host;
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "5.1.0",
+  "version": "5.2.1",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",
@@ -49,6 +49,7 @@
     "@types/bonjour": "^3.5.13",
     "@types/connect-history-api-fallback": "^1.5.4",
     "@types/express": "^4.17.21",
+    "@types/express-serve-static-core": "^4.17.21",
     "@types/serve-index": "^1.9.4",
     "@types/serve-static": "^1.15.5",
     "@types/sockjs": "^0.3.36",
@@ -59,10 +60,9 @@
     "colorette": "^2.0.10",
     "compression": "^1.7.4",
     "connect-history-api-fallback": "^2.0.0",
-    "express": "^4.19.2",
+    "express": "^4.21.2",
     "graceful-fs": "^4.2.6",
-    "html-entities": "^2.4.0",
-    "http-proxy-middleware": "^2.0.3",
+    "http-proxy-middleware": "^2.0.7",
     "ipaddr.js": "^2.1.0",
     "launch-editor": "^2.6.1",
     "open": "^10.0.3",
@@ -76,38 +76,38 @@
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
-    "@babel/plugin-transform-object-assign": "^7.24.7",
-    "@babel/plugin-transform-runtime": "^7.25.4",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/runtime": "^7.25.6",
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
-    "@hono/node-server": "^1.12.2",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.25.9",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-transform-object-assign": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/runtime": "^7.25.9",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@hono/node-server": "^1.13.3",
     "@types/compression": "^1.7.2",
-    "@types/node": "^22.5.2",
+    "@types/node": "^22.8.4",
     "@types/node-forge": "^1.3.1",
     "@types/sockjs-client": "^1.5.1",
     "@types/trusted-types": "^2.0.2",
-    "acorn": "^8.9.0",
+    "acorn": "^8.14.0",
     "babel-jest": "^29.5.0",
-    "babel-loader": "^9.1.0",
+    "babel-loader": "^9.2.1",
     "body-parser": "^1.19.2",
     "connect": "^3.7.0",
     "core-js": "^3.38.1",
-    "cspell": "^8.14.2",
+    "cspell": "^8.15.5",
     "css-loader": "^7.1.1",
-    "eslint": "^8.43.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-webpack": "^1.2.5",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "execa": "^5.1.1",
-    "hono": "^4.5.11",
-    "html-webpack-plugin": "^5.5.3",
+    "hono": "^4.6.8",
+    "html-webpack-plugin": "^5.6.3",
     "http-proxy": "^1.18.1",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "klona": "^2.0.4",
@@ -115,10 +115,10 @@
     "less-loader": "^12.1.0",
     "lint-staged": "^15.2.10",
     "marked": "^12.0.0",
-    "memfs": "^4.6.0",
+    "memfs": "^4.14.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.4",
-    "puppeteer": "^23.2.2",
+    "puppeteer": "^23.6.1",
     "readable-stream": "^4.5.2",
     "require-from-string": "^2.0.2",
     "rimraf": "^5.0.5",
@@ -128,7 +128,7 @@
     "style-loader": "^4.0.0",
     "supertest": "^7.0.0",
     "tcp-port-used": "^1.0.2",
-    "typescript": "^5.5.4",
+    "typescript": "^5.7.2",
     "wait-for-expect": "^3.0.2",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.0.1",

package/types/lib/Server.d.ts

@@ -1134,7 +1134,7 @@ declare class Server<
    */
   static findIp(
     gatewayOrFamily: string,
-    isInternal?: boolean | undefined,
+    isInternal?: boolean,
   ): string | undefined;
   /**
    * @param {"v4" | "v6"} family
@@ -1230,6 +1230,14 @@ declare class Server<
    * @returns {T}
    */
   private getServerTransport;
+  /**
+   * @returns {string}
+   */
+  getClientEntry(): string;
+  /**
+   * @returns {string | void}
+   */
+  getClientHotEntry(): string | void;
   /**
    * @private
    * @returns {void}
@@ -1339,13 +1347,25 @@ declare class Server<
    * @param {NextFunction} next
    */
   private setHeaders;
+  /**
+   * @private
+   * @param {string} value
+   * @returns {boolean}
+   */
+  private isHostAllowed;
   /**
    * @private
    * @param {{ [key: string]: string | undefined }} headers
    * @param {string} headerToCheck
    * @returns {boolean}
    */
-  private checkHeader;
+  private isValidHost;
+  /**
+   * @private
+   * @param {{ [key: string]: string | undefined }} headers
+   * @returns {boolean}
+   */
+  private isSameOrigin;
   /**
    * @param {ClientConnection[]} clients
    * @param {string} type
@@ -1369,16 +1389,11 @@ declare class Server<
    * @param {string | string[]} watchPath
    * @param {WatchOptions} [watchOptions]
    */
-  watchFiles(
-    watchPath: string | string[],
-    watchOptions?: import("chokidar").WatchOptions | undefined,
-  ): void;
+  watchFiles(watchPath: string | string[], watchOptions?: WatchOptions): void;
   /**
    * @param {import("webpack-dev-middleware").Callback} [callback]
    */
-  invalidate(
-    callback?: import("webpack-dev-middleware").Callback | undefined,
-  ): void;
+  invalidate(callback?: import("webpack-dev-middleware").Callback): void;
   /**
    * @returns {Promise<void>}
    */
@@ -1386,7 +1401,7 @@ declare class Server<
   /**
    * @param {(err?: Error) => void} [callback]
    */
-  startCallback(callback?: ((err?: Error) => void) | undefined): void;
+  startCallback(callback?: (err?: Error) => void): void;
   /**
    * @returns {Promise<void>}
    */
@@ -1394,7 +1409,7 @@ declare class Server<
   /**
    * @param {(err?: Error) => void} [callback]
    */
-  stopCallback(callback?: ((err?: Error) => void) | undefined): void;
+  stopCallback(callback?: (err?: Error) => void): void;
 }
 declare namespace Server {
   export {

package/client/overlay/fsm.js

@@ -1,64 +0,0 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/**
- * @typedef {Object} StateDefinitions
- * @property {{[event: string]: { target: string; actions?: Array<string> }}} [on]
- */
-
-/**
- * @typedef {Object} Options
- * @property {{[state: string]: StateDefinitions}} states
- * @property {object} context;
- * @property {string} initial
- */
-
-/**
- * @typedef {Object} Implementation
- * @property {{[actionName: string]: (ctx: object, event: any) => object}} actions
- */
-
-/**
- * A simplified `createMachine` from `@xstate/fsm` with the following differences:
- *
- *  - the returned machine is technically a "service". No `interpret(machine).start()` is needed.
- *  - the state definition only support `on` and target must be declared with { target: 'nextState', actions: [] } explicitly.
- *  - event passed to `send` must be an object with `type` property.
- *  - actions implementation will be [assign action](https://xstate.js.org/docs/guides/context.html#assign-action) if you return any value.
- *  Do not return anything if you just want to invoke side effect.
- *
- * The goal of this custom function is to avoid installing the entire `'xstate/fsm'` package, while enabling modeling using
- * state machine. You can copy the first parameter into the editor at https://stately.ai/viz to visualize the state machine.
- *
- * @param {Options} options
- * @param {Implementation} implementation
- */
-function createMachine(_ref, _ref2) {
-  var states = _ref.states,
-    context = _ref.context,
-    initial = _ref.initial;
-  var actions = _ref2.actions;
-  var currentState = initial;
-  var currentContext = context;
-  return {
-    send: function send(event) {
-      var currentStateOn = states[currentState].on;
-      var transitionConfig = currentStateOn && currentStateOn[event.type];
-      if (transitionConfig) {
-        currentState = transitionConfig.target;
-        if (transitionConfig.actions) {
-          transitionConfig.actions.forEach(function (actName) {
-            var actionImpl = actions[actName];
-            var nextContextValue = actionImpl && actionImpl(currentContext, event);
-            if (nextContextValue) {
-              currentContext = _objectSpread(_objectSpread({}, currentContext), nextContextValue);
-            }
-          });
-        }
-      }
-    }
-  };
-}
-export default createMachine;

package/client/overlay/runtime-error.js

@@ -1,47 +0,0 @@
-/**
- *
- * @param {Error} error
- */
-function parseErrorToStacks(error) {
-  if (!error || !(error instanceof Error)) {
-    throw new Error("parseErrorToStacks expects Error object");
-  }
-  if (typeof error.stack === "string") {
-    return error.stack.split("\n").filter(function (stack) {
-      return stack !== "Error: ".concat(error.message);
-    });
-  }
-}
-
-/**
- * @callback ErrorCallback
- * @param {ErrorEvent} error
- * @returns {void}
- */
-
-/**
- * @param {ErrorCallback} callback
- */
-function listenToRuntimeError(callback) {
-  window.addEventListener("error", callback);
-  return function cleanup() {
-    window.removeEventListener("error", callback);
-  };
-}
-
-/**
- * @callback UnhandledRejectionCallback
- * @param {PromiseRejectionEvent} rejectionEvent
- * @returns {void}
- */
-
-/**
- * @param {UnhandledRejectionCallback} callback
- */
-function listenToUnhandledRejection(callback) {
-  window.addEventListener("unhandledrejection", callback);
-  return function cleanup() {
-    window.removeEventListener("unhandledrejection", callback);
-  };
-}
-export { listenToRuntimeError, listenToUnhandledRejection, parseErrorToStacks };