fix(studio-server): keep the freeze still inside assets/freeze

The clip id from the project HTML went straight into ffmpeg's -y output
path, so an id with ../ segments wrote outside the project. The id is now
reduced to one safe filename component, the output is pinned inside
assets/freeze before extraction, and the still's src is built from that
name rather than from a filesystem path.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: vanceingalls

packages/studio-server/src/helpers/freezeFrame.test.ts

@@ -4,6 +4,7 @@ import {
   applyFreezeFrameToHtml,
   freezeExtractArgs,
   freezeFrameMediaTime,
+  freezeStillFileName,
   readFreezeSource,
 } from "./freezeFrame.js";
 
@@ -152,3 +153,12 @@ describe("applyFreezeFrameToHtml", () => {
     ).toBeNull();
   });
 });
+
+describe("freezeStillFileName", () => {
+  it("reduces a clip id to one safe filename component", () => {
+    expect(freezeStillFileName("talk", 2.5)).toBe("talk-2500.png");
+    expect(freezeStillFileName("../../etc/x", 1)).toBe("______etc_x-1000.png");
+    expect(freezeStillFileName("a\\b:c", 1)).toBe("a_b_c-1000.png");
+    expect(freezeStillFileName("", 1)).toBe("clip-1000.png");
+  });
+});

packages/studio-server/src/helpers/freezeFrame.ts

@@ -41,6 +41,11 @@ export function freezeExtractArgs(src: string, mediaTime: number, output: string
   return ["-y", "-ss", String(round3(mediaTime)), "-i", src, "-frames:v", "1", output];
 }
 
+export function freezeStillFileName(clipId: string, playhead: number): string {
+  const stem = clipId.replace(/[^A-Za-z0-9_-]/g, "_").slice(0, 80) || "clip";
+  return `${stem}-${Math.round(playhead * 1000)}.png`;
+}
+
 export interface FreezeSource {
   id: string;
   src: string;

packages/studio-server/src/routes/freezeFrame.test.ts

@@ -1,8 +1,8 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { Hono } from "hono";
-import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
-import { join } from "node:path";
+import { dirname, join } from "node:path";
 import { registerFreezeFrameRoutes, type FrameExtractor } from "./freezeFrame";
 import { fileContentVersion } from "../helpers/fileVersion";
 import type { StudioApiAdapter } from "../types";
@@ -16,10 +16,11 @@ const html = `<div data-composition-id="main" data-start="0" data-duration="6">
 <video id="talk" class="clip" src="media/talk.mp4" data-start="0" data-duration="6" data-track-index="0"></video>
 </div>`;
 
-function setup(extract: FrameExtractor) {
+function setup(extract: FrameExtractor, file = { path: "index.html", html }) {
   const dir = mkdtempSync(join(tmpdir(), "hf-freeze-"));
   tempDirs.push(dir);
-  writeFileSync(join(dir, "index.html"), html);
+  mkdirSync(dirname(join(dir, file.path)), { recursive: true });
+  writeFileSync(join(dir, file.path), file.html);
   const adapter: StudioApiAdapter = {
     listProjects: () => [],
     resolveProject: async (id: string) => ({ id, dir }),
@@ -98,4 +99,30 @@ describe("freeze-frame route", () => {
     expect(res.status).toBe(500);
     expect(readFileSync(join(dir, "index.html"), "utf-8")).toBe(html);
   });
+
+  it("keeps a traversal clip id inside assets/freeze, for the ffmpeg output and the still's src", async () => {
+    const evil = html.replace('id="talk"', 'id="../../../../outside/frame"');
+    const calls: string[][] = [];
+    const { dir, post } = setup(
+      async (args) => {
+        calls.push(args);
+        return { ok: true };
+      },
+      { path: "scenes/a.html", html: evil.replace('src="media/', 'src="../media/') },
+    );
+    const res = await post({
+      path: "scenes/a.html",
+      expectedVersion: fileContentVersion(evil.replace('src="media/', 'src="../media/')),
+      target: { id: "../../../../outside/frame" },
+      playhead: 2.5,
+    });
+    const body: { imageSrc?: string; after?: string } = await res.json();
+    expect(res.status).toBe(200);
+    const output = calls[0]?.at(-1);
+    expect(output).toBe(join(dir, "assets/freeze/____________outside_frame-2500.png"));
+    expect(dirname(output ?? "")).toBe(join(dir, "assets/freeze"));
+    expect(body.imageSrc).toBe("../assets/freeze/____________outside_frame-2500.png");
+    expect(body.after).toContain('src="../assets/freeze/____________outside_frame-2500.png"');
+    expect(existsSync(join(dir, "..", "outside"))).toBe(false);
+  });
 });

packages/studio-server/src/routes/freezeFrame.ts

@@ -15,6 +15,7 @@ import {
 import {
   applyFreezeFrameToHtml,
   freezeExtractArgs,
+  freezeStillFileName,
   readFreezeSource,
   type FreezeSource,
 } from "../helpers/freezeFrame.js";
@@ -62,7 +63,7 @@ function isFreezeFrameRequest(value: unknown): value is FreezeFrameRequest {
   );
 }
 
-const toPosix = (path: string) => path.split(sep).join("/");
+const FREEZE_DIR = ["assets", "freeze"];
 
 type Failure = { error: string; status: 403 | 404 | 409 | 500 };
 
@@ -88,17 +89,22 @@ async function extractStill(
   const fileDir = dirname(absPath);
   const mediaPath = pinWithinProject(projectDir, relative(projectDir, join(fileDir, source.src)));
   if (!mediaPath) return { error: `forbidden media path: ${source.src}`, status: 403 };
-  const freezeDir = join(projectDir, "assets", "freeze");
-  const imagePath = join(freezeDir, `${source.id}-${Math.round(playhead * 1000)}.png`);
+  const freezeDir = join(projectDir, ...FREEZE_DIR);
+  const fileName = freezeStillFileName(source.id, playhead);
   mkdirWithinProject(projectDir, freezeDir);
+  const imagePath = pinWithinProject(projectDir, join(...FREEZE_DIR, fileName));
+  if (!imagePath || dirname(imagePath) !== freezeDir) {
+    return { error: `forbidden freeze path: ${fileName}`, status: 403 };
+  }
   const extracted = await extract(freezeExtractArgs(mediaPath, source.mediaTime, imagePath));
   if (!extracted.ok) {
     return {
       error: `Could not extract the frame: ${extracted.error ?? "ffmpeg failed"}`,
       status: 500,
     };
   }
-  return { imageSrc: toPosix(relative(fileDir, imagePath)) };
+  const depth = relative(projectDir, fileDir).split(sep).filter(Boolean).length;
+  return { imageSrc: `${"../".repeat(depth)}${FREEZE_DIR.join("/")}/${fileName}` };
 }
 
 function writeFolded(