diff --git a/src/servers/api/dev-proxy/router.ts b/src/servers/api/dev-proxy/router.ts
index 3dfb44c4..683fec32 100644
--- a/src/servers/api/dev-proxy/router.ts
+++ b/src/servers/api/dev-proxy/router.ts
@@ -74,6 +74,30 @@ async function isOwnerToken(token: string | null): Promise<boolean> {
 const hasCookie = (req: Request): boolean =>
   (req.headers.get('cookie') ?? '').split(';').some((part) => part.trim().startsWith(`${COOKIE}=`));
 
+/**
+ * Take a normal authenticated request and turn it into the cookie the iframe needs.
+ *
+ * This exists because the two ways of getting credentials into a frame are both guesses. A token on the
+ * iframe URL guesses which key the browser stored it under; a cookie that must already be there guesses
+ * that something set it earlier. The panel's own API client already knows how to authenticate — it sends
+ * the Authorization header on every other call it makes — so it calls this first, and the iframe that
+ * follows needs to carry nothing at all.
+ *
+ * `Authorization` rather than the URL, so the token never appears in an address, a log or a Referer.
+ */
+devProxyRouter.get('/session', async (ctx) => {
+  const header = ctx.req.header('authorization') ?? '';
+  const bearer = header.toLowerCase().startsWith('bearer ') ? header.slice(7).trim() : null;
+  if (!(await isOwnerToken(bearer))) return unauthorised();
+
+  return new Response(JSON.stringify({ ok: true }), {
+    headers: {
+      'content-type': 'application/json',
+      'set-cookie': `${COOKIE}=1; Path=/api/dev-proxy; Max-Age=${COOKIE_TTL_S}; HttpOnly; SameSite=Lax`,
+    },
+  });
+});
+
 devProxyRouter.all('/:port/*', async (ctx) => {
   const port = ctx.req.param('port');
   if (!PORT_RE.test(port)) return new Response('Bad port', { status: 400 });
@@ -134,7 +158,15 @@ devProxyRouter.all('/:port/*', async (ctx) => {
     headers.append('set-cookie', `${COOKIE}=1; Path=/api/dev-proxy; Max-Age=${COOKIE_TTL_S}; HttpOnly; SameSite=Lax`);
   }
 
-  if (!rewritable) return new Response(res.body, { status: res.status, headers });
+  if (!rewritable) {
+    // `fetch` decompressed this on the way in, so the upstream's `content-encoding` now describes a body
+    // that no longer exists and `content-length` counts bytes that are no longer there. The browser would
+    // try to inflate plain bytes. The rewrite branch below has always deleted both; this one did not, so
+    // every image, font and wasm file was served with a lie attached.
+    headers.delete('content-length');
+    headers.delete('content-encoding');
+    return new Response(res.body, { status: res.status, headers });
+  }
 
   const text = await res.text();
   const body = isHtml ? rewriteHtml(text, prefix) : rewriteAssetPaths(text, prefix);
diff --git a/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx b/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx
index 4bb66ba3..4a4323f5 100644
--- a/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx
+++ b/src/workspaces/officerdev/src/apps/Preview/PreviewApp.tsx
@@ -1,7 +1,8 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Globe } from 'lucide-react';
+import { useClient } from 'hooks/useClient';
 import { useWorkspace } from '../../components/Workspace';
-import { iframeSrc, normalizeUrl, usePreview } from './use-preview';
+import { normalizeUrl, usePreview } from './use-preview';
 
 /**
  * A live app, in a panel.
@@ -54,7 +55,54 @@ export const PreviewApp = ({ panelId }: { panelId: string }) => {
     );
   }
 
-  return (
-    <iframe key={reloadToken} src={iframeSrc(url)} title="Preview" className="h-full w-full border-none bg-white" />
-  );
+  return <DevProxyFrame url={url} reloadToken={reloadToken} />;
+};
+
+/**
+ * The frame, and the one call that has to happen before it.
+ *
+ * A dev-proxy URL needs a cookie, and the only thing that can obtain one is an AUTHENTICATED request —
+ * which an iframe navigation is not. So the panel asks for it with the ordinary API client, which already
+ * knows how to authenticate, and only then mounts the frame. Anything else is a guess: a token on the URL
+ * guesses which key the browser stored it under, and mounting first and hoping guesses that a cookie from
+ * some earlier session is still there. Both were tried; the second is what produced a white pane and 401s
+ * on every asset.
+ *
+ * An ordinary URL mounts immediately — nothing to arrange, and no reason to make it wait.
+ */
+const DevProxyFrame = ({ url, reloadToken }: { url: string; reloadToken: number }) => {
+  const { get } = useClient();
+  const needsSession = url.startsWith('/api/dev-proxy/');
+  const [ready, setReady] = useState(!needsSession);
+  const [failed, setFailed] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!needsSession) {
+      setReady(true);
+      return;
+    }
+    let alive = true;
+    setReady(false);
+    setFailed(null);
+    // Re-run on every reload: the cookie has a lifetime, and a preview left open overnight should recover
+    // by itself rather than showing a wall of 401s.
+    get<{ ok: boolean }>('/dev-proxy/session')
+      .then(() => alive && setReady(true))
+      .catch((err: unknown) => alive && setFailed(err instanceof Error ? err.message : 'could not authorise'));
+    return () => {
+      alive = false;
+    };
+  }, [needsSession, reloadToken, url]);
+
+  if (failed) {
+    return (
+      <div className="flex h-full items-center justify-center p-6 text-center text-xs text-duck-dark/50">
+        Could not authorise the dev proxy: {failed}
+      </div>
+    );
+  }
+  if (!ready) {
+    return <div className="flex h-full items-center justify-center text-xs text-duck-dark/40">Connecting…</div>;
+  }
+  return <iframe key={reloadToken} src={url} title="Preview" className="h-full w-full border-none bg-white" />;
 };
diff --git a/src/workspaces/officerdev/src/apps/Preview/use-preview.test.ts b/src/workspaces/officerdev/src/apps/Preview/use-preview.test.ts
index f6101141..34be51db 100644
--- a/src/workspaces/officerdev/src/apps/Preview/use-preview.test.ts
+++ b/src/workspaces/officerdev/src/apps/Preview/use-preview.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { iframeSrc, normalizeUrl } from './use-preview';
+import { normalizeUrl } from './use-preview';
 
 // The panel puts this string straight into an iframe `src`, so what it accepts matters more than it looks.
 
@@ -71,10 +71,8 @@ describe('loopback URLs', () => {
     expect(normalizeUrl('data:text/html,x')).toBeNull();
   });
 
-  test('the token rides on the dev proxy URL only, and only when there is one', () => {
-    localStorage.setItem('BEARER_TOKEN', 'tok-123');
-    expect(iframeSrc('/api/dev-proxy/3000/')).toBe('/api/dev-proxy/3000/?token=tok-123');
-    expect(iframeSrc('https://example.com/')).toBe('https://example.com/');
-    localStorage.removeItem('BEARER_TOKEN');
-  });
+  // `iframeSrc` used to put the token on the iframe URL. It is gone: reading the token meant guessing
+  // which key the browser kept it under, and the frame still depended on a cookie arriving in time. The
+  // panel now asks `/dev-proxy/session` with the authenticated client and mounts the frame afterwards,
+  // so the URL carries nothing and there is no ordering to get wrong.
 });
diff --git a/src/workspaces/officerdev/src/apps/Preview/use-preview.ts b/src/workspaces/officerdev/src/apps/Preview/use-preview.ts
index 13e62395..e1192e79 100644
--- a/src/workspaces/officerdev/src/apps/Preview/use-preview.ts
+++ b/src/workspaces/officerdev/src/apps/Preview/use-preview.ts
@@ -125,19 +125,3 @@ function loopbackPort(text: string): string | null {
   // Bare `localhost` with no port is ambiguous rather than wrong; 80 is the only defensible reading.
   return match[1] ?? '80';
 }
-
-/**
- * The iframe's URL, with the one-time token when it points at the dev proxy.
- *
- * An iframe is a navigation and carries no Authorization header, so the proxy has no other way to know who
- * is asking. It answers by setting a short-lived cookie, which every sub-resource then carries by itself —
- * so the token appears exactly once, on the document request, and never on anything the app can see.
- */
-export function iframeSrc(url: string): string {
-  if (!url.startsWith('/api/dev-proxy/')) return url;
-  const token =
-    localStorage.getItem('PERTENTO_EDITOR_AUTH_TOKEN') ??
-    localStorage.getItem('BEARER_TOKEN') ??
-    sessionStorage.getItem('BEARER_TOKEN');
-  return token ? `${url}?token=${encodeURIComponent(token)}` : url;
-}