fix: remove RTCPeerConnection exhaustion (FILL500)

This partially reverts 750721c
(#3098).
Not completely though: the `<iframe>` thing is still there,
and I have not removed it yet for the sake of being conservative.

The most important point of this change is to prepare ourselves
for the removal of the `IsolateSandboxedIframes` Chromium feature.
It has been enabled by default, and is to be removed soon-ish:
https://issues.chromium.org/issues/362246896.

Earlier we simply un-enabled it in
50bcd88
(#4351),
but when it's removed, we will not be able to.
We could hold off on upgrading Electron then, but let's not.

Another thing is, of course, the fact that this speeds up
the process of launching an app.

And in general this approach seems more thorough to me.
It also provides another exfiltration security layer (a dummy proxy).

This uses the same approach that we took in the Tauri version.

On top of that, the 500 limit itself is not something
that is set in stone and should be relied on.

To check that this still works, follow the instructions in
https://github.com/webxdc/webxdc-test/pull/40/files.

Author: WofWca

CHANGELOG.md

@@ -9,6 +9,7 @@
 - update `@deltachat/stdio-rpc-server` and `deltachat/jsonrpc-client` to `2.12.0`
 
 ### Fixed
+- open WebXDC apps faster: remove the initial progress bar (`RTCPeerConnection` exhaustion hack, a.k.a. FILL500)
 - fix app picker sometimes incorrectly showing "Offline"
 - allow using the app picker even when offline, as long as the app store data is cached
 - if adding an app from the app picker fails, show an error dialog

packages/target-electron/src/deltachat/webxdc.ts

@@ -39,6 +39,7 @@ import {
 import { T } from '@deltachat/jsonrpc-client'
 import type * as Jsonrpc from '@deltachat/jsonrpc-client'
 import { setContentProtection } from '../content-protection.js'
+import { Server } from 'net'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
@@ -103,6 +104,62 @@ const DEFAULT_SIZE_MAP: Size = {
 
 export default class DCWebxdc {
   constructor(private readonly controller: DeltaChatController) {
+    let dummyProxy_: { server: Server; url: string } | undefined
+    const getDummyProxyUrl = async () => {
+      if (dummyProxy_) {
+        if (dummyProxy_.server.listening) {
+          // TODO maybe also close all WebXDC instances
+          // as soon as we encounter any error?
+          // This would be more important when/if we get rid of `host-rules`.
+          throw new Error(
+            'the dummy proxy is not working anymore, `server.listening` is `false`'
+          )
+        }
+        return dummyProxy_.url
+      }
+
+      const dummyProxy = new Server({}, socket => {
+        socket.destroy()
+      })
+      const listeningP = new Promise((resolve, reject) => {
+        dummyProxy.once('listening', resolve)
+        dummyProxy.once('error', reject)
+      })
+      dummyProxy.listen({
+        host: '127.0.0.1',
+        // Auto-assign port, to avoid a situation
+        // where a fixed one is occupied.
+        port: 0,
+        // We don't really use any connections, but `backlog: 0`
+        // probably doesn't make sense, so let's set the minimum "sane" value.
+        backlog: 1,
+      })
+
+      await listeningP
+      const listenAddress = dummyProxy.address()
+      if (listenAddress == null) {
+        throw new Error("'listening' event fired, but address is `null`")
+      }
+      if (typeof listenAddress === 'string') {
+        throw new Error(
+          'dummy proxy listen address type is string, expected object'
+        )
+      }
+      if (listenAddress.family !== 'IPv4') {
+        throw new Error(
+          `dummy proxy listen address family is ${listenAddress.family}, expected "IPv4"`
+        )
+      }
+
+      const url = `socks5://${listenAddress.address}:${listenAddress.port}`
+      dummyProxy_ = {
+        server: dummyProxy,
+        url: url,
+      }
+      log.info('Dummy blackhole proxy listening on', listenAddress)
+      return url
+    }
+
     // icon protocol
     app.whenReady().then(() => {
       protocol.handle('webxdc-icon', async request => {
@@ -179,6 +236,27 @@ export default class DCWebxdc {
         ses.protocol.handle('webxdc', (...args) =>
           webxdcProtocolHandler(this.rpc, ...args)
         )
+
+        // Thanks to the fact that we specify `host-rules`,
+        // no connection attempt to the proxy should occur at all,
+        // at least as of now.
+        // See https://www.chromium.org/developers/design-documents/network-stack/socks-proxy/ :
+        // > The "EXCLUDE" clause make an exception for "myproxy",
+        // > because otherwise Chrome would be unable to resolve
+        // > the address of the SOCKS proxy server itself,
+        // > and all requests would necessarily fail
+        // > with PROXY_CONNECTION_FAILED.
+        //
+        // However, let's still use our dummy TCP listener, just in case.
+        await ses.setProxy({
+          mode: 'fixed_servers',
+          proxyRules: await getDummyProxyUrl(),
+        })
+        await ses.closeAllConnections()
+
+        // TODO also consider this. However, this might have observable effects
+        // on the app (i.e. "offline" status).
+        // ses.enableNetworkEmulation({ offline: true })
       }
 
       const app_icon = icon_blob && nativeImage?.createFromBuffer(icon_blob)
@@ -200,6 +278,19 @@ export default class DCWebxdc {
         alwaysOnTop: main_window?.isAlwaysOnTop(),
         show: false,
       })
+
+      // Settings this should make WebRTC always use the proxy.
+      // However, since the proxy won't work, this should, in theory,
+      // effectively disable WebRTC.
+      //
+      // However, weirdly, this alone seems to disable WebRTC,
+      // even without setting a proxy,
+      // as evident by using Wireshark together with the "Test Webxdc" app
+      // (but let's not rely on this).
+      webxdcWindow.webContents.setWebRTCIPHandlingPolicy(
+        'disable_non_proxied_udp'
+      )
+
       setContentProtection(webxdcWindow)
 
       // reposition the window to last position (or default)

packages/target-electron/src/index.ts

@@ -21,8 +21,6 @@ const hostRules = 'MAP * ~NOTFOUND, EXCLUDE *.openstreetmap.org'
 rawApp.commandLine.appendSwitch('host-resolver-rules', hostRules)
 rawApp.commandLine.appendSwitch('host-rules', hostRules)
 
-rawApp.commandLine.appendSwitch('disable-features', 'IsolateSandboxedIframes')
-
 if (rc['version'] === true || rc['v'] === true) {
   /* ignore-console-log */
   console.info(BuildInfo.VERSION)

packages/target-electron/static/webxdc-preload.js

@@ -53,8 +53,6 @@ class RealtimeListener {
   // setLocation was called before all connections were filled
   let locationUrl = ''
 
-  let connectionsFilled = false
-
   /**
    * @type {Parameters<import('@webxdc/types').Webxdc["setUpdateListener"]>[0]|null}
    */
@@ -244,8 +242,6 @@ class RealtimeListener {
     },
   }
 
-  const connections = []
-
   contextBridge.exposeInMainWorld('webxdc_internal', {
     setup: (selfAddr, selfName, sendUpdateInterval, sendUpdateMaxSize) => {
       if (is_ready) {
@@ -262,64 +258,17 @@ class RealtimeListener {
 
       window.frames[0].window.addEventListener('keydown', keydown_handler)
     },
-    fill_up_connections: async () => {
-      /** @type {HTMLProgressElement} */
-      const loadingProgress = document.getElementById('progress')
-      const numIterations = 50
-      loadingProgress.max = numIterations
-      const loadingDiv = document.getElementById('loading')
+    setInitialIframeSrc: async () => {
       const iframe = document.getElementById('frame')
-
-      const cert = {
-        certificates: [
-          await RTCPeerConnection.generateCertificate({
-            name: 'ECDSA',
-            namedCurve: 'P-256',
-          }),
-        ],
-      }
-
-      try {
-        for (let i = 0; i < numIterations; i++) {
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          connections.push(new RTCPeerConnection(cert))
-          await new Promise(res => setTimeout(res, 0)) // this is to view loading bar, it returns to the ev loop
-          loadingProgress.value = i + 1
-        }
-        try {
-          connections.push(new RTCPeerConnection(cert))
-          console.log('could create 501th connection, this should never happen')
-          ipcRenderer.invoke('webxdc.exit')
-        } catch (error) {
-          loadingDiv.remove()
-          iframe.src = locationUrl !== '' ? locationUrl : 'index.html'
-          iframe.contentWindow.window.addEventListener(
-            'keydown',
-            keydown_handler
-          )
-          connectionsFilled = true
-        }
-      } catch (error) {
-        console.log('error loading, should crash/close window', error)
-        ipcRenderer.invoke('webxdc.exit')
-      }
+      iframe.src = locationUrl !== '' ? locationUrl : 'index.html'
+      iframe.contentWindow.window.addEventListener('keydown', keydown_handler)
     },
     /**
      * called via webContents.executeJavaScript
      */
     setLocationUrl(base64EncodedHref) {
       locationUrl = Buffer.from(base64EncodedHref, 'base64').toString('utf8')
-      if (locationUrl && locationUrl !== '' && connectionsFilled) {
-        // if connectionsFilled is false, the url is loaded after
-        // the connections are filled
+      if (locationUrl && locationUrl !== '') {
         window.frames[0].window.location = locationUrl
       }
     },

packages/target-electron/static/webxdc_wrapper.html

@@ -22,40 +22,18 @@
         top: 0;
         width: 100%;
       }
-      #loading {
-        position: absolute;
-        background-color: Canvas;
-        inset: 0;
-      }
-      #progress {
-        width: 100%;
-        border-radius: 0;
-        display: block;
-        height: 5px;
-      }
-      #progress::-webkit-progress-bar {
-        background-color: transparent;
-      }
-      #progress::-webkit-progress-value {
-        background-color: #3D66FF;
-      }
-      @media (prefers-color-scheme: dark) {
-        #progress::-webkit-progress-value {
-          background-color: #A1C4FF;
-        }
-      }
     </style>
   </head>
   <body>
     <div class="iframe-container">
       <iframe id="frame"></iframe>
-      <div id="loading">
-        <progress id="progress" value="0"></progress>
-      </div>
     </div>
     <script>
-      const iframe = document.getElementById('frame')
-      window.webxdc_internal.fill_up_connections()
+      // TODO this might get executed before the initial `setLocationUrl()`.
+      // This can cause the app to load the default URL (index.html)
+      // initially, but then load the target URL.
+      // Nothing too bad, but probably should be fixed.
+      webxdc_internal.setInitialIframeSrc()
     </script>
   </body>
 </html>