fix: Preload script in sandboxed iframes (#1925)

* Pass initialization data at once on server view

* Lift code injection to the main process

Author: tassoevan

src/ipc/channels.ts

@@ -1,6 +1,7 @@
 import { AnyAction } from 'redux';
 
 import { Download } from '../downloads/common';
+import { Server } from '../servers/common';
 import { SystemIdleState } from '../userPresence/common';
 
 type ChannelToArgsMap = {
@@ -16,6 +17,8 @@ type ChannelToArgsMap = {
   'downloads/cancel': (itemId: Download['itemId']) => void;
   'downloads/retry': (itemId: Download['itemId']) => void;
   'downloads/remove': (itemId: Download['itemId']) => void;
+  'server-view/get-url': () => Server['url'];
+  'server-view/ready': () => void;
 };
 
 export type Channel = keyof ChannelToArgsMap;

src/ipc/main.ts

@@ -28,6 +28,10 @@ export const invoke = <N extends Channel>(
 export const handle = <N extends Channel>(
   channel: N,
   handler: (webContents: WebContents, ...args: Parameters<Handler<N>>) => Promise<ReturnType<Handler<N>>>,
-): void => {
+): (() => void) => {
   ipcMain.handle(channel, (event, ...args: Parameters<Handler<N>>) => handler(event.sender, ...args));
+
+  return () => {
+    ipcMain.removeHandler(channel);
+  };
 };

src/ipc/renderer.ts

@@ -1,12 +1,12 @@
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, IpcRendererEvent } from 'electron';
 
 import { Handler, Channel } from './channels';
 
 export const handle = <N extends Channel>(
   channel: N,
   handler: (...args: Parameters<Handler<N>>) => Promise<ReturnType<Handler<N>>>,
-): void => {
-  ipcRenderer.on(channel, async (_, id: string, ...args: Parameters<typeof handler>): Promise<void> => {
+): (() => void) => {
+  const listener = async (_: IpcRendererEvent, id: string, ...args: Parameters<typeof handler>): Promise<void> => {
     try {
       const resolved = await handler(...args);
 
@@ -20,7 +20,13 @@ export const handle = <N extends Channel>(
         },
       });
     }
-  });
+  };
+
+  ipcRenderer.on(channel, listener);
+
+  return () => {
+    ipcRenderer.removeListener(channel, listener);
+  };
 };
 
 export const invoke = <N extends Channel>(

src/preload.ts

@@ -1,15 +1,13 @@
-import fs from 'fs';
-import path from 'path';
-
-import { contextBridge, ipcRenderer, webFrame } from 'electron';
+import { contextBridge } from 'electron';
 
 import { setupRendererErrorHandling } from './errors';
+import { invoke } from './ipc/renderer';
 import { JitsiMeetElectron, JitsiMeetElectronAPI } from './jitsi/preload';
 import { listenToNotificationsRequests } from './notifications/preload';
 import { listenToScreenSharingRequests } from './screenSharing/preload';
 import { RocketChatDesktop, RocketChatDesktopAPI, serverInfo } from './servers/preload/api';
 import { setServerUrl } from './servers/preload/urls';
-import { createRendererReduxStore, select } from './store';
+import { createRendererReduxStore } from './store';
 import { listenToMessageBoxEvents } from './ui/preload/messageBox';
 import { handleTrafficLightsSpacing } from './ui/preload/sidebar';
 import { listenToUserPresenceChanges } from './userPresence/preload';
@@ -26,7 +24,8 @@ contextBridge.exposeInMainWorld('JitsiMeetElectron', JitsiMeetElectron);
 contextBridge.exposeInMainWorld('RocketChatDesktop', RocketChatDesktop);
 
 const start = async (): Promise<void> => {
-  const serverUrl = await ipcRenderer.invoke('server-url');
+  const serverUrl = await invoke('server-view/get-url');
+
   setServerUrl(serverUrl);
 
   await createRendererReduxStore();
@@ -35,11 +34,7 @@ const start = async (): Promise<void> => {
 
   setupRendererErrorHandling('webviewPreload');
 
-  const injectedCode = await fs.promises.readFile(
-    path.join(select(({ appPath }) => appPath), 'app/injected.js'),
-    'utf8',
-  );
-  await webFrame.executeJavaScript(injectedCode);
+  await invoke('server-view/ready');
 
   if (!serverInfo) {
     return;

src/ui/main/serverView/index.ts

@@ -1,3 +1,4 @@
+import fs from 'fs';
 import path from 'path';
 
 import {
@@ -8,7 +9,6 @@ import {
   DidNavigateEvent,
   Event,
   Input,
-  ipcMain,
   Menu,
   MenuItemConstructorOptions,
   Session,
@@ -25,6 +25,7 @@ import i18next from 'i18next';
 
 import { setupPreloadReload } from '../../../app/main/dev';
 import { handleWillDownloadEvent } from '../../../downloads/main';
+import { handle } from '../../../ipc/main';
 import { CERTIFICATES_CLEARED } from '../../../navigation/actions';
 import { isProtocolAllowed } from '../../../navigation/main';
 import { Server } from '../../../servers/common';
@@ -304,11 +305,19 @@ export const attachGuestWebContentsEvents = async (): Promise<void> => {
   rootWindow.webContents.addListener('will-attach-webview', handleWillAttachWebview);
   rootWindow.webContents.addListener('did-attach-webview', handleDidAttachWebview);
 
-  ipcMain.handle(
-    'server-url',
-    (event) =>
-      Array.from(webContentsByServerUrl.entries())
-        .filter(([, v]) => v === event.sender)
-        .map(([k]) => k)[0],
-  );
+  handle('server-view/get-url', async (webContents) =>
+    Array.from(webContentsByServerUrl.entries())
+      .find(([, v]) => v === webContents)?.[0]);
+
+  let injectableCode: string;
+  handle('server-view/ready', async (webContents) => {
+    if (!injectableCode) {
+      injectableCode = await fs.promises.readFile(
+        path.join(select(({ appPath }) => appPath), 'app/injected.js'),
+        'utf8',
+      );
+    }
+
+    webContents.executeJavaScript(injectableCode, true);
+  });
 };