fix: reject cross-site requests to open-editor and invalidate endpoints

Author: bjohansebas

.changeset/csrf-protect-state-changing-routes.md

@@ -0,0 +1,5 @@
+---
+"webpack-dev-server": patch
+---
+
+Protect the built-in state-changing routes (`/webpack-dev-server/invalidate` and `/webpack-dev-server/open-editor`) against cross-site request forgery. Requests are now checked with `Sec-Fetch-Site` (falling back to an `Origin`/`Host` comparison when it is absent), so a cross-site page can no longer trigger a rebuild or open a file in the editor. Same-origin requests, user-initiated navigations, and non-browser clients (e.g. curl) are unaffected.

lib/Server.js

@@ -2166,6 +2166,12 @@ class Server {
           return;
         }
 
+        if (!this.#isSameOriginRequest(req)) {
+          res.statusCode = 403;
+          res.end("Cross-Origin request blocked");
+          return;
+        }
+
         this.invalidate();
 
         res.end();
@@ -2187,6 +2193,12 @@ class Server {
           return;
         }
 
+        if (!this.#isSameOriginRequest(req)) {
+          res.statusCode = 403;
+          res.end("Cross-Origin request blocked");
+          return;
+        }
+
         if (!req.url) {
           next();
           return;
@@ -3390,6 +3402,36 @@ class Server {
     return origin === host;
   }
 
+  /**
+   * Determines whether a request was initiated from the dev server's own
+   * origin, to reject cross-site request forgery on state-changing endpoints.
+   * @param {Request} req request
+   * @returns {boolean} true when the request can be trusted as same-origin
+   */
+  #isSameOriginRequest(req) {
+    const headers =
+      /** @type {{ [key: string]: string | undefined }} */
+      (req.headers);
+
+    const secFetchSite = headers["sec-fetch-site"];
+
+    // Prefer `Sec-Fetch-Site`: browsers send it even for same-origin GET
+    // `fetch`es (which omit `Origin`), and a cross-site page cannot forge it.
+    // `none` is a user-initiated navigation.
+    if (typeof secFetchSite === "string") {
+      return secFetchSite === "same-origin" || secFetchSite === "none";
+    }
+
+    // Without `Sec-Fetch-*` metadata (non-browser/legacy clients): a request
+    // with no `Origin` header was not initiated by another origin's script;
+    // otherwise fall back to the `Origin`/`Host` comparison.
+    if (typeof headers.origin !== "string") {
+      return true;
+    }
+
+    return this.isSameOrigin(headers);
+  }
+
   /**
    * @param {ClientConnection[]} clients clients
    * @param {string} type type

package-lock.json

@@ -62,7 +62,7 @@
     "graceful-fs": "^4.2.6",
     "http-proxy-middleware": "^2.0.9",
     "ipaddr.js": "^2.1.0",
-    "launch-editor": "^2.6.1",
+    "launch-editor": "^2.14.1",
     "open": "^10.0.3",
     "p-retry": "^6.2.0",
     "schema-utils": "^4.2.0",

package.json

@@ -372,3 +372,94 @@ describe("cross-origin resource policy header", () => {
     expect(res.headers["cross-origin-resource-policy"]).toBeUndefined();
   });
 });
+
+describe("cross-site request forgery on state-changing endpoints", () => {
+  const devServerPort = port1;
+
+  let server;
+
+  beforeEach(async () => {
+    const compiler = webpack(config);
+    server = new Server(
+      { port: devServerPort, allowedHosts: "auto" },
+      compiler,
+    );
+
+    await server.start();
+  });
+
+  afterEach(async () => {
+    if (server) {
+      await server.stop();
+      // Allow the port to be fully released before the next test
+      await new Promise((resolve) => {
+        setTimeout(resolve, 100);
+      });
+      server = null;
+    }
+  });
+
+  function request(path, headers = {}) {
+    const http = require("node:http");
+
+    return new Promise((resolve, reject) => {
+      const req = http.get(
+        `http://localhost:${devServerPort}${path}`,
+        { headers },
+        (res) => {
+          let body = "";
+          res.on("data", (chunk) => {
+            body += chunk;
+          });
+          res.on("end", () => {
+            resolve({ status: res.statusCode, body });
+          });
+        },
+      );
+      req.on("error", reject);
+    });
+  }
+
+  for (const endpoint of [
+    "/webpack-dev-server/invalidate",
+    "/webpack-dev-server/open-editor",
+  ]) {
+    it(`should block cross-site requests to ${endpoint}`, async () => {
+      const res = await request(endpoint, {
+        "sec-fetch-mode": "cors",
+        "sec-fetch-site": "cross-site",
+      });
+
+      expect(res.status).toBe(403);
+    });
+
+    it(`should allow same-origin requests to ${endpoint}`, async () => {
+      const res = await request(endpoint, {
+        "sec-fetch-mode": "cors",
+        "sec-fetch-site": "same-origin",
+      });
+
+      expect(res.status).toBe(200);
+    });
+
+    it(`should allow user-initiated navigations to ${endpoint}`, async () => {
+      const res = await request(endpoint, { "sec-fetch-site": "none" });
+
+      expect(res.status).toBe(200);
+    });
+  }
+
+  it("should block requests with a cross-origin Origin and no Sec-Fetch metadata", async () => {
+    const res = await request("/webpack-dev-server/invalidate", {
+      origin: "http://evil.example",
+    });
+
+    expect(res.status).toBe(403);
+  });
+
+  it("should allow requests without Sec-Fetch metadata or Origin (e.g. curl)", async () => {
+    const res = await request("/webpack-dev-server/invalidate");
+
+    expect(res.status).toBe(200);
+  });
+});

test/e2e/cross-origin-request.test.js

@@ -1428,6 +1428,7 @@ declare class Server<
    * @param {((err?: Error) => void)=} callback callback
    */
   stopCallback(callback?: ((err?: Error) => void) | undefined): void;
+  #private;
 }
 declare namespace Server {
   export {