fix(studio): secure targeted WebMCP writes

Author: miguel-heygen

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

@@ -1,6 +1,14 @@
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
+import { mkdtempSync, rmSync, statSync, utimesSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
 import { resolve } from "node:path";
-import { affectsProjectSignature } from "./projectSignature.js";
+import { affectsProjectSignature, createProjectSignature } from "./projectSignature.js";
+
+const temporaryProjects: string[] = [];
+
+afterEach(() => {
+  for (const project of temporaryProjects.splice(0)) rmSync(project, { recursive: true });
+});
 
 const PROJECT = resolve("/projects/demo");
 const affects = (relativePath: string) =>
@@ -42,3 +50,19 @@ describe("affectsProjectSignature", () => {
     expect(affectsProjectSignature(PROJECT, PROJECT)).toBe(false);
   });
 });
+
+describe("createProjectSignature", () => {
+  it("changes after same-size content is written with the original mtime restored", () => {
+    const project = mkdtempSync(resolve(tmpdir(), "hf-signature-"));
+    temporaryProjects.push(project);
+    const file = resolve(project, "index.html");
+    writeFileSync(file, "first");
+    const originalMtime = statSync(file).mtime;
+    const before = createProjectSignature(project);
+
+    writeFileSync(file, "other");
+    utimesSync(file, originalMtime, originalMtime);
+
+    expect(createProjectSignature(project)).not.toBe(before);
+  });
+});

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

@@ -70,6 +70,7 @@ export function affectsProjectSignature(projectDir: string, changedPath: string)
 interface ProjectSignatureFile {
   file: string;
   mtimeMs: number;
+  ctimeMs: number;
   size: number;
   textContentEligible: boolean;
 }
@@ -124,6 +125,7 @@ function collectProjectSignatureFiles(
       files.push({
         file,
         mtimeMs: stat.mtimeMs,
+        ctimeMs: stat.ctimeMs,
         size: stat.size,
         textContentEligible: isTextContentEligible(file, stat.size),
       });
@@ -149,6 +151,7 @@ function collectProjectSignatureManifestFiles(
     files.push({
       file,
       mtimeMs: stat.mtimeMs,
+      ctimeMs: stat.ctimeMs,
       size: stat.size,
       textContentEligible: isTextContentEligible(file, stat.size),
     });
@@ -165,6 +168,8 @@ function createProjectFingerprint(projectDir: string, files: ProjectSignatureFil
     hash.update("\0");
     hash.update(String(entry.mtimeMs));
     hash.update("\0");
+    hash.update(String(entry.ctimeMs));
+    hash.update("\0");
     hash.update(entry.textContentEligible ? "text" : "binary");
     hash.update("\0");
   }

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

@@ -1333,6 +1333,30 @@ const tl = gsap.timeline({ paused: true });
     expect(res.status).toBe(400);
   });
 
+  it("rejects raw JavaScript expressions at the GSAP mutation boundary", async () => {
+    const projectDir = createProjectDir();
+    writeHtml(projectDir, "comp.html", FROMTO_COMP);
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+    const animation = await getFirstAnimation(app, "comp.html");
+
+    const response = await app.request("http://localhost/projects/demo/gsap-mutations/comp.html", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type: "update-meta",
+        animationId: animation.id,
+        updates: { ease: "__raw:(()=>alert(1))()" },
+      }),
+    });
+
+    expect(response.status).toBe(400);
+    expect(await response.json()).toEqual({
+      error: "raw JavaScript expressions are not accepted",
+    });
+    expect(readFileSync(join(projectDir, "comp.html"), "utf8")).toBe(FROMTO_COMP);
+  });
+
   it("update-from-property updates a fromTo start value in place", async () => {
     const projectDir = createProjectDir();
     writeHtml(projectDir, "comp.html", FROMTO_COMP);

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

@@ -1186,6 +1186,9 @@ function validateGsapMutationRequest(
   if (!body || typeof body !== "object" || !("type" in body) || !body.type) {
     return c.json({ error: "mutation type required" }, 400);
   }
+  if (containsRawGsapExpression(body)) {
+    return c.json({ error: "raw JavaScript expressions are not accepted" }, 400);
+  }
   const unsafeFields = findUnsafeMutationValues(body);
   if (unsafeFields.length > 0) return rejectUnsafeMutationValues(c, unsafeFields);
   if (
@@ -1197,6 +1200,13 @@ function validateGsapMutationRequest(
   return null;
 }
 
+function containsRawGsapExpression(value: unknown): boolean {
+  if (typeof value === "string") return value.startsWith("__raw:");
+  if (Array.isArray(value)) return value.some(containsRawGsapExpression);
+  if (!value || typeof value !== "object") return false;
+  return Object.values(value).some(containsRawGsapExpression);
+}
+
 async function prepareGsapMutationScript(
   c: RouteContext,
   res: ResolvedGsapFile,

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

@@ -14,6 +14,7 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { pruneThumbnailCache, registerThumbnailRoutes } from "./thumbnail";
 import type { StudioApiAdapter } from "../types";
+import { createProjectSignature } from "../helpers/projectSignature.js";
 
 const tempProjectDirs: string[] = [];
 
@@ -370,7 +371,7 @@ describe("registerThumbnailRoutes", () => {
     const adapter = createAdapter();
     const project = await adapter.resolveProject("demo");
     if (!project) throw new Error("missing project");
-    const getProjectSignature = vi.fn(() => "cached-project-signature");
+    const getProjectSignature = vi.fn(() => createProjectSignature(project.dir));
     adapter.getProjectSignature = getProjectSignature;
     let resolve!: (buffer: Buffer) => void;
     const generated = new Promise<Buffer>((done) => (resolve = done));

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

@@ -14,7 +14,7 @@ import { join } from "node:path";
 import { createHash, randomUUID } from "node:crypto";
 import type { StudioApiAdapter } from "../types.js";
 import { STUDIO_MANUAL_EDITS_PATH } from "../helpers/manualEditsRenderScript.js";
-import { resolveProjectAndSignature } from "../helpers/projectSignature.js";
+import { createProjectSignature, resolveProjectAndSignature } from "../helpers/projectSignature.js";
 import { STUDIO_MOTION_PATH } from "../helpers/studioMotionRenderScript.js";
 import { thumbnailGenerationCoordinator } from "./thumbnailGenerationCoordinator.js";
 
@@ -213,10 +213,12 @@ export function registerThumbnailRoutes(api: Hono, adapter: StudioApiAdapter): v
           });
           if (!generated) return null;
           const afterGeneration = await resolveProjectAndSignature(adapter, project.id);
+          const freshSignature = createProjectSignature(project.dir);
           if (
             !afterGeneration ||
             afterGeneration.project.dir !== project.dir ||
-            afterGeneration.signature !== projectSignature
+            afterGeneration.signature !== projectSignature ||
+            freshSignature !== projectSignature
           ) {
             // The browser may have rendered content written after this request
             // captured its cache identity. Return the pixels to this caller,

packages/studio/src/hooks/useDomEditCommits.test.tsx

@@ -41,6 +41,7 @@ interface RenderDomEditCommitsOptions {
   writeProjectFile?: (path: string, content: string, expectedContent?: string) => Promise<void>;
   onTrySdkPersist?: () => Promise<CutoverResult>;
   queueDomEditSave?: <T>(save: () => Promise<T>) => Promise<T>;
+  projectIdRef?: MutableRefObject<string | null>;
 }
 
 type FetchHandler = (
@@ -207,7 +208,7 @@ function renderDomEditCommits(
   const showToast = makeShowToast();
   const recordEdit = vi.fn(async () => {});
   const previewIframeRef: MutableRefObject<HTMLIFrameElement | null> = { current: iframe };
-  const projectIdRef: MutableRefObject<string | null> = { current: "p1" };
+  const projectIdRef: MutableRefObject<string | null> = options.projectIdRef ?? { current: "p1" };
   const domEditSaveTimestampRef: MutableRefObject<number> = { current: 0 };
   const reloadPreview = vi.fn();
 
@@ -1111,6 +1112,60 @@ describe("useDomEditCommits style persist handling", () => {
     }
   });
 
+  it("refuses queued persistence after the active project changes", async () => {
+    const firstPatch = createDeferred<Response>();
+    const projectIdRef: MutableRefObject<string | null> = { current: "p1" };
+    const fetchMock = vi.fn(async (input: Parameters<typeof fetch>[0]) => {
+      const url = requestUrl(input);
+      if (url.includes("/api/projects/p1/files/")) {
+        return jsonResponse({
+          content: '<div data-hf-id="hf-card" style="color: red">Card</div>',
+        });
+      }
+      if (url.includes("/api/projects/p1/file-mutations/patch-element/")) {
+        return firstPatch.promise;
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    const queue = createDomEditSaveQueue();
+    const { iframe, element } = createPreviewElement();
+    const rendered = renderDomEditCommits(createSelection(element), iframe, {
+      queueDomEditSave: queue.enqueue,
+      projectIdRef,
+    });
+
+    try {
+      const first = rendered.hook.handleDomStyleCommit("color", "blue");
+      await flushAsyncWork();
+      const second = rendered.hook.handleDomStyleCommit("color", "green");
+      projectIdRef.current = "p2";
+      firstPatch.resolve(
+        jsonResponse({
+          ok: true,
+          changed: true,
+          matched: true,
+          content: '<div data-hf-id="hf-card" style="color: blue">Card</div>',
+          path: "index.html",
+          version: '"sha256:blue"',
+        }),
+      );
+
+      await first;
+      await expect(second).resolves.toMatchObject({
+        ok: false,
+        reason: "persist-failed",
+      });
+      expect(fetchMock.mock.calls.some(([input]) => requestUrl(input).includes("/p2/"))).toBe(
+        false,
+      );
+      expect(fetchMock).toHaveBeenCalledTimes(2);
+    } finally {
+      queue.destroy();
+      rendered.cleanup();
+    }
+  });
+
   it("preserves the SDK cutover version as the style commit's durable evidence", async () => {
     const fetchMock = stubPatchFetch({ ok: true, changed: true, matched: true });
     const { iframe, element } = createPreviewElement();

packages/studio/src/hooks/useDomEditCommits.ts

@@ -139,11 +139,18 @@ export function useDomEditCommits({
   const reportedUnresolvableRef = useRef(new Set<string>());
 
   // fallow-ignore-next-line complexity
-  const performPersistDomEditOperations: PersistDomEditOperations = useCallback(
+  const performPersistDomEditOperations = useCallback(
     // fallow-ignore-next-line complexity
-    async (selection, operations, options) => {
-      const pid = projectIdRef.current;
-      if (!pid) throw new Error("No active project");
+    async (
+      selection: DomEditSelection,
+      operations: PatchOperation[],
+      options: Parameters<PersistDomEditOperations>[2],
+      expectedProjectId: string,
+    ) => {
+      if (projectIdRef.current !== expectedProjectId) {
+        throw new Error("Active project changed before the edit could be saved");
+      }
+      const pid = expectedProjectId;
       if (options?.shouldSave && !options.shouldSave()) return;
 
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -160,6 +167,10 @@ export function useDomEditCommits({
         throw new Error(`Missing file contents for ${targetPath}`);
       }
 
+      if (projectIdRef.current !== expectedProjectId) {
+        throw new Error("Active project changed before the edit could be saved");
+      }
+
       if (options?.shouldSave && !options.shouldSave()) return;
 
       // Validate layout values BEFORE any persist path runs. The SDK cutover
@@ -298,20 +309,29 @@ export function useDomEditCommits({
   );
 
   const persistDomEditOperations: PersistDomEditOperations = useCallback(
-    (selection, operations, options) =>
-      queueDomEditSave(() => performPersistDomEditOperations(selection, operations, options)),
-    [performPersistDomEditOperations, queueDomEditSave],
+    (selection, operations, options) => {
+      const expectedProjectId = projectIdRef.current;
+      if (!expectedProjectId) return Promise.reject(new Error("No active project"));
+      return queueDomEditSave(() =>
+        performPersistDomEditOperations(selection, operations, options, expectedProjectId),
+      );
+    },
+    [performPersistDomEditOperations, projectIdRef, queueDomEditSave],
   );
 
   const commitDomEditPatchBatches: CommitDomEditPatchBatches = useCallback(
-    (batches, options) =>
-      queueDomEditSave(
+    (batches, options) => {
+      const expectedProjectId = projectIdRef.current;
+      if (!expectedProjectId) return Promise.reject(new Error("No active project"));
+      return queueDomEditSave(
         // One queued transaction owns validation, persistence, history, reload,
         // and its durable result; splitting those phases risks partial commits.
         // fallow-ignore-next-line complexity
         async () => {
-          const pid = projectIdRef.current;
-          if (!pid) throw new Error("No active project");
+          if (projectIdRef.current !== expectedProjectId) {
+            throw new Error("Active project changed before the edit could be saved");
+          }
+          const pid = expectedProjectId;
           const unsafeFields = batches.flatMap((batch) =>
             batch.patches.flatMap((patch) => findUnsafeDomPatchValues(patch)),
           );
@@ -373,7 +393,8 @@ export function useDomEditCommits({
           label: options.label,
         });
         throw error;
-      }),
+      });
+    },
     [
       domEditSaveTimestampRef,
       editHistory,

packages/studio/src/hooks/useDomEditWiring.ts

@@ -223,7 +223,7 @@ export function useDomEditWiring({
   // ── Telemetry & fallback ──
 
   const trackGsapInteractionFailure = useGsapInteractionFailureTelemetry(activeCompPath, showToast);
-  const makeFetchFallback = useGsapAnimationFetchFallback(projectId, gsapSourceFile);
+  const makeFetchFallback = useGsapAnimationFetchFallback(projectId);
 
   // ── GSAP selection handlers ──
 

packages/studio/src/hooks/useGsapAnimationFetchFallback.test.ts

@@ -1,6 +1,18 @@
 import { describe, expect, it } from "vitest";
 import type { GsapAnimation, ParsedGsap } from "@hyperframes/core/gsap-parser";
-import { selectElementAnimationsOrRetry } from "./useGsapAnimationFetchFallback";
+import {
+  gsapSourceFileForSelection,
+  selectElementAnimationsOrRetry,
+} from "./useGsapAnimationFetchFallback";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+
+describe("gsapSourceFileForSelection", () => {
+  it("uses the explicit target source instead of ambient selection state", () => {
+    expect(
+      gsapSourceFileForSelection({ sourceFile: "compositions/card.html" } as DomEditSelection),
+    ).toBe("compositions/card.html");
+  });
+});
 
 const anim = (targetSelector: string): GsapAnimation =>
   ({ id: targetSelector, targetSelector, properties: {} }) as unknown as GsapAnimation;