From 453f15628e4eadb4e0383d9ff6e0d7d1cb30832f Mon Sep 17 00:00:00 2001
From: lucas-spin <lucas-spin@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:37:02 +0000
Subject: [PATCH] fix(playground): inject in-memory localStorage shim to fix
 SecurityError in sandbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

sandbox="allow-scripts" (added in PR #34) blocks real localStorage access
inside the iframe, causing TypeComposer's runtime to throw:

  SecurityError: Failed to read the 'localStorage' property from 'Window':
  The document is sandboxed and lacks the 'allow-same-origin' flag.

Adding allow-same-origin is not the right fix:
- The iframe loads a blob: URL, which always has an opaque origin, so
  allow-same-origin cannot grant access to the parent page's storage anyway.
- It would also weaken the sandbox comment/intent and confuse future readers.

The correct fix is to shim window.localStorage and window.sessionStorage with
a lightweight in-memory Map-backed implementation that is installed before any
module code runs (as the first <script> tag in <head>, before the importmap).
The shim only activates when a try/catch probe detects that real localStorage
throws a SecurityError — no-op if the browser ever allows it.

The shim is deliberately non-persistent (lifetime = iframe document). Any
TypeComposer code that probes storage for feature detection or theme prefs
will work correctly; actual persistence is not meaningful inside a preview
iframe anyway.

Files changed:
  src/views/playground/PlaygroundView.ts — shim <script> injected before
  importmap; sandbox attribute comment and JSDoc updated.

Reported by: João (post-merge of PR #35)
---
 src/views/playground/PlaygroundView.ts | 65 +++++++++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)
diff --git a/src/views/playground/PlaygroundView.ts b/src/views/playground/PlaygroundView.ts
index 12bcf38..7aea659 100644
--- a/src/views/playground/PlaygroundView.ts
+++ b/src/views/playground/PlaygroundView.ts
@@ -249,8 +249,11 @@ export class PlaygroundView extends Component {
 		// Create iframe for preview.
 		// sandbox="allow-scripts": user code runs in a sandboxed context without
 		// access to window.parent, cookies, or the docs page DOM.
-		// allow-same-origin is intentionally omitted — blob: URLs are always
-		// opaque-origin, so omitting it makes the sandbox stricter, not weaker.
+		// allow-same-origin is intentionally omitted — blob: URLs always have an
+		// opaque origin so adding it would have no effect; and without it the
+		// browser blocks localStorage access inside the iframe (SecurityError).
+		// A safe in-memory localStorage shim is injected into the iframe HTML
+		// (see createIframeHTML) so TypeComposer can probe storage without error.
 		this.iframe = previewPanel.appendChild(new IFrameElement({ 
 			className: "flex-1",
 		})) as IFrameElement;
@@ -315,6 +318,11 @@ export class PlaygroundView extends Component {
 	 * The import map resolves `typecomposer` to the jsDelivr CDN (+esm single bundle).
 	 * esm.sh is broken for this package (HTTP 500 on its generated core.mjs due to
 	 * a circular re-export); jsDelivr bundles it correctly with Rollup.
+	 *
+	 * An in-memory localStorage shim is injected before the import map so that
+	 * TypeComposer's runtime can probe storage without throwing a SecurityError in
+	 * the sandboxed iframe (sandbox="allow-scripts" without allow-same-origin blocks
+	 * real localStorage; the shim keeps state within the iframe lifetime only).
 	 */
 	private createIframeHTML(compiledCode: string): string {
 		// jsdelivr +esm bundles the package into a single ES module without the
@@ -334,6 +342,59 @@ export class PlaygroundView extends Component {
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>TypeComposer Preview</title>
+  <script>
+    // In-memory localStorage shim — required because the iframe runs under
+    // sandbox="allow-scripts" without allow-same-origin, which causes the
+    // browser to throw a SecurityError on any localStorage access.
+    // This shim provides a Map-backed storage that behaves like the real API
+    // for the lifetime of the iframe document (not persisted across reloads).
+    (function () {
+      try {
+        // Quick probe: if this succeeds, real localStorage is available.
+        void window.localStorage;
+      } catch (_e) {
+        // Real localStorage is inaccessible — install the in-memory shim.
+        var _store = Object.create(null);
+        var _length = 0;
+        var _shimStorage = {
+          get length() { return _length; },
+          key: function (index) {
+            return Object.keys(_store)[index] !== undefined ? Object.keys(_store)[index] : null;
+          },
+          getItem: function (key) {
+            return Object.prototype.hasOwnProperty.call(_store, key) ? _store[key] : null;
+          },
+          setItem: function (key, value) {
+            if (!Object.prototype.hasOwnProperty.call(_store, key)) _length++;
+            _store[key] = String(value);
+          },
+          removeItem: function (key) {
+            if (Object.prototype.hasOwnProperty.call(_store, key)) {
+              delete _store[key];
+              _length--;
+            }
+          },
+          clear: function () { _store = Object.create(null); _length = 0; }
+        };
+        try {
+          Object.defineProperty(window, 'localStorage', {
+            value: _shimStorage,
+            writable: false,
+            configurable: true
+          });
+          Object.defineProperty(window, 'sessionStorage', {
+            value: _shimStorage,
+            writable: false,
+            configurable: true
+          });
+        } catch (_defineErr) {
+          // Last resort: assign directly (older browsers / CSP edge cases)
+          window.localStorage = _shimStorage;
+          window.sessionStorage = _shimStorage;
+        }
+      }
+    })();
+  </script>
   <script type="importmap">
   {
     "imports": {
