Interactive static assets imported as SVG, MP3 or MP4 never load because the service worker rejects their data URLs #1796

Activity

1. joshunrau

   added

   BugType: existing behavior is wrongType: existing behavior is wrong

   Priority: MediumReal value; schedule normallyReal value; schedule normally

   Difficulty: LowIsolated change, about 2 hours or lessIsolated change, about 2 hours or less

   Area: InstrumentsInstrument authoring API, bundling, runtime, rendering, measures and the built-in libraryInstrument authoring API, bundling, runtime, rendering, measures and the built-in library

   Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorWell-scoped, low-risk and self-contained; a good entry point for a new contributor

   on Oct 7, 2026
2. joshunrau commented on Oct 26, 2026

   

   joshunrau

   on Oct 26, 2026

   CollaboratorAuthor

   More actions

   Still reproduces on main (d86740e). dataUrlToResponse (worker.js:22-51) and the dataurl branch of inferLoader (utils.ts:24) are unchanged, and no open PR touches worker.js.

   decodeURIComponent would still break SVGs

   esbuild's percent form escapes only tab, CR, LF, #, trailing whitespace, and a % that already starts a hex escape (dataurl.go @ v0.28.2). Every other % is left as is. With esbuild 0.28.2, <svg width="100%" fill="#f00"> becomes data:image/svg+xml,<svg width="100%" fill="%23f00">, and decodeURIComponent throws URIError: URI malformed on 100%". The suggested fix would still fail for any SVG with a percentage length or gradient offset.

   The Fetch spec's data: URL processor percent-decodes leniently and handles ;base64 and MIME parameters. Let it do the decoding:

   async function dataUrlToResponse(dataUrl) {
     if (!dataUrl.startsWith('data:')) {
       throw new Error(`Static asset is not a data URL: '${dataUrl}'`);
     }
     return new Response(await (await fetch(dataUrl)).blob());
   }

   • new Response(blob) takes its Content-Type from the blob. It has no URL of its own, so the page still sees the request URL, as it does today.
   • Pass the promise to respondWith. A bad value then fails that one request as a network error instead of falling through to the server.
   • Node 24's fetch decodes data: URLs too, and worker.test.ts runs in the node environment, so the unit tests exercise the real decoding.
   • Nothing in the repo sets a Content-Security-Policy. A deployment that adds one whose connect-src leaves out data: would block this fetch.

   MP4 is not always video/mp4

   esbuild's MIME table has no .mp4 (mime.go @ v0.28.2), so it falls back to Go's http.DetectContentType. That returns video/mp4 only when the ftyp box lists an mp4* brand. The playground's cat-video.mp4 does (mp42). A qt file, or an isom iso2 avc1 file without mp41, comes out as data:application/octet-stream;base64,…. The worker above serves that as is. Forcing video/mp4 would mean the bundler sets the type itself, which is a separate change.

   Tests

   • worker.test.ts: use the forms above, with a bare % and a %23 in the SVG and an application/octet-stream MP4. respondWith now receives a promise, so await it in the existing tests. 'should throw for an unsupported data URL' (:101-104) uses data:application/json,{}, which becomes valid. Replace it with a non-data: value and assert that the promise rejects.
   • e2e: instrument-completion.spec.ts would need an instrument with staticAssets in apps/web, and no built-in instrument has one. Use testing/src/specs/playground.spec.ts instead, next to the upper-case PNG share-link test (:188). That test sets image.src to the data URL, so it never reaches the worker. Put icon.svg in the link as plain text: the playground base64-decodes only files that inferFileType maps to asset, and .svg maps to html (file.ts:20, :30-36). Declare staticAssets: { '/icon.svg': icon } and put <img src="icon.svg"> in html. Give the root <svg> a fixed width/height, put the % and the # on a child, and assert naturalWidth > 0.

   Other notes

   • Out of scope here: the worker answers <audio>/<video> Range requests with a 200 that carries the whole body. Safari has been reported to need a 206 from a service worker for media (write-up). Playwright runs only chromium and firefox, so check MP3/MP4 in Safari by hand, and file the 206 work separately if it fails there.
   • Docs: once the worker no longer depends on the MIME type, adding an extension to the bundler needs no worker.js change, so it stays off the bundler AGENTS.md list of files to change together. Say in packages/runtime-internal/AGENTS.md that the worker serves any data: URL. packages/instrument-guidelines/AGENTS.md (:516, :542, :697) calls imported assets base64 data URLs, which an SVG is not. That file is a published package, so fixing the wording is a release of its own.
   • Land this before Interactive static assets stop loading after the browser stops the idle service worker, which keeps them only in memory #1797, or in the same PR, so Interactive static assets stop loading after the browser stops the idle service worker, which keeps them only in memory #1797's Cache Storage holds these Responses. build: upgrade dependencies held back by breaking changes #1660, fix(playground): search instruments by label #1817 and fix: resolve 26 low-difficulty issues, one commit each #1825 also edit playground.spec.ts.
   • Stored bundles need no rebuild. Users get the fix when web, gateway and playground are rebuilt, since each copies the runtime in through @opendatacapture/vite-plugin-runtime.

   _{Triage note written with Claude Code. Code references point at main @ d86740e.}
3. joshunrau

   closed this as completedin #1852on Nov 5, 2026