Remote: Use CORS proxy for all PHP requests

Adjusts setupFetchNetworkTransport() to funnel all PHP-sourced
network requests through the CORS proxy.

This is intentionally not adding that logic to the `fetch` event handler
in the service worker, as that would also affect all the cross-origin
`fetch()` requests initiated by JavaScript shipped with WordPress
plugins.

 ## Changes in this PR

* Adds a `corsProxyUrl` option to `setupFetchNetworkTransport()`
* Adds the constants required by the CORS proxy to run in the local dev setup
* Configures the CORS proxy to provide the Access-Control-Allow-Origin
  headers in the local setup where it's running on a different host.

 ## Concerns

* Is it too permissive?
* I built this to turn Playground into an RSS reader with @akirk's
  Friends plugins. It can fetch the list of feeds as expected, but then
  it usess SimplePie to parse the feeds and that requires curl which we
  don't provide in the web version of Playground. #1093 is a blocker for
  that. Until that's resolved, I'm not compelled to prioritize this.

 ## Testing changes

TBD

Author: adamziel

packages/playground/blueprints/src/lib/compile.ts

@@ -65,11 +65,11 @@ export interface CompileBlueprintOptions {
 	/**
 	 * Proxy URL to use for cross-origin requests.
 	 *
-	 * For example, if corsProxy is set to "https://cors.wordpress.net/proxy.php",
+	 * For example, if corsProxyUrl is set to "https://cors.wordpress.net/proxy.php",
 	 * then the CORS requests to https://github.com/WordPress/gutenberg.git would actually
 	 * be made to https://cors.wordpress.net/proxy.php?https://github.com/WordPress/gutenberg.git.
 	 */
-	corsProxy?: string;
+	corsProxyUrl?: string;
 }
 
 /**
@@ -86,7 +86,7 @@ export function compileBlueprint(
 		progress = new ProgressTracker(),
 		semaphore = new Semaphore({ concurrency: 3 }),
 		onStepCompleted = () => {},
-		corsProxy,
+		corsProxyUrl,
 	}: CompileBlueprintOptions = {}
 ): CompiledBlueprint {
 	// Deep clone the blueprint to avoid mutating the input
@@ -260,7 +260,7 @@ export function compileBlueprint(
 			semaphore,
 			rootProgressTracker: progress,
 			totalProgressWeight,
-			corsProxy,
+			corsProxyUrl,
 		})
 	);
 
@@ -422,9 +422,9 @@ interface CompileStepArgsOptions {
 	/**
 	 * Proxy URL to use for cross-origin requests.
 	 *
-	 * @see CompileBlueprintOptions.corsProxy
+	 * @see CompileBlueprintOptions.corsProxyUrl
 	 */
-	corsProxy?: string;
+	corsProxyUrl?: string;
 }
 
 /**
@@ -441,7 +441,7 @@ function compileStep<S extends StepDefinition>(
 		semaphore,
 		rootProgressTracker,
 		totalProgressWeight,
-		corsProxy,
+		corsProxyUrl,
 	}: CompileStepArgsOptions
 ): { run: CompiledStep; step: S; resources: Array<Resource<any>> } {
 	const stepProgress = rootProgressTracker.stage(
@@ -454,7 +454,7 @@ function compileStep<S extends StepDefinition>(
 		if (isResourceReference(value)) {
 			value = Resource.create(value, {
 				semaphore,
-				corsProxy,
+				corsProxyUrl,
 			});
 		}
 		args[key] = value;

packages/playground/blueprints/src/lib/resources.ts

@@ -134,12 +134,12 @@ export abstract class Resource<T extends File | Directory> {
 		{
 			semaphore,
 			progress,
-			corsProxy,
+			corsProxyUrl,
 		}: {
 			/** Optional semaphore to limit concurrent downloads */
 			semaphore?: Semaphore;
 			progress?: ProgressTracker;
-			corsProxy?: string;
+			corsProxyUrl?: string;
 		}
 	): Resource<File | Directory> {
 		let resource: Resource<File | Directory>;
@@ -161,7 +161,7 @@ export abstract class Resource<T extends File | Directory> {
 				break;
 			case 'git:directory':
 				resource = new GitDirectoryResource(ref, progress, {
-					corsProxy,
+					corsProxyUrl,
 				});
 				break;
 			case 'literal:directory':
@@ -452,14 +452,14 @@ export class GitDirectoryResource extends Resource<Directory> {
 	constructor(
 		private reference: GitDirectoryReference,
 		public override _progress?: ProgressTracker,
-		private options?: { corsProxy?: string }
+		private options?: { corsProxyUrl?: string }
 	) {
 		super();
 	}
 
 	async resolve() {
-		const repoUrl = this.options?.corsProxy
-			? `${this.options.corsProxy}?${this.reference.url}`
+		const repoUrl = this.options?.corsProxyUrl
+			? `${this.options.corsProxyUrl}?${this.reference.url}`
 			: this.reference.url;
 		const ref = ['', 'HEAD'].includes(this.reference.ref)
 			? 'HEAD'

packages/playground/client/src/index.ts

@@ -78,15 +78,15 @@ export interface StartPlaygroundOptions {
 	/**
 	 * Proxy URL to use for cross-origin requests.
 	 *
-	 * For example, if corsProxy is set to "https://cors.wordpress.net/proxy.php",
+	 * For example, if corsProxyUrl is set to "https://cors.wordpress.net/proxy.php",
 	 * then the CORS requests to https://github.com/WordPress/wordpress-playground.git would actually
 	 * be made to https://cors.wordpress.net/proxy.php?https://github.com/WordPress/wordpress-playground.git.
 	 *
 	 * The Blueprints library will arbitrarily choose which requests to proxy. If you need
 	 * to proxy every single request, do not use this option. Instead, you should preprocess
 	 * your Blueprint to replace all cross-origin URLs with the proxy URL.
 	 */
-	corsProxy?: string;
+	corsProxyUrl?: string;
 }
 
 /**
@@ -108,7 +108,7 @@ export async function startPlaygroundWeb({
 	onBeforeBlueprint,
 	mounts,
 	scope,
-	corsProxy,
+	corsProxyUrl,
 	shouldInstallWordPress,
 }: StartPlaygroundOptions): Promise<PlaygroundClient> {
 	assertValidRemote(remoteUrl);
@@ -127,7 +127,7 @@ export async function startPlaygroundWeb({
 	const compiled = compileBlueprint(blueprint, {
 		progress: progressTracker.stage(0.5),
 		onStepCompleted: onBlueprintStepCompleted,
-		corsProxy,
+		corsProxyUrl,
 	});
 
 	await new Promise((resolve) => {
@@ -153,6 +153,7 @@ export async function startPlaygroundWeb({
 		phpVersion: compiled.versions.php,
 		wpVersion: compiled.versions.wp,
 		withNetworking: compiled.features.networking,
+		corsProxyUrl,
 	});
 	await playground.isReady();
 	downloadPHPandWP.finish();

packages/playground/php-cors-proxy/cors-proxy-dev-setup.php

@@ -0,0 +1,4 @@
+<?php
+
+define('PLAYGROUND_CORS_PROXY_DISABLE_RATE_LIMIT', true);
+define('PLAYGROUND_CORS_PROXY_SUPPLY_ACCESS_CONTROL_ALLOW_ORIGIN', true);

packages/playground/php-cors-proxy/cors-proxy.php

@@ -103,6 +103,12 @@
         // Set the response code from the target server
         $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
         http_response_code($httpCode);
+        if (
+            defined('PLAYGROUND_CORS_PROXY_SUPPLY_ACCESS_CONTROL_ALLOW_ORIGIN') && 
+            PLAYGROUND_CORS_PROXY_SUPPLY_ACCESS_CONTROL_ALLOW_ORIGIN
+        ) {
+            header('Access-Control-Allow-Origin: *');
+        }
         $httpcode_sent = true;
     }
     $len = strlen($header);

packages/playground/php-cors-proxy/project.json

@@ -7,7 +7,9 @@
 		"start": {
 			"executor": "nx:run-commands",
 			"options": {
-				"commands": ["php -S 127.0.0.1:5263"],
+				"commands": [
+					"php -dauto_prepend_file=cors-proxy-dev-setup.php -S 127.0.0.1:5263"
+				],
 				"cwd": "packages/playground/php-cors-proxy"
 			}
 		},

packages/playground/remote/src/lib/boot-playground-remote.ts

@@ -292,7 +292,9 @@ export async function bootPlaygroundRemote() {
 				);
 
 				if (options.withNetworking) {
-					await setupFetchNetworkTransport(phpWorkerApi);
+					await setupFetchNetworkTransport(phpWorkerApi, {
+						corsProxyUrl: options.corsProxyUrl,
+					});
 				}
 
 				setAPIReady();

packages/playground/remote/src/lib/playground-client.ts

@@ -11,6 +11,9 @@ import type {
 	WorkerBootOptions,
 } from './worker-thread';
 
+export interface WebClientBootOptions extends WorkerBootOptions {
+	corsProxyUrl?: string;
+}
 export interface WebClientMixin extends ProgressReceiver {
 	/**
 	 * Sets the progress bar options.
@@ -68,7 +71,7 @@ export interface WebClientMixin extends ProgressReceiver {
 
 	unmountOpfs(mountpoint: string): Promise<void>;
 
-	boot(options: WorkerBootOptions): Promise<void>;
+	boot(options: WebClientBootOptions): Promise<void>;
 }
 
 /**

packages/playground/remote/src/lib/setup-fetch-network-transport.ts

@@ -19,7 +19,10 @@ export interface RequestMessage {
  *
  * @param playground the Playground instance to set up with network support.
  */
-export async function setupFetchNetworkTransport(playground: UniversalPHP) {
+export async function setupFetchNetworkTransport(
+	playground: UniversalPHP,
+	{ corsProxyUrl }: { corsProxyUrl?: string }
+) {
 	await defineWpConfigConsts(playground, {
 		consts: {
 			USE_FETCH_FOR_REQUESTS: true,
@@ -58,34 +61,55 @@ export async function setupFetchNetworkTransport(playground: UniversalPHP) {
 			data.headers['x-request-issuer'] = 'php';
 		}
 
-		return handleRequest(data);
+		return handleRequest(data, {
+			corsProxyUrl,
+		});
 	});
 }
 
-export async function handleRequest(data: RequestData, fetchFn = fetch) {
+export async function handleRequest(
+	data: RequestData,
+	options: { corsProxyUrl?: string; fetchFn?: typeof fetch }
+) {
+	const { corsProxyUrl, fetchFn = fetch } = options;
 	const hostname = new URL(data.url).hostname;
-	const fetchUrl = ['w.org', 's.w.org'].includes(hostname)
+	const isWdotOrg = ['w.org', 's.w.org'].includes(hostname);
+	const fetchUrl = isWdotOrg
 		? `/plugin-proxy.php?url=${encodeURIComponent(data.url)}`
 		: data.url;
 
+	const fetchMethod = data.method || 'GET';
+	const fetchHeaders = data.headers || {};
+	if (fetchMethod == 'POST') {
+		fetchHeaders['Content-Type'] = 'application/x-www-form-urlencoded';
+	}
+
 	let response;
 	try {
-		const fetchMethod = data.method || 'GET';
-		const fetchHeaders = data.headers || {};
-		if (fetchMethod == 'POST') {
-			fetchHeaders['Content-Type'] = 'application/x-www-form-urlencoded';
-		}
-
 		response = await fetchFn(fetchUrl, {
 			method: fetchMethod,
 			headers: fetchHeaders,
 			body: data.data,
 			credentials: 'omit',
 		});
 	} catch (e) {
-		return new TextEncoder().encode(
-			`HTTP/1.1 400 Invalid Request\r\ncontent-type: text/plain\r\n\r\nPlayground could not serve the request.`
-		);
+		if (isWdotOrg || !corsProxyUrl) {
+			return new TextEncoder().encode(
+				`HTTP/1.1 400 Invalid Request\r\ncontent-type: text/plain\r\n\r\nPlayground could not serve the request.`
+			);
+		}
+		try {
+			response = await fetchFn(`${corsProxyUrl}?${fetchUrl}`, {
+				method: fetchMethod,
+				headers: fetchHeaders,
+				body: data.data,
+				credentials: 'omit',
+			});
+		} catch (e) {
+			return new TextEncoder().encode(
+				`HTTP/1.1 400 Invalid Request\r\ncontent-type: text/plain\r\n\r\nPlayground could not serve the request.`
+			);
+		}
 	}
 	const responseHeaders: string[] = [];
 	response.headers.forEach((value, key) => {

packages/playground/remote/src/test/setup-fetch-network-transport.spec.ts

@@ -19,7 +19,7 @@ describe('handleRequest', () => {
 				url: 'https://playground.wordpress.net/',
 				headers: { 'Content-type': 'text/html' },
 			},
-			fetchMock as any
+			{ fetchFn: fetchMock as any }
 		);
 		expect(new TextDecoder().decode(response)).toBe(
 			`HTTP/1.1 200 OK\r\ncontent-type: text/html\r\n\r\nHello, world!`
@@ -43,7 +43,7 @@ describe('handleRequest', () => {
 				url: 'https://playground.wordpress.net/',
 				headers: { 'Content-type': 'text/html' },
 			},
-			fetchMock as any
+			{ fetchFn: fetchMock as any }
 		);
 		expect(new TextDecoder().decode(response)).toBe(
 			`HTTP/1.1 400 Invalid Request\r\ncontent-type: text/plain\r\n\r\nPlayground could not serve the request.`