fix: ensure that the Pages dev proxy server does not change the Host …

…header

Previously, when configuring `wrangler pages dev` to use a proxy to a 3rd party dev server,
the proxy would replace the Host header, resulting in problems at the dev server if it was
checking for cross-site scripting attacks.

Now the proxy server passes through the Host header unaltered making it invisible to the
3rd party dev server.

Fixes #4799

.changeset/orange-emus-mate.md

@@ -0,0 +1,14 @@
+---
+"wrangler": patch
+---
+
+fix: ensure that the Pages dev proxy server does not change the Host header
+
+Previously, when configuring `wrangler pages dev` to use a proxy to a 3rd party dev server,
+the proxy would replace the Host header, resulting in problems at the dev server if it was
+checking for cross-site scripting attacks.
+
+Now the proxy server passes through the Host header unaltered making it invisible to the
+3rd party dev server.
+
+Fixes #4799

fixtures/pages-proxy-app/package.json

@@ -0,0 +1,25 @@
+{
+	"name": "pages-proxy-app",
+	"version": "0.1.2",
+	"private": true,
+	"sideEffects": false,
+	"main": "server/index.js",
+	"scripts": {
+		"build": "esbuild --bundle --platform=node server/index.ts --outfile=dist/index.js",
+		"check:type": "tsc",
+		"dev": "npx wrangler pages dev --compatibility-date=2024-01-17 --port 8790 --proxy 8791 -- pnpm run server",
+		"server": "node dist/index.js",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"type:tests": "tsc -p ./tests/tsconfig.json"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"miniflare": "workspace:*",
+		"undici": "^5.28.2",
+		"wrangler": "workspace:*"
+	},
+	"engines": {
+		"node": ">=14"
+	}
+}

fixtures/pages-proxy-app/server/index.ts

@@ -0,0 +1,10 @@
+import { createServer } from "http";
+
+const server = createServer();
+
+server.on("request", (req, res) => {
+	res.write("Host:" + req.headers.host);
+	res.end();
+});
+
+server.listen(8791);

fixtures/pages-proxy-app/tests/index.test.ts

@@ -0,0 +1,34 @@
+import { fork } from "node:child_process";
+import { resolve } from "node:path";
+import { fetch } from "undici";
+import { afterAll, beforeAll, describe, it } from "vitest";
+import { runWranglerPagesDev } from "../../shared/src/run-wrangler-long-lived";
+import type { ChildProcess } from "node:child_process";
+
+describe("pages-proxy-app", async () => {
+	let ip: string, port: number, stop: (() => Promise<unknown>) | undefined;
+	let devServer: ChildProcess;
+
+	beforeAll(async () => {
+		devServer = fork(resolve(__dirname, "../dist/index.js"), {
+			stdio: "ignore",
+		});
+
+		({ ip, port, stop } = await runWranglerPagesDev(
+			resolve(__dirname, ".."),
+			undefined,
+			["--port=0", "--inspector-port=0", "--proxy=8791"]
+		));
+	});
+
+	afterAll(async () => {
+		await stop?.();
+		devServer.kill();
+	});
+
+	it("receives the correct Host header", async ({ expect }) => {
+		const response = await fetch(`http://${ip}:${port}/`);
+		const text = await response.text();
+		expect(text).toContain(`Host:localhost:${port}`);
+	});
+});

fixtures/pages-proxy-app/tests/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
+	"compilerOptions": {
+		"types": ["node"]
+	},
+	"include": ["**/*.ts", "../../../node-types.d.ts"]
+}

fixtures/pages-proxy-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"include": ["server"],
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "CommonJS",
+		"lib": ["ES2020"],
+		"types": ["node"],
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"noEmit": true,
+		"skipLibCheck": true
+	}
+}

fixtures/pages-proxy-app/turbo.json

@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"pipeline": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}

fixtures/pages-proxy-app/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineProject, mergeConfig } from "vitest/config";
+import configShared from "../../vitest.shared";
+
+export default mergeConfig(
+	configShared,
+	defineProject({
+		test: {},
+	})
+);

fixtures/shared/src/run-wrangler-long-lived.ts

@@ -16,10 +16,14 @@ export const wranglerEntryPath = path.resolve(
  */
 export async function runWranglerPagesDev(
 	cwd: string,
-	publicPath: string,
+	publicPath: string | undefined,
 	options: string[]
 ) {
-	return runLongLivedWrangler(["pages", "dev", publicPath, ...options], cwd);
+	if (publicPath) {
+		return runLongLivedWrangler(["pages", "dev", publicPath, ...options], cwd);
+	} else {
+		return runLongLivedWrangler(["pages", "dev", ...options], cwd);
+	}
 }
 
 /**

packages/wrangler/src/miniflare-cli/assets.ts

@@ -1,3 +1,4 @@
+import assert from "node:assert";
 import { existsSync, lstatSync, readFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { createMetadataObject } from "@cloudflare/pages-shared/metadata-generator/createMetadataObject";
@@ -6,6 +7,7 @@ import { parseRedirects } from "@cloudflare/pages-shared/metadata-generator/pars
 import { watch } from "chokidar";
 import { getType } from "mime";
 import { fetch, Request, Response } from "miniflare";
+import { Agent, Dispatcher } from "undici";
 import { hashFile } from "../pages/hash";
 import type { Logger } from "../logger";
 import type { Metadata } from "@cloudflare/pages-shared/asset-server/metadata";
@@ -38,7 +40,9 @@ export default async function generateASSETSBinding(options: Options) {
 					proxyRequest.headers.delete("Sec-WebSocket-Accept");
 					proxyRequest.headers.delete("Sec-WebSocket-Key");
 				}
-				return await fetch(proxyRequest);
+				return await fetch(proxyRequest, {
+					dispatcher: new ProxyDispatcher(miniflareRequest.headers.get("Host")),
+				});
 			} catch (thrown) {
 				options.log.error(new Error(`Could not proxy request: ${thrown}`));
 
@@ -63,6 +67,43 @@ export default async function generateASSETSBinding(options: Options) {
 	};
 }
 
+/**
+ * An Undici custom Dispatcher that is used for the fetch requests
+ * of the Pages dev server proxy.
+ *
+ * Notably, this dispatcher will reinstate the Host header that is
+ * removed by the `fetch` machinery. This is removed as a security
+ * precaution, which is not relevant for this Proxy.
+ */
+class ProxyDispatcher extends Agent {
+	constructor(private host: string | null) {
+		super();
+	}
+
+	dispatch(
+		options: Agent.DispatchOptions,
+		handler: Dispatcher.DispatchHandlers
+	): boolean {
+		if (this.host) {
+			const headers = options.headers;
+			assert(headers, "Expected all proxied requests to contain headers.");
+			if (Array.isArray(headers)) {
+				assert(
+					headers.every(
+						(h) => h !== "Host",
+						"Expected Host header to have been deleted."
+					)
+				);
+				headers.push("Host", this.host);
+			} else if (headers) {
+				assert(!headers["Host"], "Expected Host header to have been deleted.");
+				headers["Host"] = this.host;
+			}
+		}
+		return super.dispatch(options, handler);
+	}
+}
+
 async function generateAssetsFetch(
 	directory: string,
 	log: Logger