Skip to content

[Website] Enable CORS proxy for all fetches #2076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 13, 2024

Conversation

adamziel
Copy link
Collaborator

@adamziel adamziel commented Dec 12, 2024

Enables CORS proxy for all WordPress and Playground requests by replacing the regular fetch() call with a custom fetchWithCorsProxy() in:

  • TLS network bridge
  • URL Blueprint resources
  • fetch network transport

This gives WordPress running inside Playground more access to cross origin resources. It is still limited by the proxy itself, in particular around the supported headers, content types, and allowed transfer sizes.

Implementation

fetchWithCorsProxy(url, requestOptions, corsProxyUrl) starts with a regular fetch(url). If it succeeds, we're good. If it fails, it retries, but this time it goes through the CORS proxy: fetch(\${corsProxyUrl}${url}`)`. This applies to all the requests initiated either by WordPress or by the provided Blueprint.

Testing

Go to the URL below. Confirm the output is int(<large number>) and the network tools ran two requests:

http://127.0.0.1:5400/website-server/#{%22landingPage%22:%22/curl-test.php%22,%22features%22:{%22networking%22:true},%22steps%22:[{%22step%22:%22writeFile%22,%22path%22:%22/wordpress/curl-test.php%22,%22data%22:%22%3C?php\n\t\t\t\t\t$ch%20=%20curl_init();\n\t\t\t\t\tcurl_setopt($ch,%20CURLOPT_URL,%20\%22https://adamadam.blog\%22);\n\t\t\t\t\tcurl_setopt($ch,%20CURLOPT_TCP_NODELAY,%200);\n\t\t\t\t\tcurl_setopt($ch,%20CURLOPT_RETURNTRANSFER,%201);\n\t\t\t\t\t$result%20=%20curl_exec($ch);\n\t\t\t\t\tcurl_close($ch);\n\t\t\t\t\tvar_dump(\n\t\t\t\t\t\tstrlen(\n\t\t\t\t\t\t\t$result\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t%22}]}

Go to the URL below, confirm it opens the homepage of my blog https://adamadam.blog:

http://127.0.0.1:5400/website-server/#{%20%22landingPage%22:%20%22/test.html%22,%20%22steps%22:%20[%20{%20%22step%22:%20%22writeFile%22,%20%22path%22:%20%22/wordpress/test.html%22,%20%22data%22:%20{%20%22resource%22:%20%22url%22,%20%22url%22:%20%22https://adamadam.blog%22%20}%20}%20]%20}

Go to the URL below, confirm it opens the homepage of my blog:

http://127.0.0.1:5400/website-server/#{%20%22landingPage%22:%20%22/test.html%22,%20%22features%22:%20{%20%22networking%22:%20true%20},%20%22constants%22:%20{%20%22WP_DEBUG%22:%20true,%20%22WP_SCRIPT_DEBUG%22:%20true,%20%22WP_DEBUG_DISPLAY%22:%20true%20},%20%22steps%22:%20[%20{%20%22step%22:%20%22runPHP%22,%20%22code%22:%20%22%3C?php%20require%20'/wordpress/wp-load.php';%20file_put_contents('/wordpress/test.html',%20wp_remote_retrieve_body(wp_safe_remote_get('https://adamadam.blog')));%22%20}%20]%20}

Replaces the regular `fetch()` call with a custom `fetchWithCorsProxy()` in:

* TLS network bridge
* URL Blueprint resources
* fetch network transport

This gives WordPress running inside Playground more access to cross origin
resources. It is still limited by the proxy itself,  in particular around
the supported headers, content types, and allowed transfer sizes.

 ## Implementation

`fetchWithCorsProxy(url, requestOptions, corsProxyUrl)` starts with a regular `fetch(url)`. If it succeeds,
we're good. If it fails, it retries, but this time it goes through the
CORS proxy: `fetch(\`${corsProxyUrl}${url}\`)`. This applies to all the
requests initiated either by WordPress or by the provided Blueprint.

 ## Testing

Go to the URL below. Confirm the output is `int(<large number>)` and the
network tools ran two requests:

```
http://127.0.0.1:5400/website-server/#{%22landingPage%22:%22/curl-test.php%22,%22features%22:{%22networking%22:true},%22steps%22:[{%22step%22:%22writeFile%22,%22path%22:%22/wordpress/curl-test.php%22,%22data%22:%22%3C?php\n\t\t\t\t\t$ch%20=%20curl_init();\n\t\t\t\t\tcurl_setopt($ch,%20CURLOPT_URL,%20\%22https://adamadam.blog\%22);\n\t\t\t\t\tcurl_setopt($ch,%20CURLOPT_TCP_NODELAY,%200);\n\t\t\t\t\tcurl_setopt($ch,%20CURLOPT_RETURNTRANSFER,%201);\n\t\t\t\t\t$result%20=%20curl_exec($ch);\n\t\t\t\t\tcurl_close($ch);\n\t\t\t\t\tvar_dump(\n\t\t\t\t\t\tstrlen(\n\t\t\t\t\t\t\t$result\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t%22}]}
```

Go to the URL below, confirm it opens the homepage of my blog
https://adamadam.blog:

```
http://127.0.0.1:5400/website-server/#{%20%22landingPage%22:%20%22/test.html%22,%20%22steps%22:%20[%20{%20%22step%22:%20%22writeFile%22,%20%22path%22:%20%22/wordpress/test.html%22,%20%22data%22:%20{%20%22resource%22:%20%22url%22,%20%22url%22:%20%22https://adamadam.blog%22%20}%20}%20]%20}
```

Go to the URL below, confirm it opens the homepage of my blog:

```
http://127.0.0.1:5400/website-server/#{%20%22landingPage%22:%20%22/test.html%22,%20%22features%22:%20{%20%22networking%22:%20true%20},%20%22constants%22:%20{%20%22WP_DEBUG%22:%20true,%20%22WP_SCRIPT_DEBUG%22:%20true,%20%22WP_DEBUG_DISPLAY%22:%20true%20},%20%22steps%22:%20[%20{%20%22step%22:%20%22runPHP%22,%20%22code%22:%20%22%3C?php%20require%20'/wordpress/wp-load.php';%20file_put_contents('/wordpress/test.html',%20wp_remote_retrieve_body(wp_safe_remote_get('https://adamadam.blog')));%22%20}%20]%20}
```
@adamziel adamziel merged commit c6b4f4a into trunk Dec 13, 2024
10 checks passed
@adamziel adamziel deleted the enable-cors-proxy-everywhere branch December 13, 2024 08:44
fellyph pushed a commit to WordPress/blueprints that referenced this pull request Jul 31, 2025
Since WordPress/wordpress-playground#2076 the
proxy is no longer needed and in fact breaks the feed fetching.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

1 participant