feat: native web view for plugins in the desktop app

electron/embedded-view.cjs

@@ -0,0 +1,165 @@
+const { isolatedUrl } = require("./isolated-window.cjs");
+
+function cleanBounds(bounds) {
+  const value = (n) => Math.max(0, Math.round(Number(n) || 0));
+  return {
+    x: value(bounds?.x),
+    y: value(bounds?.y),
+    width: value(bounds?.width),
+    height: value(bounds?.height),
+  };
+}
+
+/**
+ * Native web views drawn inside the main window, for pages that do not work
+ * in a sandboxed iframe. Each one is a WebContentsView in its own
+ * non-persistent session, with the same limits as an isolated window: no
+ * permissions, no downloads, http(s) and ws(s) only. The renderer owns the
+ * placement and sends the bounds of the element the view should cover.
+ */
+function createEmbeddedViews({ WebContentsView, session, getMainWindow }) {
+  const views = new Map();
+
+  function destroy(id) {
+    const entry = views.get(id);
+    if (!entry) return;
+    views.delete(id);
+    const main = getMainWindow();
+    if (main && !main.isDestroyed()) {
+      try {
+        main.contentView.removeChildView(entry.view);
+      } catch {
+        /* already detached */
+      }
+    }
+    if (!entry.view.webContents.isDestroyed()) entry.view.webContents.close();
+    void Promise.allSettled([
+      entry.session.clearStorageData(),
+      entry.session.clearCache(),
+      entry.session.closeAllConnections(),
+    ]);
+  }
+
+  function destroyAll() {
+    for (const id of [...views.keys()]) destroy(id);
+  }
+
+  function open(options = {}) {
+    const main = getMainWindow();
+    if (!main) throw new Error("No window to attach a view to");
+    const id = String(options.id || "");
+    if (!id) throw new Error("A view needs an id");
+    const url = isolatedUrl(options.url);
+    const existing = views.get(id);
+    if (existing) {
+      if (
+        existing.url === url.href &&
+        existing.ignoreCert === !!options.ignoreCert
+      ) {
+        setBounds(id, options.bounds);
+        setVisible(id, options.visible !== false);
+        return { success: true };
+      }
+      destroy(id);
+    }
+
+    const isolated = session.fromPartition(
+      `embedded-view-${id}-${Date.now()}`,
+      {
+        cache: false,
+      },
+    );
+    isolated.setPermissionRequestHandler((_c, _p, callback) => callback(false));
+    isolated.setPermissionCheckHandler(() => false);
+    isolated.on("will-download", (event) => event.preventDefault());
+    isolated.webRequest.onBeforeRequest((details, callback) => {
+      const protocol = new URL(details.url).protocol;
+      callback({
+        cancel: !["http:", "https:", "ws:", "wss:"].includes(protocol),
+      });
+    });
+
+    const view = new WebContentsView({
+      webPreferences: {
+        session: isolated,
+        sandbox: true,
+        contextIsolation: true,
+        nodeIntegration: false,
+        webviewTag: false,
+        webSecurity: true,
+      },
+    });
+    const canNavigate = (target) => {
+      try {
+        return target === "about:blank" || !!isolatedUrl(target);
+      } catch {
+        return false;
+      }
+    };
+    for (const name of ["will-navigate", "will-redirect"]) {
+      view.webContents.on(name, (event, target) => {
+        if (!canNavigate(target)) event.preventDefault();
+      });
+    }
+    view.webContents.setWindowOpenHandler(({ url: target }) =>
+      canNavigate(target)
+        ? {
+            action: "allow",
+            overrideBrowserWindowOptions: {
+              webPreferences: { session: isolated, sandbox: true },
+            },
+          }
+        : { action: "deny" },
+    );
+
+    views.set(id, {
+      view,
+      session: isolated,
+      url: url.href,
+      origin: url.origin,
+      ignoreCert: !!options.ignoreCert,
+    });
+    main.contentView.addChildView(view);
+    setBounds(id, options.bounds);
+    setVisible(id, options.visible !== false);
+    view.webContents.loadURL(url.href).catch(() => {});
+    return { success: true };
+  }
+
+  function setBounds(id, bounds) {
+    const entry = views.get(id);
+    if (entry) entry.view.setBounds(cleanBounds(bounds));
+  }
+
+  function setVisible(id, visible) {
+    const entry = views.get(id);
+    if (entry) entry.view.setVisible(!!visible);
+  }
+
+  function handleCertificateError(event, contents, url, callback) {
+    for (const entry of views.values()) {
+      if (entry.view.webContents !== contents) continue;
+      event.preventDefault();
+      let allowed = false;
+      try {
+        allowed = entry.ignoreCert && new URL(url).origin === entry.origin;
+      } catch {
+        /* malformed URL is refused */
+      }
+      callback(allowed);
+      return true;
+    }
+    return false;
+  }
+
+  return {
+    open,
+    setBounds,
+    setVisible,
+    destroy,
+    destroyAll,
+    handleCertificateError,
+  };
+}
+
+module.exports = { createEmbeddedViews, cleanBounds };

electron/main.cjs

@@ -1,6 +1,7 @@
 const {
   app,
   BrowserWindow,
+  WebContentsView,
   shell,
   ipcMain,
   dialog,
@@ -497,12 +498,38 @@ app.commandLine.appendSwitch("--enable-features=NetworkService");
 
 let mainWindow = null;
 const { createIsolatedWindows } = require("./isolated-window.cjs");
+const { createEmbeddedViews } = require("./embedded-view.cjs");
 const isolatedWindows = createIsolatedWindows({
   BrowserWindow,
   session,
   getMainWindow: () => mainWindow,
 });
 
+const embeddedViews = createEmbeddedViews({
+  WebContentsView,
+  session,
+  getMainWindow: () => mainWindow,
+});
+
+// Only the app's own page may place native views, never a frame inside it.
+function fromMainFrame(event) {
+  return !!mainWindow && event.senderFrame === mainWindow.webContents.mainFrame;
+}
+
+ipcMain.handle("embedded-view-open", (event, options) => {
+  if (!fromMainFrame(event)) throw new Error("Not allowed");
+  return embeddedViews.open(options);
+});
+ipcMain.handle("embedded-view-bounds", (event, id, bounds) => {
+  if (fromMainFrame(event)) embeddedViews.setBounds(String(id), bounds);
+});
+ipcMain.handle("embedded-view-visible", (event, id, visible) => {
+  if (fromMainFrame(event)) embeddedViews.setVisible(String(id), visible);
+});
+ipcMain.handle("embedded-view-close", (event, id) => {
+  if (fromMainFrame(event)) embeddedViews.destroy(String(id));
+});
+
 // Requests from the embedded backend over the fork IPC channel (the other
 // direction from the "shutdown" message main already sends it). A plugin's
 // ctx.desktop.openIsolatedWindow is the one caller today.
@@ -731,6 +758,10 @@ app.on(
       isolatedWindows.handleCertificateError(event, _webContents, url, callback)
     )
       return;
+    if (
+      embeddedViews.handleCertificateError(event, _webContents, url, callback)
+    )
+      return;
     if (isWebEndpointCertificateAllowed(url)) {
       event.preventDefault();
       logToFile("Allowed invalid certificate for configured web endpoint", {
@@ -1508,7 +1539,14 @@ function createWindow() {
     }
   });
 
+  mainWindow.webContents.on("did-start-navigation", (details) => {
+    if (details.isMainFrame && !details.isSameDocument) {
+      embeddedViews.destroyAll();
+    }
+  });
+
   mainWindow.on("closed", () => {
+    embeddedViews.destroyAll();
     mainWindow = null;
   });
 

electron/preload.js

@@ -80,6 +80,16 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.invoke("start-drag-to-desktop", dragData),
   cleanupTempFile: (tempId) => ipcRenderer.invoke("cleanup-temp-file", tempId),
 
+  // Native web views placed over an element of the page (WebContentsView).
+  embeddedView: {
+    open: (options) => ipcRenderer.invoke("embedded-view-open", options),
+    setBounds: (id, bounds) =>
+      ipcRenderer.invoke("embedded-view-bounds", id, bounds),
+    setVisible: (id, visible) =>
+      ipcRenderer.invoke("embedded-view-visible", id, visible),
+    close: (id) => ipcRenderer.invoke("embedded-view-close", id),
+  },
+
   invoke: invokeAllowed,
 });