@expo/serve-sim 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/serve-sim",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "author": {
     "name": "Evan Bacon",

package/src/connect-to-fetch.ts

@@ -53,6 +53,9 @@ export function connectToFetch(
 
   let status = 200;
   let responseHeaders = new Headers();
+  // Set before the status is written, the way `ServerResponse.setHeader` allows. `writeHead`
+  // values win, matching Node.
+  const presetHeaders = new Headers();
   let headersSent = false;
   let writableEnded = false;
   let writableFinished = false;
@@ -96,6 +99,9 @@ export function connectToFetch(
   const ensureResponse = () => {
     if (headersSent) return;
     headersSent = true;
+    for (const [name, value] of presetHeaders) {
+      if (!responseHeaders.has(name)) responseHeaders.set(name, value);
+    }
     resolveOnce(new Response(statusAllowsBody() ? body : null, { status, headers: responseHeaders }));
   };
   const writeChunk = (chunk: Buffer | string | Uint8Array) => {
@@ -122,6 +128,9 @@ export function connectToFetch(
     get writableNeedDrain() { return writableNeedDrain; },
     get statusCode() { return status; },
     set statusCode(nextStatus: number) { status = nextStatus; },
+    setHeader(name: string, value: string) {
+      presetHeaders.set(name, value);
+    },
     writeHead(nextStatus: number, headers?: Record<string, string | number | string[]>) {
       status = nextStatus;
       if (headers) {

package/src/middleware.ts

@@ -21,7 +21,6 @@ import {
   closeDeviceSession,
   getDeviceSession,
   peekDeviceSession,
-  sendCorsPreflight,
   type HidSocket,
 } from "./device-session";
 import { assertPreviewAccess, assertUpgradeAccess } from "./session-auth";
@@ -179,11 +178,6 @@ function isSimulatorUdid(value: string): boolean {
   return /^[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{4}-[0-9A-F]{12}$/i.test(value);
 }
 
-const SCREENSHOT_RESPONSE_HEADERS = {
-  "Access-Control-Allow-Origin": "*",
-  "Cache-Control": "no-store",
-};
-
 /** What to do with a persisted device state when reaping during a grid poll. */
 type StaleStateAction = "keep" | "recycle-self" | "recycle-helper";
 
@@ -807,14 +801,6 @@ function serveHelperInProcess(
     void handleCameraStatus(req, res, device);
     return true;
   }
-  if (
-    (endpoint === "/webrtc/offer" || endpoint === "/webrtc/close" || endpoint === "/webrtc/stats"
-      || endpoint === "/stream-settings")
-    && req.method === "OPTIONS"
-  ) {
-    sendCorsPreflight(res);
-    return true;
-  }
   // Polled once a second by the panel and the recorder, so creating a session here would start a
   // capture nothing asked for, and re-create one every tick after the simulator is shut down.
   if (endpoint === "/webrtc/stats") {
@@ -977,6 +963,8 @@ export function previewConfigForState(
   execToken: string,
   streamSettingsOrCodec?: StreamSettings | string,
   proxyHelpers = false,
+  requirePreviewToken = false,
+  shareUrl?: string,
 ): ServeSimState & {
   basePath: string;
   logsEndpoint: string;
@@ -1003,6 +991,8 @@ export function previewConfigForState(
   codec?: string;
   streamSettings?: StreamSettings;
   proxyHelpers?: boolean;
+  requireToken?: boolean;
+  shareUrl?: string;
 } {
   const gridApiBase = (base === "" ? "" : base) + "/grid/api";
   const legacyCodec = typeof streamSettingsOrCodec === "string" ? streamSettingsOrCodec : undefined;
@@ -1037,6 +1027,8 @@ export function previewConfigForState(
     ...(legacyCodec ? { codec: legacyCodec } : {}),
     ...(streamSettings ? { streamSettings } : {}),
     ...(proxyHelpers ? { proxyHelpers: true } : {}),
+    ...(requirePreviewToken ? { requireToken: true } : {}),
+    ...(shareUrl ? { shareUrl } : {}),
   };
 }
 
@@ -1496,12 +1488,16 @@ export interface SimMiddlewareOptions {
   /** Stream transport and codec settings for the preview. */
   streamSettings?: StreamSettings;
   /**
-   * Origins allowed to read the `/metrics` SSE stream cross-origin (e.g. a
-   * hosted dashboard). Read-only telemetry only; the control routes stay
-   * same-origin + token-gated regardless. Loopback is always allowed.
+   * Origins allowed to read this preview cross-origin (e.g. a hosted dashboard).
+   * Every route answers with the policy, so the token gate stays the thing that
+   * decides access. Loopback is always allowed.
    */
+  corsOrigins?: string[];
+  /** @deprecated Use `corsOrigins`. */
   metricsCorsOrigins?: string[];
   frameAncestors?: string[];
+  /** Public page the Share button copies instead of this preview's address. */
+  shareUrl?: string;
   /** @deprecated Use `streamSettings: { transport: "http", codec }`. */
   codec?: string;
   /**
@@ -1540,7 +1536,6 @@ export function handleMetricsRequest(
   res: SimRes,
   state: ServeSimState | null,
   samplerCache: MetricsSamplerCache = metricsSamplerCache,
-  corsOrigins: readonly string[] = [],
   tracker: ForegroundTrackerCache = foregroundTracker,
 ): void {
   if (!state) {
@@ -1553,7 +1548,6 @@ export function handleMetricsRequest(
     "Cache-Control": "no-cache",
     Connection: "keep-alive",
     "X-Accel-Buffering": "no",
-    ...corsAllowOriginHeaders(req.headers.origin, corsOrigins),
   });
   res.write(":\n\n");
   // Keep the foreground tail warm for this stream's lifetime so the sampler can scope to the
@@ -1586,8 +1580,13 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
   // can't read this value (it's only injected into the preview page's config).
   const execToken = options?.execToken ?? randomBytes(32).toString("base64url");
   const requirePreviewToken = options?.requirePreviewToken ?? false;
-  const metricsCorsOrigins = options?.metricsCorsOrigins ?? [];
+  const corsOrigins = [...(options?.corsOrigins ?? []), ...(options?.metricsCorsOrigins ?? [])];
   const frameAncestors = options?.frameAncestors ?? [];
+  const shareUrl = options?.shareUrl;
+  // The proxied DevTools frontend sits behind the same cookie, so its document needs the policy too.
+  const framePolicyHeaders: Record<string, string> = requirePreviewToken
+    ? { "Content-Security-Policy": frameAncestorsPolicy(frameAncestors) }
+    : {};
 
   // Simulator-settings requests run in-process (just the underlying simctl /
   // ax-tool spawn) instead of round-tripping a full `node <cli>` exec per
@@ -1637,6 +1636,25 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
     const rawUrl: string = req.url ?? "";
     const qIndex = rawUrl.indexOf("?");
     const url = qIndex === -1 ? rawUrl : rawUrl.slice(0, qIndex);
+    const ownPath = url === base || url.startsWith(`${base}/`);
+    // Whole-middleware, so a new route is reachable cross-origin without opting in.
+    if (ownPath) {
+      // Unconditional, including when the origin is refused: a cached copy carrying no policy
+      // would otherwise be replayed to an origin that is allowed one.
+      res.setHeader("Vary", "Origin");
+      const corsHeaders = corsAllowOriginHeaders(req.headers.origin, corsOrigins);
+      for (const [name, value] of Object.entries(corsHeaders)) res.setHeader(name, value);
+    }
+    // A preflight carries no cookie and no token, so it has to be answered before the gate.
+    if (ownPath && req.method === "OPTIONS") {
+      res.writeHead(204, {
+        "Access-Control-Allow-Methods": "GET, POST, PATCH, OPTIONS",
+        "Access-Control-Allow-Headers": "Authorization, Content-Type",
+        "Access-Control-Max-Age": "600",
+      });
+      res.end();
+      return;
+    }
     const requestedDevice = queryDevice(rawUrl);
     const selectedDevice = requestedDevice ?? options?.device ?? null;
     const devtoolsFrontendBase = base === "/" ? "/devtools-frontend" : `${base}/devtools-frontend`;
@@ -1682,10 +1700,13 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
         const upstream = await fetch(
           `https://chrome-devtools-frontend.appspot.com/serve_rev/@${DEVTOOLS_FRONTEND_REV}/${assetPath}${upstreamSuffix}`,
         );
+        const contentType = upstream.headers.get("content-type");
+        const isDocument = contentType?.startsWith("text/html") ?? false;
         const headers: Record<string, string> = {
-          "Cache-Control": "public, max-age=604800",
+          // A cached copy would otherwise outlive the policy it was fetched under.
+          "Cache-Control": isDocument ? "no-store" : "public, max-age=604800",
+          ...(isDocument ? framePolicyHeaders : {}),
         };
-        const contentType = upstream.headers.get("content-type");
         if (contentType) headers["Content-Type"] = contentType;
         res.writeHead(upstream.status, headers);
         res.end(Buffer.from(await upstream.arrayBuffer()));
@@ -1706,7 +1727,11 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
         // Empty-state UI still polls /exec (boot/list helpers), so the page
         // needs the bearer token even before a helper attaches. Inject a
         // minimal config with just the basePath + token.
-        const minimal = JSON.stringify({ basePath: base, execToken });
+        const minimal = JSON.stringify({
+          basePath: base,
+          execToken,
+          ...(shareUrl ? { shareUrl } : {}),
+        });
         html = html.replace(
           "<!--__SIM_PREVIEW_CONFIG__-->",
           `<script>window.__SIM_PREVIEW__=${minimal}</script>`,
@@ -1715,7 +1740,9 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
 
       if (state) {
         const remoteState = rewriteStateForRequestHost(state, hostForRequest(req), base, httpProtocolForRequest(req), proxyHelpers);
-        const config = JSON.stringify(previewConfigForState(remoteState, base, execToken, streamSettings, proxyHelpers));
+        const config = JSON.stringify(
+          previewConfigForState(remoteState, base, execToken, streamSettings, proxyHelpers, requirePreviewToken, shareUrl),
+        );
         const configScript = `<script>window.__SIM_PREVIEW__=${config}</script>`;
         html = html.replace("<!--__SIM_PREVIEW_CONFIG__-->", configScript);
       }
@@ -1723,9 +1750,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
       res.writeHead(200, {
         "Content-Type": "text/html; charset=utf-8",
         "Cache-Control": "no-store",
-        ...(requirePreviewToken
-          ? { "Content-Security-Policy": frameAncestorsPolicy(frameAncestors) }
-          : {}),
+        ...framePolicyHeaders,
       });
       res.end(html);
       return;
@@ -2153,7 +2178,13 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
         "Cache-Control": "no-store",
       });
       const remoteState = state ? rewriteStateForRequestHost(state, hostForRequest(req), base, httpProtocolForRequest(req), proxyHelpers) : null;
-      res.end(JSON.stringify(remoteState ? previewConfigForState(remoteState, base, execToken, streamSettings, proxyHelpers) : null));
+      res.end(
+        JSON.stringify(
+          remoteState
+            ? previewConfigForState(remoteState, base, execToken, streamSettings, proxyHelpers, requirePreviewToken, shareUrl)
+            : null,
+        ),
+      );
       return;
     }
 
@@ -2164,7 +2195,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
     if (url === base + "/api/screenshot") {
       if (req.method !== "POST") {
         res.writeHead(405, {
-          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Cache-Control": "no-store",
           "Content-Type": "text/plain; charset=utf-8",
         });
         res.end("method not allowed");
@@ -2173,7 +2204,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
       let udid = selectedDevice;
       if (udid && !isSimulatorUdid(udid)) {
         res.writeHead(400, {
-          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Cache-Control": "no-store",
           "Content-Type": "application/json",
         });
         res.end(JSON.stringify({ ok: false, error: "Invalid simulator device ID" }));
@@ -2185,7 +2216,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
       }
       if (!udid) {
         res.writeHead(400, {
-          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Cache-Control": "no-store",
           "Content-Type": "application/json",
         });
         res.end(JSON.stringify({ ok: false, error: "No booted simulator to screenshot" }));
@@ -2208,7 +2239,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
         });
         const png = await readFile(file);
         res.writeHead(200, {
-          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Cache-Control": "no-store",
           "Content-Type": "image/png",
         });
         res.end(png);
@@ -2218,7 +2249,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
           (typeof stderr === "string" && stderr.trim()) ||
           (err instanceof Error ? err.message : String(err));
         res.writeHead(500, {
-          ...SCREENSHOT_RESPONSE_HEADERS,
+          "Cache-Control": "no-store",
           "Content-Type": "application/json",
         });
         res.end(JSON.stringify({ ok: false, error: message }));
@@ -2289,7 +2320,9 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
         const state = selectServeSimState(states, selectedDevice);
         const remoteState = state ? rewriteStateForRequestHost(state, hostForRequest(req), base, httpProtocolForRequest(req), proxyHelpers) : null;
         return JSON.stringify(
-          remoteState ? previewConfigForState(remoteState, base, execToken, streamSettings, proxyHelpers) : null,
+          remoteState
+            ? previewConfigForState(remoteState, base, execToken, streamSettings, proxyHelpers, requirePreviewToken, shareUrl)
+            : null,
         );
       };
 
@@ -2440,7 +2473,7 @@ export function simMiddleware(options?: SimMiddlewareOptions): SimMiddleware {
     if (url === base + "/metrics") {
       const states = await readServeSimStates();
       const state = selectServeSimState(states, selectedDevice);
-      handleMetricsRequest(req, res, state, metricsSamplerCache, metricsCorsOrigins);
+      handleMetricsRequest(req, res, state, metricsSamplerCache);
       return;
     }