diff --git a/.changeset/tall-radios-report.md b/.changeset/tall-radios-report.md new file mode 100644 index 00000000000..f75a5fef43c --- /dev/null +++ b/.changeset/tall-radios-report.md @@ -0,0 +1,13 @@ +--- +"wrangler": patch +--- + +fix: use node http instead of faye-websocket in proxy server + +We change how websockets are handled in the proxy server, fixing multiple issues of websocket behaviour, particularly to do with headers. + +In particular this fixes: + +- the protocol passed between the client and the worker was being stripped out by wrangler +- wrangler was discarding additional headesr from websocket upgrade response +- websocket close code and reason was not being propagated by wrangler diff --git a/package-lock.json b/package-lock.json index ac92be922bd..c55df1e58f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8412,17 +8412,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/faye-websocket": { - "version": "0.11.4", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "websocket-driver": ">=0.5.1" - }, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/fb-watchman": { "version": "2.0.1", "license": "Apache-2.0", @@ -9269,11 +9258,6 @@ "node": ">= 0.8" } }, - "node_modules/http-parser-js": { - "version": "0.5.5", - "dev": true, - "license": "MIT" - }, "node_modules/http-proxy-agent": { "version": "4.0.1", "dev": true, @@ -21352,27 +21336,6 @@ "node": ">=0.10.0" } }, - "node_modules/websocket-driver": { - "version": "0.7.4", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "http-parser-js": ">=0.5.1", - "safe-buffer": ">=5.1.0", - "websocket-extensions": ">=0.1.1" - }, - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/websocket-extensions": { - "version": "0.1.4", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/whatwg-encoding": { "version": "1.0.5", "dev": true, @@ -21920,7 +21883,6 @@ "dotenv": "^16.0.0", "execa": "^6.1.0", "express": "^4.18.1", - "faye-websocket": "^0.11.4", "finalhandler": "^1.2.0", "find-up": "^6.3.0", "get-port": "^6.1.2", @@ -28774,13 +28736,6 @@ "format": "^0.2.0" } }, - "faye-websocket": { - "version": "0.11.4", - "dev": true, - "requires": { - "websocket-driver": ">=0.5.1" - } - }, "fb-watchman": { "version": "2.0.1", "requires": { @@ -29329,10 +29284,6 @@ "toidentifier": "1.0.1" } }, - "http-parser-js": { - "version": "0.5.5", - "dev": true - }, "http-proxy-agent": { "version": "4.0.1", "dev": true, @@ -37217,19 +37168,6 @@ } } }, - "websocket-driver": { - "version": "0.7.4", - "dev": true, - "requires": { - "http-parser-js": ">=0.5.1", - "safe-buffer": ">=5.1.0", - "websocket-extensions": ">=0.1.1" - } - }, - "websocket-extensions": { - "version": "0.1.4", - "dev": true - }, "whatwg-encoding": { "version": "1.0.5", "dev": true, @@ -37370,7 +37308,6 @@ "esbuild": "0.14.51", "execa": "^6.1.0", "express": "^4.18.1", - "faye-websocket": "^0.11.4", "finalhandler": "^1.2.0", "find-up": "^6.3.0", "fsevents": "~2.3.2", diff --git a/packages/wrangler/package.json b/packages/wrangler/package.json index 52438b43da2..074a13a3d4a 100644 --- a/packages/wrangler/package.json +++ b/packages/wrangler/package.json @@ -139,7 +139,6 @@ "dotenv": "^16.0.0", "execa": "^6.1.0", "express": "^4.18.1", - "faye-websocket": "^0.11.4", "finalhandler": "^1.2.0", "find-up": "^6.3.0", "get-port": "^6.1.2", diff --git a/packages/wrangler/src/faye-websocket.d.ts b/packages/wrangler/src/faye-websocket.d.ts deleted file mode 100644 index d6e5e009152..00000000000 --- a/packages/wrangler/src/faye-websocket.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -module "faye-websocket" { - /** - * Standards-compliant WebSocket client and server. - */ - export default WebSocket; -} diff --git a/packages/wrangler/src/proxy.ts b/packages/wrangler/src/proxy.ts index bc71aaa7856..49d41b2b1f2 100644 --- a/packages/wrangler/src/proxy.ts +++ b/packages/wrangler/src/proxy.ts @@ -1,8 +1,8 @@ import { createServer as createHttpServer } from "node:http"; import { connect } from "node:http2"; import { createServer as createHttpsServer } from "node:https"; +import https from "node:https"; import { networkInterfaces } from "node:os"; -import WebSocket from "faye-websocket"; import { createHttpTerminator } from "http-terminator"; import { useEffect, useRef, useState } from "react"; import serveStatic from "serve-static"; @@ -19,12 +19,7 @@ import type { } from "node:http"; import type { ClientHttp2Session, ServerHttp2Stream } from "node:http2"; import type { Server as HttpsServer } from "node:https"; -import type ws from "ws"; - -interface IWebsocket extends ws { - // Pipe implements .on("message", ...) - pipe(fn: T): IWebsocket; -} +import type { Duplex, Writable } from "node:stream"; /** * `usePreviewServer` is a React hook that creates a local development @@ -70,6 +65,26 @@ function rewriteRemoteHostToLocalHostInHeaders( } } +function writeHead( + socket: Writable, + res: Pick< + IncomingMessage, + "httpVersion" | "statusCode" | "statusMessage" | "headers" + > +) { + socket.write( + `HTTP/${res.httpVersion} ${res.statusCode} ${res.statusMessage}\r\n` + ); + for (const [key, values] of Object.entries(res.headers)) { + if (Array.isArray(values)) { + for (const value of values) socket.write(`${key}: ${value}\r\n`); + } else { + socket.write(`${key}: ${values}\r\n`); + } + } + socket.write("\r\n"); +} + type PreviewProxy = { server: HttpServer | HttpsServer; terminator: HttpTerminator; @@ -273,27 +288,47 @@ export function usePreviewServer({ /** HTTP/1 -> WebSocket (over HTTP/1) */ const handleUpgrade = ( - message: IncomingMessage, - socket: WebSocket, - body: Buffer + originalMessage: IncomingMessage, + originalSocket: Duplex, + originalHead: Buffer ) => { - const { headers, url } = message; + const { headers, method, url } = originalMessage; addCfPreviewTokenHeader(headers, previewToken.value); headers["host"] = previewToken.host; - const localWebsocket = new WebSocket(message, socket, body) as IWebsocket; - // TODO(soon): Custom WebSocket protocol is not working? - const remoteWebsocketClient = new WebSocket.Client( - `wss://${previewToken.host}${url}`, - [], - { headers } - ) as IWebsocket; - localWebsocket.pipe(remoteWebsocketClient).pipe(localWebsocket); - // We close down websockets whenever we refresh the token. - cleanupListeners.push(() => { - localWebsocket.close(); - remoteWebsocketClient.close(); - }); + + if (originalHead?.byteLength) originalSocket.unshift(originalHead); + + const runtimeRequest = https.request( + { + hostname: previewToken.host, + path: url, + method, + headers, + }, + (runtimeResponse) => { + if (!(runtimeResponse as { upgrade?: boolean }).upgrade) { + writeHead(originalSocket, runtimeResponse); + runtimeResponse.pipe(originalSocket); + } + } + ); + + runtimeRequest.on( + "upgrade", + (runtimeResponse, runtimeSocket, runtimeHead) => { + if (runtimeHead?.byteLength) runtimeSocket.unshift(runtimeHead); + writeHead(originalSocket, { + httpVersion: "1.1", + statusCode: 101, + statusMessage: "Switching Protocols", + headers: runtimeResponse.headers, + }); + runtimeSocket.pipe(originalSocket).pipe(runtimeSocket); + } + ); + originalMessage.pipe(runtimeRequest); }; + proxy.server.on("upgrade", handleUpgrade); cleanupListeners.push(() => proxy.server.off("upgrade", handleUpgrade));