Keep fetch-with-cors-proxy on HTTPS paths

Author: adamziel

packages/php-wasm/web/src/lib/fetch-with-cors-proxy.spec.ts

@@ -0,0 +1,42 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { fetchWithCorsProxy } from './fetch-with-cors-proxy';
+
+describe('fetchWithCorsProxy', () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it('upgrades plain HTTP requests to HTTPS before fetching directly', async () => {
+		const fetchMock = vi
+			.spyOn(globalThis, 'fetch')
+			.mockResolvedValue(new Response('ok'));
+
+		await fetchWithCorsProxy('http://example.com/resource.zip');
+
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+		const directRequest = fetchMock.mock.calls[0][0] as Request;
+		expect(directRequest.url).toBe('https://example.com/resource.zip');
+	});
+
+	it('upgrades HTTP URLs before retrying via the CORS proxy', async () => {
+		const fetchMock = vi
+			.spyOn(globalThis, 'fetch')
+			.mockRejectedValueOnce(new Error('network fail'))
+			.mockResolvedValueOnce(new Response('proxied'));
+
+		await fetchWithCorsProxy(
+			'http://example.com/wp-cron.php',
+			undefined,
+			'https://proxy.test/?url='
+		);
+
+		expect(fetchMock).toHaveBeenCalledTimes(2);
+		const initialRequest = fetchMock.mock.calls[0][0] as Request;
+		expect(initialRequest.url).toBe('https://example.com/wp-cron.php');
+
+		const proxiedRequest = fetchMock.mock.calls[1][0] as Request;
+		expect(proxiedRequest.url).toBe(
+			'https://proxy.test/?url=https://example.com/wp-cron.php'
+		);
+	});
+});

packages/php-wasm/web/src/lib/fetch-with-cors-proxy.ts

@@ -6,8 +6,18 @@ export async function fetchWithCorsProxy(
 	corsProxyUrl?: string,
 	playgroundUrl?: string
 ): Promise<Response> {
-	const requestObject =
+	let requestObject =
 		typeof input === 'string' ? new Request(input, init) : input;
+	const playgroundUrlObj = playgroundUrl ? new URL(playgroundUrl) : null;
+	let requestUrlObj = playgroundUrlObj
+		? new URL(requestObject.url, playgroundUrlObj)
+		: new URL(requestObject.url);
+	if (requestUrlObj.protocol === 'http:') {
+		requestUrlObj.protocol = 'https:';
+		const httpsUrl = requestUrlObj.toString();
+		requestObject = await cloneRequest(requestObject, { url: httpsUrl });
+		requestUrlObj = new URL(httpsUrl);
+	}
 	if (!corsProxyUrl) {
 		return await fetch(requestObject);
 	}
@@ -17,12 +27,6 @@ export async function fetchWithCorsProxy(
 	 * won't be able to reach it. At best, it will produce a cryptic error
 	 * message. At worst, it will time out, making the user wait for 30 seconds.
 	 */
-	const playgroundUrlObj = playgroundUrl ? new URL(playgroundUrl) : null;
-	const requestUrlObj = new URL(
-		requestObject.url,
-		playgroundUrlObj || undefined
-	);
-
 	if (
 		playgroundUrlObj &&
 		requestUrlObj.protocol === playgroundUrlObj.protocol &&