Download as zip

web/nginx.conf

@@ -56,6 +56,17 @@ server {
         add_header Cache-Control "public" always;
     }
 
+    # -------------------------
+    # StreamSaver service worker
+    # -------------------------
+    location = /streamsaver/sw.js {
+        try_files $uri =404;
+        expires -1;
+        access_log off;
+        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
+        add_header Service-Worker-Allowed "/streamsaver/" always;
+    }
+
     # -------------------------
     # Custom resources
     # -------------------------

web/package.json

@@ -50,6 +50,7 @@
         "@uiw/codemirror-themes": "4.23.6",
         "@uiw/react-codemirror": "^4.23.13",
         "@ungap/structured-clone": "^1.3.0",
+        "@zip.js/zip.js": "^2.8.26",
         "ajv": "^8.17.1",
         "async-mutex": "^0.5.0",
         "axios": "^1.9.0",
@@ -78,6 +79,7 @@
         "react-dom": "^18.3.1",
         "run-exclusive": "^2.2.19",
         "screen-scaler": "^2.0.0",
+        "streamsaver": "^2.0.6",
         "tsafe": "^1.8.12",
         "tss-react": "^4.9.18",
         "type-route": "1.1.0",

web/public/streamsaver/mitm.html

@@ -0,0 +1,102 @@
+<!--
+    StreamSaver.js MITM page.
+    This page registers sw.js and forwards each download stream MessageChannel to it.
+-->
+<script>
+let keepAlive = () => {
+  keepAlive = () => {}
+  const ping = location.href.substr(0, location.href.lastIndexOf('/')) + '/ping'
+  const interval = setInterval(() => {
+    if (sw) {
+      sw.postMessage('ping')
+    } else {
+      fetch(ping).then(res => res.text(!res.ok && clearInterval(interval)))
+    }
+  }, 10000)
+}
+
+let messages = []
+window.onmessage = event => messages.push(event)
+
+let sw = null
+let scope = ''
+
+function registerWorker () {
+  return navigator.serviceWorker.getRegistration('./').then(swReg => {
+    return swReg || navigator.serviceWorker.register('sw.js', { scope: './' })
+  }).then(swReg => {
+    const swRegTmp = swReg.installing || swReg.waiting
+
+    scope = swReg.scope
+
+    return (sw = swReg.active) || new Promise(resolve => {
+      const onStateChange = () => {
+        if (swRegTmp.state === 'activated') {
+          swRegTmp.removeEventListener('statechange', onStateChange)
+          sw = swReg.active
+          resolve()
+        }
+      }
+
+      swRegTmp.addEventListener('statechange', onStateChange)
+    })
+  })
+}
+
+function onMessage (event) {
+  const { data, ports, origin } = event
+
+  if (!ports || !ports.length) {
+    throw new TypeError("[StreamSaver] You didn't send a messageChannel")
+  }
+
+  if (typeof data !== 'object') {
+    throw new TypeError("[StreamSaver] You didn't send an object")
+  }
+
+  data.origin = origin
+  data.referrer = data.referrer || document.referrer || origin
+  data.streamSaverVersion = new URLSearchParams(location.search).get('version')
+
+  if (!data.headers) {
+    console.warn("[StreamSaver] pass `data.headers` to the service worker")
+  } else {
+    // Throw early if headers are invalid
+    new Headers(data.headers)
+  }
+
+  if (!data.pathname) {
+    data.pathname = Math.random().toString().slice(-6) + '/' + data.filename
+  }
+
+  data.pathname = data.pathname.replace(/^\/+/g, '')
+
+  const originWithoutProtocol = origin.replace(/(^\w+:|^)\/\//, '')
+  data.url = new URL(`${scope + originWithoutProtocol}/${data.pathname}`).toString()
+
+  if (!data.url.startsWith(`${scope + originWithoutProtocol}/`)) {
+    throw new TypeError('[StreamSaver] bad `data.pathname`')
+  }
+
+  const transferable = data.readableStream
+    ? [ports[0], data.readableStream]
+    : [ports[0]]
+
+  keepAlive()
+
+  return sw.postMessage(data, transferable)
+}
+
+if (window.opener) {
+  window.opener.postMessage('StreamSaver::loadedPopup', '*')
+}
+
+if (navigator.serviceWorker) {
+  registerWorker().then(() => {
+    window.onmessage = onMessage
+    messages.forEach(window.onmessage)
+  })
+} else {
+  keepAlive()
+}
+</script>

web/public/streamsaver/sw.js

@@ -0,0 +1,111 @@
+/* global self, ReadableStream, Response */
+
+self.addEventListener('install', () => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim())
+})
+
+const map = new Map()
+
+self.onmessage = event => {
+  if (event.data === 'ping') {
+    if (event.waitUntil) {
+      event.waitUntil(Promise.resolve())
+    }
+
+    return
+  }
+
+  const data = event.data
+  const downloadUrl = data.url || self.registration.scope + Math.random() + '/' + (typeof data === 'string' ? data : data.filename)
+  const port = event.ports[0]
+  const metadata = new Array(3)
+
+  const startDownload = () => {
+    map.set(downloadUrl, metadata)
+    port.postMessage({ download: downloadUrl })
+  }
+
+  metadata[1] = data
+  metadata[2] = port
+
+  if (event.data.readableStream) {
+    metadata[0] = event.data.readableStream
+    startDownload()
+  } else if (event.data.transferringReadable) {
+    port.onmessage = event => {
+      port.onmessage = null
+      metadata[0] = event.data.readableStream
+      startDownload()
+    }
+  } else {
+    metadata[0] = createStream(port)
+    startDownload()
+  }
+}
+
+function createStream (port) {
+  return new ReadableStream({
+    start (controller) {
+      port.onmessage = ({ data }) => {
+        if (data === 'end') {
+          return controller.close()
+        }
+
+        if (data === 'abort') {
+          controller.error('Aborted the download')
+          return
+        }
+
+        controller.enqueue(data)
+      }
+    },
+    cancel (reason) {
+      console.log('user aborted', reason)
+      port.postMessage({ abort: true })
+    }
+  })
+}
+
+self.onfetch = event => {
+  const url = event.request.url
+
+  if (url.endsWith('/ping')) {
+    return event.respondWith(new Response('pong'))
+  }
+
+  const metadata = map.get(url)
+
+  if (!metadata) {
+    return null
+  }
+
+  const [stream, data, port] = metadata
+
+  map.delete(url)
+
+  const responseHeaders = new Headers({
+    'Content-Type': 'application/octet-stream; charset=utf-8',
+    'Content-Security-Policy': "default-src 'none'",
+    'X-Content-Security-Policy': "default-src 'none'",
+    'X-WebKit-CSP': "default-src 'none'",
+    'X-XSS-Protection': '1; mode=block'
+  })
+
+  const headers = new Headers(data.headers || {})
+
+  if (headers.has('Content-Length')) {
+    responseHeaders.set('Content-Length', headers.get('Content-Length'))
+  }
+
+  if (headers.has('Content-Disposition')) {
+    responseHeaders.set('Content-Disposition', headers.get('Content-Disposition'))
+  }
+
+  event.respondWith(new Response(stream, { headers: responseHeaders }))
+
+  port.postMessage({ debug: 'Download started' })
+}