Hosting a Slidev build in an opaque-origin sandbox (working example)

[rare]

I wanted a stable URL for a built Slidev deck while keeping the deck inside an iframe sandbox without allow-same-origin.

The unexpected failure was that Slidev reads localStorage during startup. In an opaque-origin iframe, that accessor throws a SecurityError before the app mounts, leaving a blank page.

The compatibility layer I ended up using is deliberately small:

1. Build the static Slidev app with local assets and hash routing.
2. Inject a guard before the first module script executes.
3. Replace localStorage and sessionStorage with Storage-compatible in-memory objects only when accessing the real APIs throws.
4. Package dist/ with index.html at the archive root.
5. Add a minimal postMessage navigation bridge for the parent reader.

I tested the result with Slidev 52.18.0:

• the first slide renders inside the opaque-origin sandbox;
• UI navigation advances from 1/3 to 2/3;
• a parent navigation message advances to 3/3;
• real browser storage remains untouched where it is available;
• the iframe sandbox remains unchanged.

Reproducible links:

• live three-slide example
• source, build fixture, and tests
• the compatibility injector
• step-by-step packaging guide

This is aimed at archive-based readers that intentionally use an opaque-origin sandbox; the official Slidev hosting guide remains the simpler route for GitHub Pages, Netlify, Vercel, and similar first-party deployments.

If Slidev already has, or would prefer, a storage adapter/startup hook for this environment, I would be interested in replacing the injection step with that supported seam.