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

Fixes #3629

Summary

• Derive the preview document's GSAP SHA-384 SRI from the exact local buffer returned by the request interceptor.
• Preserve the production-generated SRI tag and crossorigin; only the in-memory document served to the offline preview is updated.
• Add a regression test proving the emitted GSAP integrity value matches the intercepted bytes.

Root cause

make-theme.cjs emits a pinned GSAP 3.14.2 CDN tag with SRI, while preview-frames.cjs resolves and serves the locally installed bundle (currently [email protected]). Chromium correctly blocked those mismatched bytes.

Evidence

node /tmp/hf3629-e2e/sri-browser-check.cjs completed with browser preview loaded; no SRI console error; it asserted that window.__timelines.main registered and that the page emitted no integrity/SRI console errors.

Tests

• bun test skills/embedded-captions/scripts/preview-frames.test.mjs
• bun run lint

Commit-pinned links

• Offending generated tag on main:

  hyperframes/skills/embedded-captions/scripts/make-theme.cjs

  Line 561 in 05b57f9

  const GSAP = `<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>`;

• Main asset resolution and served response:

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

  Lines 64 to 91 in 05b57f9

  	if (!gsapSource) {
  	const g = findInBun(r, "gsap", path.join("dist", "gsap.min.js"));
  	if (g) gsapSource = fs.readFileSync(g, "utf8");
  	}
  	}
  	if (!puppeteer || !sharp) {
  	console.error("[preview] need puppeteer+sharp — set HYPERFRAMES_ROOT");
  	process.exit(0);
  	}
  	async function shotAt(browser, file, W, H, t) {
  	const page = await browser.newPage();
  	try {
  	await page.setViewport({ width: W, height: H, deviceScaleFactor: 1 });
  	// Serve the page's own CDN <script src=gsap> request from the local bundle
  	// (offline-safe) instead of injecting gsap at document-start: a document-start
  	// 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);
  	page.on("request", (req) => {
  	const u = req.url();
  	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();

• Head hash derivation:

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

  Lines 26 to 40 in 2e630d3

  	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}">`),
  	);
  	}

• Head in-memory document rewrite and local response:

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

  Lines 79 to 114 in 2e630d3

  	if (!gsapSource) {
  	const g = findInBun(r, "gsap", path.join("dist", "gsap.min.js"));
  	if (g) gsapSource = fs.readFileSync(g);
  	}
  	}
  	if (require.main === module && (!puppeteer || !sharp)) {
  	console.error("[preview] need puppeteer+sharp — set HYPERFRAMES_ROOT");
  	process.exit(0);
  	}
  	async function shotAt(browser, file, W, H, t) {
  	const page = await browser.newPage();
  	try {
  	await page.setViewport({ width: W, height: H, deviceScaleFactor: 1 });
  	// Serve the page's own CDN <script src=gsap> request from the local bundle
  	// (offline-safe) instead of injecting gsap at document-start: a document-start
  	// 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.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(documentUrl, { waitUntil: "load", timeout: 15000 });

• Head regression test:

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

  Lines 1 to 24 in 2e630d3

  	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/[email protected]/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"/);
  	});

• Required generated skill manifest update:

  hyperframes/skills-manifest.json

  Lines 4 to 7 in 2e630d3

  	"embedded-captions": {
  	"hash": "84d986fddfc717a1",
  	"files": 139
  	},

No #3628 changes and no production/config changes.