add iframe ability to allow exports from foreign sites

André Dietrich · André Dietrich · commit 66eadd62215b · 2026-06-23T10:41:35.000+02:00
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/server/public/app.js b/dist/server/public/app.js
@@ -76,6 +76,11 @@ function initializeNumberInputs() {
 // Initialize app
 document.addEventListener('DOMContentLoaded', async () => {
   initializeNumberInputs()
+  // Attach the embed message listener synchronously, before the first await, so
+  // it is in place before the embedding iframe's load event can fire. Otherwise
+  // a project pushed by the embedder right after load would be lost while we are
+  // still awaiting loadPresets().
+  initializeEmbedMessaging()
   await loadPresets()
   initializeTabs()
   initializeExportTabs()
@@ -88,6 +93,62 @@ document.addEventListener('DOMContentLoaded', async () => {
   checkForUpdates()
 })
 
+// Embedding support: when this UI is loaded inside an <iframe> (e.g. the
+// LiaScript LiveEditor), the parent can push a complete project to us via
+// postMessage instead of the user having to upload files manually. We announce
+// readiness on load and feed any received File/Blob into the normal upload flow.
+function initializeEmbedMessaging() {
+  // Only relevant when actually embedded.
+  const isEmbedded = window.parent && window.parent !== window
+  if (!isEmbedded) return
+
+  window.addEventListener('message', (event) => {
+    const payload = event.data
+
+    // Respond to a readiness ping so the embedder doesn't have to rely on
+    // catching our initial (one-shot) ready broadcast.
+    if (payload && payload.type === 'liaexporter:ping') {
+      const target = event.source || window.parent
+      if (target) {
+        target.postMessage({ type: 'liaexporter:ready' }, event.origin || '*')
+      }
+      return
+    }
+
+    // Accept either a bare File/Blob or a wrapper { type, file/files }.
+    let incoming = []
+    if (payload instanceof File || payload instanceof Blob) {
+      incoming = [payload]
+    } else if (payload && payload.type === 'liaexporter:project') {
+      if (Array.isArray(payload.files)) incoming = payload.files
+      else if (payload.file) incoming = [payload.file]
+    } else {
+      return
+    }
+
+    if (incoming.length === 0) return
+
+    // A Blob received via postMessage has no name -> wrap it as a named File so
+    // the server-side ZIP detection (isZipFile) and file list work correctly.
+    const files = incoming.map((f) =>
+      f instanceof File
+        ? f
+        : new File([f], 'project.zip', {
+            type: f.type || 'application/zip',
+          }),
+    )
+
+    // Switch to the upload source tab and inject the files as if dropped.
+    const uploadTab = document.querySelector('.tab-button[data-tab="upload"]')
+    if (uploadTab) uploadTab.click()
+
+    handleFiles(files)
+  })
+
+  // Tell the parent we are ready to receive a project.
+  window.parent.postMessage({ type: 'liaexporter:ready' }, '*')
+}
+
 async function checkForUpdates() {
   if (!window.electronAPI?.checkForUpdates) return
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
   "author": "André Dietrich <Andre.Dietrich@informatik.tu-freiberg.de>",
   "license": "ISC",
   "dependencies": {
+    "@fastify/cors": "^9.0.1",
     "@fastify/multipart": "^8.1.0",
     "@fastify/static": "^7.0.1",
     "@lesjoursfr/html-to-epub": "^6.0.1",
diff --git a/src/server/public/app.js b/src/server/public/app.js
@@ -76,6 +76,11 @@ function initializeNumberInputs() {
 // Initialize app
 document.addEventListener('DOMContentLoaded', async () => {
   initializeNumberInputs()
+  // Attach the embed message listener synchronously, before the first await, so
+  // it is in place before the embedding iframe's load event can fire. Otherwise
+  // a project pushed by the embedder right after load would be lost while we are
+  // still awaiting loadPresets().
+  initializeEmbedMessaging()
   await loadPresets()
   initializeTabs()
   initializeExportTabs()
@@ -88,6 +93,62 @@ document.addEventListener('DOMContentLoaded', async () => {
   checkForUpdates()
 })
 
+// Embedding support: when this UI is loaded inside an <iframe> (e.g. the
+// LiaScript LiveEditor), the parent can push a complete project to us via
+// postMessage instead of the user having to upload files manually. We announce
+// readiness on load and feed any received File/Blob into the normal upload flow.
+function initializeEmbedMessaging() {
+  // Only relevant when actually embedded.
+  const isEmbedded = window.parent && window.parent !== window
+  if (!isEmbedded) return
+
+  window.addEventListener('message', (event) => {
+    const payload = event.data
+
+    // Respond to a readiness ping so the embedder doesn't have to rely on
+    // catching our initial (one-shot) ready broadcast.
+    if (payload && payload.type === 'liaexporter:ping') {
+      const target = event.source || window.parent
+      if (target) {
+        target.postMessage({ type: 'liaexporter:ready' }, event.origin || '*')
+      }
+      return
+    }
+
+    // Accept either a bare File/Blob or a wrapper { type, file/files }.
+    let incoming = []
+    if (payload instanceof File || payload instanceof Blob) {
+      incoming = [payload]
+    } else if (payload && payload.type === 'liaexporter:project') {
+      if (Array.isArray(payload.files)) incoming = payload.files
+      else if (payload.file) incoming = [payload.file]
+    } else {
+      return
+    }
+
+    if (incoming.length === 0) return
+
+    // A Blob received via postMessage has no name -> wrap it as a named File so
+    // the server-side ZIP detection (isZipFile) and file list work correctly.
+    const files = incoming.map((f) =>
+      f instanceof File
+        ? f
+        : new File([f], 'project.zip', {
+            type: f.type || 'application/zip',
+          }),
+    )
+
+    // Switch to the upload source tab and inject the files as if dropped.
+    const uploadTab = document.querySelector('.tab-button[data-tab="upload"]')
+    if (uploadTab) uploadTab.click()
+
+    handleFiles(files)
+  })
+
+  // Tell the parent we are ready to receive a project.
+  window.parent.postMessage({ type: 'liaexporter:ready' }, '*')
+}
+
 async function checkForUpdates() {
   if (!window.electronAPI?.checkForUpdates) return
 
diff --git a/src/server/server.ts b/src/server/server.ts
@@ -50,6 +50,28 @@ export async function startServer(
     logger: loggerConfig,
   })
 
+  // Allow cross-origin API access so a browser app on another origin (e.g. the
+  // LiaScript LiveEditor) can talk to this server directly. The iframe-embed
+  // flow is same-origin and does not need this, but a direct/remote API client
+  // does. Loaded defensively so the server still starts if the optional
+  // dependency is missing.
+  try {
+    const fastifyCors = (await import('@fastify/cors')).default
+    await fastify.register(fastifyCors, { origin: true })
+  } catch (err) {
+    fastify.log.warn(
+      '@fastify/cors not available - cross-origin API requests will be blocked',
+    )
+  }
+
+  // Allow this UI to be embedded in an <iframe> by the LiveEditor (or any other
+  // host). We deliberately do NOT send X-Frame-Options, and set a permissive
+  // frame-ancestors policy instead so framing works across origins.
+  fastify.addHook('onSend', async (_request, reply, payload) => {
+    reply.header('Content-Security-Policy', 'frame-ancestors *')
+    return payload
+  })
+
   // Register plugins
   await fastify.register(fastifyMultipart, {
     limits: {
