fix(captions): derive preview GSAP integrity (#3631)

Co-authored-by: heygengenesis[bot] <262951085+heygengenesis[bot]@users.noreply.github.com>
Co-authored-by: miguel.sierra <229591595+miguel-heygen@users.noreply.github.com>

Author: heygengenesis[bot]

skills-manifest.json

@@ -2,8 +2,8 @@
   "source": "heygen-com/hyperframes",
   "skills": {
     "embedded-captions": {
-      "hash": "ab099eb22321e865",
-      "files": 138
+      "hash": "84d986fddfc717a1",
+      "files": 139
     },
     "faceless-explainer": {
       "hash": "a7080101c30ceeb7",

skills/embedded-captions/scripts/preview-frames.cjs

@@ -23,6 +23,21 @@
 const path = require("path");
 const fs = require("fs");
 const os = require("os");
+const crypto = require("crypto");
+const { pathToFileURL } = require("url");
+
+function sriSha384(source) {
+  return `sha384-${crypto.createHash("sha384").update(source).digest("base64")}`;
+}
+
+function withPreviewGsapSri(html, gsapSource) {
+  const integrity = sriSha384(gsapSource);
+  return html.replace(/<script\b(?=[^>]*\bsrc=["'][^"']*gsap[^"']*["'])[^>]*>/gi, (tag) =>
+    tag
+      .replace(/\s+integrity\s*=\s*(?:"[^"]*"|'[^']*')/gi, "")
+      .replace(/>$/, ` integrity="${integrity}">`),
+  );
+}
 
 const HF_ROOTS = [
   process.env.HYPERFRAMES_ROOT,
@@ -63,10 +78,10 @@ for (const r of HF_ROOTS) {
   }
   if (!gsapSource) {
     const g = findInBun(r, "gsap", path.join("dist", "gsap.min.js"));
-    if (g) gsapSource = fs.readFileSync(g, "utf8");
+    if (g) gsapSource = fs.readFileSync(g);
   }
 }
-if (!puppeteer || !sharp) {
+if (require.main === module && (!puppeteer || !sharp)) {
   console.error("[preview] need puppeteer+sharp — set HYPERFRAMES_ROOT");
   process.exit(0);
 }
@@ -80,17 +95,23 @@ async function shotAt(browser, file, W, H, t) {
     // evaluation runs while document.head is still null, and gsap's init then
     // throws "appendChild of null" — which killed previews for theme projects.
     await page.setRequestInterception(true);
+    const documentUrl = pathToFileURL(file).href;
+    const documentHtml = gsapSource
+      ? withPreviewGsapSri(fs.readFileSync(file, "utf8"), gsapSource)
+      : fs.readFileSync(file, "utf8");
     page.on("request", (req) => {
       const u = req.url();
-      if (req.resourceType() === "script" && /gsap/i.test(u) && /^https?:/i.test(u)) {
+      if (req.isNavigationRequest() && u === documentUrl) {
+        req.respond({ status: 200, contentType: "text/html", body: documentHtml });
+      } else if (req.resourceType() === "script" && /gsap/i.test(u) && /^https?:/i.test(u)) {
         if (gsapSource)
           req.respond({ status: 200, contentType: "application/javascript", body: gsapSource });
         else req.continue(); // no local bundle — let the CDN load (online machines)
       } else if (req.resourceType() === "media")
         req.abort(); // a-roll pixels come from frames_bg
       else req.continue();
     });
-    await page.goto(`file://${file}`, { waitUntil: "load", timeout: 15000 });
+    await page.goto(documentUrl, { waitUntil: "load", timeout: 15000 });
     const t0 = Date.now();
     let tlReady = false;
     while (Date.now() - t0 < 15000) {
@@ -260,9 +281,13 @@ async function main() {
     await Promise.race([browser.close().catch(() => {}), new Promise((r) => setTimeout(r, 8000))]);
   }
 }
-main()
-  .then(() => process.exit(0))
-  .catch((e) => {
-    console.error("[preview]", e.message);
-    process.exit(1);
-  });
+if (require.main === module) {
+  main()
+    .then(() => process.exit(0))
+    .catch((e) => {
+      console.error("[preview]", e.message);
+      process.exit(1);
+    });
+}
+
+module.exports = { sriSha384, withPreviewGsapSri };

skills/embedded-captions/scripts/preview-frames.test.mjs

@@ -0,0 +1,24 @@
+import assert from "node:assert/strict";
+import crypto from "node:crypto";
+import { createRequire } from "node:module";
+import test from "node:test";
+
+const require = createRequire(import.meta.url);
+const { sriSha384, withPreviewGsapSri } = require("./preview-frames.cjs");
+
+test("preview GSAP integrity matches the intercepted asset bytes", () => {
+  const servedAsset = Buffer.from("the exact local GSAP response body");
+  const html = `
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-stale" crossorigin="anonymous"></script>
+    <script src="https://cdn.example.test/app.js" integrity="sha384-app" crossorigin="anonymous"></script>
+  `;
+
+  const emitted = withPreviewGsapSri(html, servedAsset);
+  const expected = `sha384-${crypto.createHash("sha384").update(servedAsset).digest("base64")}`;
+  const gsapTag = emitted.match(/<script[^>]*gsap[^>]*>/i)[0];
+
+  assert.equal(sriSha384(servedAsset), expected);
+  assert.match(gsapTag, new RegExp(`integrity="${expected}"`));
+  assert.match(gsapTag, /crossorigin="anonymous"/);
+  assert.match(emitted, /app\.js" integrity="sha384-app" crossorigin="anonymous"/);
+});