jdevalk · July 30, 2024 18:09 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git a/instructions.md b/instructions.md
@@ -5,10 +5,12 @@ current repository. The current iteration only works with plugins that do not re
 
 ![Playground test comment in action](https://joost.blog/wp-content/uploads/2024/01/wordpress-playground-zip.png)
 
+## CORS issues
 Because GitHub doesn't send the right CORS headers for zip files to be able to install them in a Playground, you need 
 a reverse proxy to bypass the CORS restrictions. The Worker below in `worker.js` can be used as a Cloudflare worker that
 does just that.
 
+## Blueprint functionality
 The Playground URL uses [the blueprint functionality of the WordPress Playground](https://wordpress.github.io/wordpress-playground/blueprints-api/using-blueprints/), feel free to change that to what you need it to do.
 
 You can [see this worker in action here](https://github.com/Emilia-Capital/comment-hacks/pull/120#issuecomment-1906074454).
diff --git a/instructions.md b/instructions.md
@@ -3,10 +3,12 @@
 This simple `playground.yml` creates a comment that opens a WordPress Playground and installs the plugin from the 
 current repository. The current iteration only works with plugins that do not require a build step.
 
+![Playground test comment in action](https://joost.blog/wp-content/uploads/2024/01/wordpress-playground-zip.png)
+
 Because GitHub doesn't send the right CORS headers for zip files to be able to install them in a Playground, you need 
 a reverse proxy to bypass the CORS restrictions. The Worker below in `worker.js` can be used as a Cloudflare worker that
 does just that.
 
 The Playground URL uses [the blueprint functionality of the WordPress Playground](https://wordpress.github.io/wordpress-playground/blueprints-api/using-blueprints/), feel free to change that to what you need it to do.
 
-You can [see this worker in action here](https://github.com/Emilia-Capital/comment-hacks/pull/121#issuecomment-1906081641).
+You can [see this worker in action here](https://github.com/Emilia-Capital/comment-hacks/pull/120#issuecomment-1906074454).
diff --git a/instructions.md b/instructions.md
@@ -7,4 +7,6 @@ Because GitHub doesn't send the right CORS headers for zip files to be able to i
 a reverse proxy to bypass the CORS restrictions. The Worker below in `worker.js` can be used as a Cloudflare worker that
 does just that.
 
+The Playground URL uses [the blueprint functionality of the WordPress Playground](https://wordpress.github.io/wordpress-playground/blueprints-api/using-blueprints/), feel free to change that to what you need it to do.
+
 You can [see this worker in action here](https://github.com/Emilia-Capital/comment-hacks/pull/121#issuecomment-1906081641).
diff --git a/instructions.md b/instructions.md
@@ -4,4 +4,7 @@ This simple `playground.yml` creates a comment that opens a WordPress Playground
 current repository. The current iteration only works with plugins that do not require a build step.
 
 Because GitHub doesn't send the right CORS headers for zip files to be able to install them in a Playground, you need 
-a reverse proxy to bypass the CORS restrictions. The above Worker can be used as a Cloudflare worker.
+a reverse proxy to bypass the CORS restrictions. The Worker below in `worker.js` can be used as a Cloudflare worker that
+does just that.
+
+You can [see this worker in action here](https://github.com/Emilia-Capital/comment-hacks/pull/121#issuecomment-1906081641).
diff --git a/instructions.md b/instructions.md
@@ -0,0 +1,7 @@
+# Playground Comment Worker
+
+This simple `playground.yml` creates a comment that opens a WordPress Playground and installs the plugin from the 
+current repository. The current iteration only works with plugins that do not require a build step.
+
+Because GitHub doesn't send the right CORS headers for zip files to be able to install them in a Playground, you need 
+a reverse proxy to bypass the CORS restrictions. The above Worker can be used as a Cloudflare worker.
diff --git a/playground.yml b/playground.yml
@@ -0,0 +1,16 @@
+name: Playground Comment
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: mshick/add-pr-comment@v2
+        with:
+          message: |
+            ## WordPress Playground
+            You can easily [test this pull request on the WordPress Playground](https://playground.wordpress.net/#{"landingPage":"/wp-admin/","features":{"networking":true},"steps":[{"step":"defineWpConfigConsts","consts":{"IS_PLAYGROUND_PREVIEW":true}},{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://bypass-cors.altha.workers.dev/${{ github.server_url }}/${{ github.repository }}/archive/${{ github.sha }}.zip"},"options":{"activate":true}}]}), or [download the zip file](${{ github.server_url }}/${{ github.repository }}/archive/${{ github.sha }}.zip).
diff --git a/worker.js b/worker.js
@@ -0,0 +1,37 @@
+/**
+ * Create a simple CORS proxy with Cloudflare Workers 
+ * to bypass cors restrictions in the browser.
+ * This version follows redirects, only returns a response when the response status is 200,
+ * and is restricted to handling only ZIP files.
+ * Example Usage: https://<worker_subdomain>.workers.dev/https://example.com/file.zip
+ */
+
+addEventListener('fetch', event =>
+    event.respondWith(handleRequest(event.request))
+)
+
+const handleRequest = async request => {
+    let url = new URL(request.url);
+    let requestUrl = request.url.replace(`${url.origin}/`, '');
+    request = new Request(requestUrl, request);
+    if (request.headers.has('origin')) request.headers.delete('origin');
+    if (request.headers.has('referer')) request.headers.delete('referer');
+
+    let response = await fetch(request, { redirect: 'follow' }); // Follow redirects
+
+    // Check if the response status is 200, otherwise throw an error
+    if (response.status !== 200) {
+        throw new Error(`Request failed with status: ${response.status}`);
+    }
+
+    // Check for ZIP file content type
+    let contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/zip')) {
+        throw new Error('The requested resource is not a ZIP file.');
+    }
+
+    response = new Response(response.body, response);
+    response.headers.set('access-control-allow-origin', '*');
+    response.headers.set('access-control-allow-headers', '*');
+    return response;
+}
No results found