@@ -5,3 +5,7 @@
 Add `allowedOrigins` to authorize cross-origin HTTP requests, HMR connections, and WebSocket proxies independently of `allowedHosts` and `client.webSocketURL`. Host configuration no longer disables origin protection, including when `allowedHosts` is `"all"`.
 
 Cross-origin frontends must now list their full HTTP(S) origin in `allowedOrigins`. Origins include the protocol and port; loopback hostnames are no longer interchangeable. Use CORS (`crossorigin="anonymous"` on script and image elements) so the server can identify the authorized page. The server supplies CORS headers for authorized origins, while Fetch Metadata and resource-policy checks continue to protect requests without `Origin`. Configuring `headers` alone no longer grants cross-origin access. `allowedOrigins: "all"` explicitly opts out of origin checks without disabling host validation.
+
+Set `output.crossOriginLoading: "anonymous"` for webpack-generated lazy chunks and hot-update scripts loaded across origins, and ensure `output.publicPath` resolves to the dev server. The initial script's `crossorigin` attribute does not configure those generated scripts.
+
+HMR on a separate port also accepts the origin of this dev server's HTTP(S) listener on the same hostname, using the actual bound port even with `port: 0`. This exception applies only to HMR; reverse proxies that change the public origin must still configure `allowedOrigins`.
@@ -7,6 +7,9 @@ authorize another origin.
 
 ```js
 export default {
+  output: {
+    crossOriginLoading: "anonymous",
+  },
   devServer: {
     allowedHosts: ["localhost"],
     allowedOrigins: ["http://localhost:3000"],
@@ -53,6 +56,12 @@ The CLI accepts repeated flags:
 npx webpack serve --allowed-origins http://localhost:3000 --allowed-origins https://app.example.com
 ```
 
+When HMR listens on a separate port, it also accepts the page served by this
+dev server's HTTP(S) listener on the same hostname. This uses the actual bound
+port, including with `port: 0`. It applies only to HMR connections; HTTP resources,
+WebSocket proxies, and state-changing endpoints keep their existing origin rules.
+Reverse proxies that change the public origin still need `allowedOrigins`.
+
 ## Migrating cross-origin setups
 
 Previously, an entry in `allowedHosts` or a custom `client.webSocketURL` could
@@ -71,6 +80,11 @@ the browser sends `Origin` and applies CORS:
 <script src="http://localhost:8080/main.js" crossorigin="anonymous"></script>
 ```
 
+Webpack-generated lazy chunks and hot-update scripts also need
+`output.crossOriginLoading: "anonymous"` so that the browser sends `Origin`.
+Adding `crossorigin` to the initial script does not configure these generated
+scripts. Their `output.publicPath` must also resolve to the dev server.
+
 A cross-origin `no-cors` request without `Origin` cannot be matched to an allowed
 page, even if it sends a referrer header. Fetch Metadata checks and
 `Cross-Origin-Resource-Policy: same-origin` continue to protect those requests.
 
@@ -3,6 +3,9 @@ import { setup } from "../util.js";
 export default setup(
   {
     entry: "./app.js",
+    output: {
+      crossOriginLoading: "anonymous",
+    },
     devServer: {
       allowedHosts: ["localhost"],
       allowedOrigins: ["http://localhost:3000"],
 
@@ -2755,7 +2755,7 @@ class Server {
         if (
           !headers ||
           !this.isValidHost(headers, "host") ||
-          (!isSameOriginStream && !this.isOriginAllowed(headers))
+          (!isSameOriginStream && !this.#isHotOriginAllowed(headers))
         ) {
           // Said to the client before it is closed, so the reason reaches the
           // page rather than only this server's log — a refusal that closes
@@ -3480,6 +3480,40 @@ class Server {
     );
   }
 
+  /**
+   * Authorize HMR from a page served by this server when the hot endpoint
+   * listens on a separate port, in addition to explicitly allowed origins.
+   * @param {{ [key: string]: string | undefined }} headers connection headers
+   * @returns {boolean} true when the page may connect to HMR
+   */
+  #isHotOriginAllowed(headers) {
+    if (this.isOriginAllowed(headers)) {
+      return true;
+    }
+
+    const origin = this.#parseOrigin(headers.origin);
+    const host = headers[":authority"] || headers.host;
+    const address = this.server?.address();
+
+    if (origin === null || !host || !address || typeof address === "string") {
+      return false;
+    }
+
+    const protocol = this.isTlsServer ? "https" : "http";
+    const hostOrigin = this.#parseOrigin(`${protocol}://${host}`);
+
+    if (hostOrigin === null) {
+      return false;
+    }
+
+    // Keep the request hostname and the HTTP listener's protocol. Its bound
+    // port also handles port: 0; proxy origins still require allowedOrigins.
+    const httpOrigin = new URL(hostOrigin);
+    httpOrigin.port = String(address.port);
+
+    return origin === httpOrigin.origin;
+  }
+
   /**
    * @param {string | undefined} value Origin header value
    * @returns {string | null} serialized HTTP(S) origin, or null if invalid
 
@@ -13,9 +13,9 @@ const [port, pagePort] = portsMap["allowed-origins"];
 const serverOrigin = `http://localhost:${port}`;
 const trustedOrigin = `http://127.0.0.1:${pagePort}`;
 
-async function connect(origin, headers = {}) {
+async function connect(origin, headers = {}, socketPort = port) {
   return new Promise((resolve, reject) => {
-    const client = new WebSocket(`ws://localhost:${port}/ws`, {
+    const client = new WebSocket(`ws://localhost:${socketPort}/ws`, {
       origin,
       headers,
     });
@@ -243,3 +243,83 @@ describe("explicit allowedOrigins", () => {
     }
   });
 });
+
+for (const listenPort of [port, `${port}`, "auto", 0]) {
+  describe(`HMR on a separate port with HTTP port ${JSON.stringify(listenPort)}`, () => {
+    let server;
+    let httpOrigin;
+
+    before(async () => {
+      server = new Server(
+        {
+          host: "localhost",
+          port: listenPort,
+          webSocketServer: {
+            type: "ws",
+            options: { host: "localhost", port: pagePort },
+          },
+        },
+        webpack(config),
+      );
+      await server.start();
+      await new Promise((resolve) => {
+        server.middleware.waitUntilValid(resolve);
+      });
+      httpOrigin = `http://localhost:${server.server.address().port}`;
+    });
+
+    after(async () => {
+      await server.stop();
+    });
+
+    it("should allow the bound HTTP origin without allowedOrigins", async () => {
+      expect((await connect(httpOrigin, {}, pagePort)).action).toBe("sync");
+    });
+
+    it("should reject other hosts, protocols, and ports", async () => {
+      for (const origin of [
+        httpOrigin.replace("localhost", "127.0.0.1"),
+        httpOrigin.replace("http:", "https:"),
+        "http://localhost:1",
+        "http://localhost:0",
+        "http://192.168.1.2",
+        undefined,
+      ]) {
+        expect((await connect(origin, {}, pagePort)).action).toBe("error");
+      }
+    });
+
+    it("should still validate the HMR request Host", async () => {
+      expect(
+        (
+          await connect(
+            httpOrigin.replace("localhost", "evil.example.com"),
+            { host: `evil.example.com:${pagePort}` },
+            pagePort,
+          )
+        ).action,
+      ).toBe("error");
+    });
+
+    it("should keep HTTP and state-changing endpoints strict about ports", async () => {
+      for (const endpoint of [
+        "/main.js",
+        "/webpack-dev-server/invalidate",
+        "/webpack-dev-server/open-editor",
+      ]) {
+        await request(httpOrigin)
+          .get(endpoint)
+          .set("Host", `localhost:${pagePort}`)
+          .set("Origin", httpOrigin)
+          .expect(403);
+      }
+
+      expect(
+        server.isSameOrigin({
+          host: `localhost:${pagePort}`,
+          origin: httpOrigin,
+        }),
+      ).toBe(false);
+    });
+  });
+}
@@ -84,7 +84,7 @@ describe("proxied WebSocket upgrade origin validation", () => {
     fs.rmSync(tmp, { recursive: true, force: true });
   });
 
-  function upgrade(origin) {
+  function upgrade(origin, headers = {}) {
     return new Promise((resolve) => {
       const req = http.request({
         host: "localhost",
@@ -97,6 +97,7 @@ describe("proxied WebSocket upgrade origin validation", () => {
           "Sec-WebSocket-Key": "dGhlIHNhbXBsZSBub25jZQ==",
           "Sec-WebSocket-Version": "13",
           Origin: origin,
+          ...headers,
         },
       });
 
@@ -135,6 +136,15 @@ describe("proxied WebSocket upgrade origin validation", () => {
     expect(backendConnections).toBe(1);
   });
 
+  it("should not apply the separate HMR port exception to a proxy", async () => {
+    const result = await upgrade(`http://localhost:${devServerPort}`, {
+      Host: `localhost:${backendPort}`,
+    });
+
+    expect(result.status).toBe(403);
+    expect(backendConnections).toBe(0);
+  });
+
   for (const options of [
     { allowedHosts: ["localhost"] },
     { allowedHosts: "all" },
 
@@ -826,7 +826,6 @@ describe("web socket server URL", () => {
     it(`should work with "client.webSocketURL.port" and "webSocketServer.options.port" options as string ("${webSocketServer}")`, async (t) => {
       const compiler = webpack(config);
       const devServerOptions = {
-        allowedOrigins: [`http://127.0.0.1:${port1}`],
         webSocketServer: {
           type: webSocketServer,
           options: {