@@ -61,6 +61,15 @@ app.route(
 );
 ```
 
+With `hyperframes preview` and the Studio dev server there is no code to
+change: both read the extra hosts from `HYPERFRAMES_PREVIEW_ALLOWED_HOSTS`
+(comma separated) and pass them as `allowedHosts`. A refused write answers
+403 with the refused host named and this variable as the fix:
+
+```bash
+HYPERFRAMES_PREVIEW_ALLOWED_HOSTS=demo.tunnels.example hyperframes preview
+```
+
 A `StudioApiAdapter` supplies:
 
 - project listing and resolution;
 
@@ -1027,3 +1027,53 @@ describe("Studio file-change SSE", () => {
     expect(payload).toContain('"projectId":"demo-project"');
   });
 });
+
+describe("createStudioServer /api write guard allowed hosts", () => {
+  const TUNNEL_HOST = "demo.tunnels.example";
+
+  async function tunnelWrite(projectDir: string): Promise<Response> {
+    // A write from the Studio page behind a tunnel, driven through the
+    // CLI's own /api/* forwarder, the way a browser save reaches the API.
+    return server!.app.request(
+      `http://${TUNNEL_HOST}/api/projects/${encodeURIComponent(basename(projectDir))}/files/planted.html`,
+      {
+        method: "POST",
+        headers: {
+          Host: TUNNEL_HOST,
+          Origin: `https://${TUNNEL_HOST}`,
+          "X-Forwarded-Proto": "https",
+          "Content-Type": "text/plain",
+        },
+        body: "<html>planted</html>",
+      },
+    );
+  }
+
+  it("refuses a tunnel write without the env var, naming the host and the var", async () => {
+    const projectDir = tmpProject();
+    writeFileSync(join(projectDir, "index.html"), "<html>before</html>");
+    delete process.env.HYPERFRAMES_PREVIEW_ALLOWED_HOSTS;
+    server = createStudioServer({ projectDir });
+
+    const res = await tunnelWrite(projectDir);
+    expect(res.status).toBe(403);
+    const body = (await res.json()) as { error: string };
+    expect(body.error).toContain(TUNNEL_HOST);
+    expect(body.error).toContain("HYPERFRAMES_PREVIEW_ALLOWED_HOSTS");
+    expect(existsSync(join(projectDir, "planted.html"))).toBe(false);
+  });
+
+  it("accepts a tunnel write when HYPERFRAMES_PREVIEW_ALLOWED_HOSTS names the host", async () => {
+    const projectDir = tmpProject();
+    writeFileSync(join(projectDir, "index.html"), "<html>before</html>");
+    process.env.HYPERFRAMES_PREVIEW_ALLOWED_HOSTS = `other.example, ${TUNNEL_HOST}`;
+    try {
+      server = createStudioServer({ projectDir });
+      const res = await tunnelWrite(projectDir);
+      expect(res.status).toBe(201);
+      expect(existsSync(join(projectDir, "planted.html"))).toBe(true);
+    } finally {
+      delete process.env.HYPERFRAMES_PREVIEW_ALLOWED_HOSTS;
+    }
+  });
+});
@@ -36,6 +36,7 @@ import {
 import { emitStudioRenderComplete, emitStudioRenderError } from "./studioRenderTelemetry.js";
 import { startRenderCpuSampler } from "../telemetry/renderCpu.js";
 import { mountDesktopRoutes } from "./desktopRoutes.js";
+import { previewAllowedHostsFromEnv } from "@hyperframes/studio-server/request-identity";
 import { isDevMode } from "../utils/env.js";
 import { runRenderSetupWorker } from "../utils/cancellableProcess.js";
 import type { ProjectLintResult } from "@hyperframes/lint";
@@ -1102,7 +1103,9 @@ export function createStudioServer(options: StudioServerOptions): StudioServer {
   // Mount the shared studio API at /api.
   // Use fetch() forwarding (not .route()) so the sub-app sees paths without
   // the /api prefix — the shared module's path extraction uses c.req.path.
-  const api = createStudioApi(adapter);
+  // Extra write hosts from HYPERFRAMES_PREVIEW_ALLOWED_HOSTS, for preview
+  // behind Codespaces port forwarding or a tunnel (see requestIdentity).
+  const api = createStudioApi(adapter, { allowedHosts: previewAllowedHostsFromEnv() });
   app.all("/api/*", async (c) => {
     const url = new URL(c.req.url);
     url.pathname = url.pathname.slice(4); // Strip "/api" prefix
 
@@ -9,6 +9,7 @@ import { existsSync, mkdtempSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { createStudioApi } from "./createStudioApi";
+import { previewAllowedHostsFromEnv } from "./helpers/requestIdentity";
 import { stubAdapter } from "./routes/stubAdapter.test-helpers";
 
 const tempDirs: string[] = [];
@@ -227,6 +228,36 @@ describe("createStudioApi cross-origin write guard", () => {
     expect(existsSync(join(projectDir, "planted.html"))).toBe(false);
   });
 
+  it("names the refused host and the allowing env var in a refused write", async () => {
+    const { app, projectDir } = createApp();
+    const res = await createFile(app, {
+      Host: "rebind.example:9999",
+      Origin: "http://rebind.example:9999",
+      "Sec-Fetch-Site": "same-origin",
+      "Content-Type": "text/plain",
+    });
+    expect(res.status).toBe(403);
+    const body = (await res.json()) as { error: string };
+    expect(body.error).toContain("rebind.example:9999");
+    expect(body.error).toContain("HYPERFRAMES_PREVIEW_ALLOWED_HOSTS");
+    expect(existsSync(join(projectDir, "planted.html"))).toBe(false);
+  });
+
+  it("rejects a forged X-Forwarded-Host whose Origin does not match it", async () => {
+    // The Host check alone would pass: the forwarded host names loopback.
+    // The Origin comparison is what stops it, since the page's real origin
+    // is the rebinding name, not the forwarded one.
+    const { app, projectDir } = createApp();
+    const res = await createFile(app, {
+      Host: "rebind.example:9999",
+      Origin: "http://rebind.example:9999",
+      "X-Forwarded-Host": "localhost",
+      "Content-Type": "text/plain",
+    });
+    expect(res.status).toBe(403);
+    expect(existsSync(join(projectDir, "planted.html"))).toBe(false);
+  });
+
   it("allows a write through a tunnel that rewrites Host and forwards its own", async () => {
     const projectDir = mkdtempSync(join(tmpdir(), "hf-origin-guard-"));
     tempDirs.push(projectDir);
@@ -248,3 +279,18 @@ describe("createStudioApi cross-origin write guard", () => {
     expect(existsSync(join(projectDir, "planted.html"))).toBe(true);
   });
 });
+
+describe("previewAllowedHostsFromEnv", () => {
+  it("parses a comma separated list, trimming blanks", () => {
+    expect(
+      previewAllowedHostsFromEnv({
+        HYPERFRAMES_PREVIEW_ALLOWED_HOSTS: " demo.tunnels.example ,, studio.example.com ",
+      }),
+    ).toEqual(["demo.tunnels.example", "studio.example.com"]);
+  });
+
+  it("is empty when the variable is unset or blank", () => {
+    expect(previewAllowedHostsFromEnv({})).toEqual([]);
+    expect(previewAllowedHostsFromEnv({ HYPERFRAMES_PREVIEW_ALLOWED_HOSTS: "  " })).toEqual([]);
+  });
+});
@@ -19,7 +19,11 @@ import { registerGlobalAssetRoutes } from "./routes/globalAssets.js";
 import { registerHistoryRoutes } from "./routes/history.js";
 import { replaceWithProjectDirMissing } from "./helpers/projectDirMissing.js";
 import { folderGone, isProjectRootMissing } from "./helpers/safePath.js";
-import { sameOriginPost } from "./helpers/requestIdentity.js";
+import {
+  PREVIEW_ALLOWED_HOSTS_ENV,
+  requestHost,
+  sameOriginPost,
+} from "./helpers/requestIdentity.js";
 import { previewErrorPage } from "./helpers/previewErrorPage.js";
 
 async function answerRefusedFrameWithPage(c: Context, next: Next) {
@@ -75,7 +79,25 @@ export function createStudioApi(adapter: StudioApiAdapter, options: StudioApiOpt
       forwardedHost: c.req.header("x-forwarded-host"),
       allowedHosts: options.allowedHosts,
     });
-    if (!allowed) return c.json({ error: "forbidden" }, 403);
+    if (!allowed) {
+      // Name the refused host and the variable that allows it, so a user
+      // behind a proxy or tunnel can fix the 403 in one step instead of
+      // silently losing every save.
+      const refusedHost =
+        requestHost({
+          host: c.req.header("host") ?? urlHost(c.req.url),
+          forwardedHost: c.req.header("x-forwarded-host"),
+        }) ?? "unknown host";
+      return c.json(
+        {
+          error:
+            `forbidden: writes from host "${refusedHost}" are not allowed. ` +
+            `Set ${PREVIEW_ALLOWED_HOSTS_ENV}=${refusedHost} to allow it ` +
+            `(comma separated for several hosts).`,
+        },
+        403,
+      );
+    }
     return next();
   });
   api.use("/projects/:id/preview/*", answerRefusedFrameWithPage);
 
@@ -49,6 +49,30 @@ function hostMatchesBind(host: string | undefined, bind: string): boolean {
     : false;
 }
 
+// Extra hosts whose writes the studio API accepts, comma separated. The CLI
+// preview server and the Studio dev server read it and pass the names to
+// createStudioApi as allowedHosts, so a Codespaces or tunnel user allows
+// their public host name in one step. A refused write names this variable.
+export const PREVIEW_ALLOWED_HOSTS_ENV = "HYPERFRAMES_PREVIEW_ALLOWED_HOSTS";
+
+export function previewAllowedHostsFromEnv(
+  env: { [key: string]: string | undefined } = process.env,
+): string[] {
+  return (env[PREVIEW_ALLOWED_HOSTS_ENV] ?? "")
+    .split(",")
+    .map((host) => host.trim())
+    .filter((host) => host !== "");
+}
+
+// The host a request is addressed to, for checks and for refusal messages:
+// the first forwarded host wins, since that is the name the browser used.
+export function requestHost(headers: {
+  host?: string;
+  forwardedHost?: string;
+}): string | undefined {
+  return firstForwarded(headers.forwardedHost) ?? headers.host;
+}
+
 // A loopback Host always passes. Any other Host passes only when the bind (HYPERFRAMES_PREVIEW_HOST) names it, or is a wildcard and the Host is a local name.
 export function identityAllowed(host: string | undefined): boolean {
   if (isLoopbackHost(host)) return true;
 
@@ -1,4 +1,8 @@
 export { createStudioApi, type StudioApiOptions } from "./createStudioApi.js";
+export {
+  PREVIEW_ALLOWED_HOSTS_ENV,
+  previewAllowedHostsFromEnv,
+} from "./helpers/requestIdentity.js";
 export { MAX_UPLOAD_BYTES } from "./routes/files.js";
 export {
   createProjectSignature,
 
@@ -143,9 +143,13 @@ function devProjectApi(): Plugin {
 
       let _api: { fetch: (req: Request) => Promise<Response> } | null = null;
       let _studioServerModule: {
-        createStudioApi: (adapter: ReturnType<typeof createViteAdapter>) => {
+        createStudioApi: (
+          adapter: ReturnType<typeof createViteAdapter>,
+          options?: { allowedHosts?: readonly string[] },
+        ) => {
           fetch: (req: Request) => Promise<Response>;
         };
+        previewAllowedHostsFromEnv: () => string[];
         identifyFileWrite: (
           path: string,
           expectedVersion: string,
@@ -170,6 +174,7 @@ function devProjectApi(): Plugin {
             "fileContentVersion",
             "affectsPreview",
             "openProjectHistory",
+            "previewAllowedHostsFromEnv",
           ] as const) {
             if (typeof mod[name] !== "function") {
               throw new Error(`@hyperframes/studio-server dev module is missing ${name}()`);
@@ -183,7 +188,11 @@ function devProjectApi(): Plugin {
             // id and real root before the signature cache starts watching them.
             onResolveProject: (project) => watchedProjects.set(project.dir, project.id),
           });
-          _api = mod.createStudioApi(adapter);
+          // Same env var as the CLI preview server: extra hosts whose
+          // writes the API accepts (Codespaces, tunnels).
+          _api = mod.createStudioApi(adapter, {
+            allowedHosts: mod.previewAllowedHostsFromEnv(),
+          });
         }
         return _api;
       };