diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
index eb8e759b557d..fd494c5e26af 100644
--- a/client/src/playground/index.tsx
+++ b/client/src/playground/index.tsx
@@ -127,11 +127,13 @@ export default function Playground() {
 
       // We're using a random subdomain for origin isolation.
       const url = new URL(
-        `${window.location.protocol}//${
-          PLAYGROUND_BASE_HOST.startsWith("localhost")
-            ? ""
-            : `${subdomain.current}.`
-        }${PLAYGROUND_BASE_HOST}`
+        window.location.hostname.endsWith("localhost")
+          ? window.location.origin
+          : `${window.location.protocol}//${
+              PLAYGROUND_BASE_HOST.startsWith("localhost")
+                ? ""
+                : `${subdomain.current}.`
+            }${PLAYGROUND_BASE_HOST}`
       );
       setVConsole([]);
       url.searchParams.set("state", state);
diff --git a/client/src/playground/utils.ts b/client/src/playground/utils.ts
index ee0bf1bfa887..ee0f5699e9f5 100644
--- a/client/src/playground/utils.ts
+++ b/client/src/playground/utils.ts
@@ -35,15 +35,17 @@ export async function initPlayIframe(
     JSON.stringify(editorContent)
   );
   const path = iframe.getAttribute("data-live-path");
-  const host = PLAYGROUND_BASE_HOST.startsWith("localhost")
-    ? PLAYGROUND_BASE_HOST
-    : `${hash}.${PLAYGROUND_BASE_HOST}`;
   const url = new URL(
     `${path || ""}${path?.endsWith("/") ? "" : "/"}runner.html`,
     window.location.origin
   );
-  url.port = "";
-  url.host = host;
+  if (!window.location.hostname.endsWith("localhost")) {
+    const host = PLAYGROUND_BASE_HOST.startsWith("localhost")
+      ? PLAYGROUND_BASE_HOST
+      : `${hash}.${PLAYGROUND_BASE_HOST}`;
+    url.port = "";
+    url.host = host;
+  }
   url.search = "";
   url.searchParams.set("state", state);
   iframe.src = url.href;
diff --git a/client/src/setupProxy.js b/client/src/setupProxy.js
index 8ab9ed5a2c2b..5f1e61b9808c 100644
--- a/client/src/setupProxy.js
+++ b/client/src/setupProxy.js
@@ -20,6 +20,8 @@ function config(app) {
   app.use(`**/*.(gif|jpeg|jpg|mp3|mp4|ogg|png|svg|webm|webp|woff2)`, proxy);
   // All those root-level images like /favicon-48x48.png
   app.use("/*.(png|webp|gif|jpe?g|svg)", proxy);
+  // Proxy play runner
+  app.use("/**/runner.html", proxy);
 }
 
 export default config;