fix(wrangler): preserve request ports with --host flag (#13745)

Author: edmundhung

.changeset/tiny-ducks-look.md

@@ -0,0 +1,5 @@
+---
+"wrangler": patch
+---
+
+fix: preserve request ports in `Origin` and `Referer` headers when using `wrangler dev --host`

packages/wrangler/src/__tests__/api/startDevWorker/LocalRuntimeController.test.ts

@@ -10,7 +10,10 @@ import { fetch } from "undici";
 import { assert, describe, it } from "vitest";
 import WebSocket from "ws";
 import { createPostgresEchoHandler } from "../../../../e2e/helpers/postgres-echo-handler";
-import { LocalRuntimeController } from "../../../api/startDevWorker/LocalRuntimeController";
+import {
+	getUserWorkerInnerUrlOverrides,
+	LocalRuntimeController,
+} from "../../../api/startDevWorker/LocalRuntimeController";
 import { urlFromParts } from "../../../api/startDevWorker/utils";
 import { RuleTypeToModuleType } from "../../../deployment-bundle/module-collection";
 import { usingLocalSecretsStoreSecretAPI } from "../../../secrets-store/commands";
@@ -136,6 +139,48 @@ describe("LocalRuntimeController", () => {
 	// Make sure teardown is declared after runInTempDir so it runs before we delete the temp directory
 	const teardown = useTeardown();
 
+	describe("getUserWorkerInnerUrlOverrides", () => {
+		it("parses host and port when origin hostname includes a port", ({
+			expect,
+		}) => {
+			expect(
+				getUserWorkerInnerUrlOverrides({
+					dev: {
+						persist: "./persist",
+						origin: {
+							hostname: "localhost:4000",
+							secure: false,
+						},
+					},
+				})
+			).toEqual({
+				protocol: "http:",
+				hostname: "localhost",
+				port: "4000",
+			});
+		});
+
+		it("clears the local dev port when origin hostname does not include one", ({
+			expect,
+		}) => {
+			expect(
+				getUserWorkerInnerUrlOverrides({
+					dev: {
+						persist: "./persist",
+						origin: {
+							hostname: "www.example.com",
+							secure: false,
+						},
+					},
+				})
+			).toEqual({
+				protocol: "http:",
+				hostname: "www.example.com",
+				port: "",
+			});
+		});
+	});
+
 	describe("Core", () => {
 		it("should start Miniflare with module worker", async ({ expect }) => {
 			const bus = new FakeBus();

packages/wrangler/src/api/startDevWorker/LocalRuntimeController.ts

@@ -45,6 +45,30 @@ function getName(config: StartDevWorkerOptions) {
 	return config.name;
 }
 
+export function getUserWorkerInnerUrlOverrides(
+	config: Pick<StartDevWorkerOptions, "dev">
+) {
+	const protocol = config.dev?.origin?.secure ? "https:" : "http:";
+	const host = config.dev?.origin?.hostname;
+	if (!host) {
+		return { protocol };
+	}
+
+	try {
+		const parsedHost = new URL(`http://${host}`);
+		return {
+			protocol,
+			hostname: parsedHost.hostname,
+			port: parsedHost.port,
+		};
+	} catch {
+		return {
+			protocol,
+			hostname: host,
+		};
+	}
+}
+
 export async function convertToConfigBundle(
 	event: BundleCompleteEvent
 ): Promise<MF.ConfigBundle> {
@@ -350,11 +374,9 @@ export class LocalRuntimeController extends RuntimeController {
 								},
 							}
 						: {}),
-					userWorkerInnerUrlOverrides: {
-						protocol: data.config?.dev?.origin?.secure ? "https:" : "http:",
-						hostname: data.config?.dev?.origin?.hostname,
-						port: data.config?.dev?.origin?.hostname ? "" : undefined,
-					},
+					userWorkerInnerUrlOverrides: getUserWorkerInnerUrlOverrides(
+						data.config
+					),
 					headers: {
 						// Passing this signature from Proxy Worker allows the User Worker to trust the request.
 						"MF-Proxy-Shared-Secret":

packages/wrangler/src/api/startDevWorker/MultiworkerRuntimeController.ts

@@ -10,6 +10,7 @@ import { castErrorCause } from "./events";
 import {
 	convertToConfigBundle,
 	getContainerDevOptions,
+	getUserWorkerInnerUrlOverrides,
 	LocalRuntimeController,
 } from "./LocalRuntimeController";
 import type { RemoteProxySession } from "../remoteBindings";
@@ -238,11 +239,9 @@ export class MultiworkerRuntimeController extends LocalRuntimeController {
 							port: userWorkerInspectorUrl.port,
 							pathname: `/core:user:${data.config.name}`,
 						},
-						userWorkerInnerUrlOverrides: {
-							protocol: data.config?.dev?.origin?.secure ? "https:" : "http:",
-							hostname: data.config?.dev?.origin?.hostname,
-							port: data.config?.dev?.origin?.hostname ? "" : undefined,
-						},
+						userWorkerInnerUrlOverrides: getUserWorkerInnerUrlOverrides(
+							data.config
+						),
 						headers: {
 							// Passing this signature from Proxy Worker allows the User Worker to trust the request.
 							"MF-Proxy-Shared-Secret":