[Networking] Use CORS proxy for all PHP requests

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.`

packages/playground/website/src/lib/state/redux/boot-site-client.ts

@@ -133,7 +133,7 @@ export function bootSiteClient(
 					  ]
 					: [],
 				shouldInstallWordPress: !isWordPressInstalled,
-				corsProxy: corsProxyUrl,
+				corsProxyUrl,
 			});
 
 			// @TODO: Remove backcompat code after 2024-12-01.