From 986a56993a2b212a2c37b56b0d59e24c1e39e401 Mon Sep 17 00:00:00 2001
From: Luc Mcgrady <lucmcgrady@gmail.com>
Date: Wed, 1 Oct 2025 13:44:34 +0100
Subject: [PATCH] sandbox iframe and use ts-page

---
 build/configure/src/web.rs            | 11 ++++++++++
 qt/aqt/mediasrv.py                    |  1 -
 ts/routes/reviewer-inner/+page.svelte | 30 ---------------------------
 ts/routes/reviewer-inner/index.ts     | 26 +++++++++++++++++++++++
 ts/routes/reviewer/Reviewer.svelte    |  3 ++-
 ts/routes/reviewer/reviewer.ts        | 13 +++++++++---
 6 files changed, 49 insertions(+), 35 deletions(-)
 delete mode 100644 ts/routes/reviewer-inner/+page.svelte
 create mode 100644 ts/routes/reviewer-inner/index.ts

diff --git a/build/configure/src/web.rs b/build/configure/src/web.rs
index ef2d268bb..fd169ac22 100644
--- a/build/configure/src/web.rs
+++ b/build/configure/src/web.rs
@@ -228,6 +228,17 @@ fn build_and_check_pages(build: &mut Build) -> Result<()> {
             ":sveltekit"
         ],
     )?;
+    build_page(
+        "reviewer-inner",
+        true,
+        inputs![
+            //
+            ":ts:lib",
+            ":ts:components",
+            ":sass",
+            ":sveltekit"
+        ],
+    )?;
 
     Ok(())
 }
diff --git a/qt/aqt/mediasrv.py b/qt/aqt/mediasrv.py
index eda971121..83f45c933 100644
--- a/qt/aqt/mediasrv.py
+++ b/qt/aqt/mediasrv.py
@@ -335,7 +335,6 @@ def is_sveltekit_page(path: str) -> bool:
         "import-page",
         "image-occlusion",
         "reviewer",
-        "reviewer-inner",
     ]
 
 
diff --git a/ts/routes/reviewer-inner/+page.svelte b/ts/routes/reviewer-inner/+page.svelte
deleted file mode 100644
index 060424096..000000000
--- a/ts/routes/reviewer-inner/+page.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import "../../reviewer/reviewer.scss";
-
-    addEventListener("message", (e) => {
-        switch (e.data.type) {
-            case "html":
-                document.body.innerHTML = e.data.value;
-                break;
-            case "nightMode":
-                // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
-                // I will probably use #night-mode in the url.
-                const root = document.querySelector("html")!;
-                const nightMode = e.data.value;
-                if (e.data.value) {
-                    root.classList.add("night-mode");
-                } else {
-                    root.classList.remove("night-mode");
-                }
-                document.body.className = nightMode ? "nightMode card" : "card";
-                root.className = nightMode ? "night-mode" : "";
-                root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
-                break;
-            default:
-                console.warn(`Unknown message type: ${e.data.type}`);
-                break;
-        }
-    });
-
-    window.parent.postMessage({ type: "ready" });
-</script>
diff --git a/ts/routes/reviewer-inner/index.ts b/ts/routes/reviewer-inner/index.ts
new file mode 100644
index 000000000..8ebc0598d
--- /dev/null
+++ b/ts/routes/reviewer-inner/index.ts
@@ -0,0 +1,26 @@
+import "../../reviewer/reviewer.scss"
+
+addEventListener("message", (e) => {
+    switch (e.data.type) {
+        case "html":
+            document.body.innerHTML = e.data.value;
+            break;
+        case "nightMode":
+            // This method currently "Flashbangs" the user if they have nightmode on and is a placeholder
+            // I will probably use #night-mode in the url.
+            const root = document.querySelector("html")!;
+            const nightMode = e.data.value;
+            if (e.data.value) {
+                root.classList.add("night-mode");
+            } else {
+                root.classList.remove("night-mode");
+            }
+            document.body.className = nightMode ? "nightMode card" : "card";
+            root.className = nightMode ? "night-mode" : "";
+            root.setAttribute("data-bs-theme", nightMode ? "dark" : "light");
+            break;
+        default:
+            console.warn(`Unknown message type: ${e.data.type}`);
+            break;
+    }
+});
diff --git a/ts/routes/reviewer/Reviewer.svelte b/ts/routes/reviewer/Reviewer.svelte
index 4383a2227..bcbe73fa4 100644
--- a/ts/routes/reviewer/Reviewer.svelte
+++ b/ts/routes/reviewer/Reviewer.svelte
@@ -8,10 +8,11 @@
 
 <div id="qa" class={$cardClass}>
     <iframe
-        src="/reviewer-inner"
+        src="/_anki/pages/reviewer-inner.html"
         bind:this={iframe}
         title="card"
         frameborder="0"
+        sandbox="allow-scripts"
     ></iframe>
 </div>
 
diff --git a/ts/routes/reviewer/reviewer.ts b/ts/routes/reviewer/reviewer.ts
index 00e555ace..08694c5c1 100644
--- a/ts/routes/reviewer/reviewer.ts
+++ b/ts/routes/reviewer/reviewer.ts
@@ -6,7 +6,7 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
     const cardClass = writable("");
 
     function updateHtml(htmlString) {
-        iframe.contentWindow?.postMessage({ type: "html", value: htmlString });
+        iframe.contentWindow?.postMessage({ type: "html", value: htmlString }, "*");
     }
 
     function showQuestion(q, a, cc) {
@@ -16,7 +16,14 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
         preloadAnswerImages(a);
     }
 
-    addEventListener("message", (e) => {
+    function onReady() {
+        bridgeCommand("bottomReady");
+        iframe.contentWindow?.postMessage({ type: "nightMode", value: true }, "*");
+    }
+
+    iframe?.addEventListener("load", onReady)
+
+    /* addEventListener("message", (e) => {
         switch (e.data.type) {
             case "ready":
                 // TODO This should probably be a "ready" command now that it is part of the actual reviewer,
@@ -29,7 +36,7 @@ export function setupReviewer(iframe: HTMLIFrameElement) {
                 console.warn(`Unknown message type: ${e.data.type}`);
                 break;
         }
-    });
+    }); */
 
     globalThis._showAnswer = updateHtml;
     globalThis._showQuestion = showQuestion;