refactor: enable context isolation (#1453)

* refactor: enable context isolation * chore: snip snip
electron · Sep 12, 2023 · 186fb60 · 186fb60
1 parent 57b50d4
commit 186fb60
Show file tree

Hide file tree

Showing 61 changed files with 135 additions and 121 deletions.
diff --git a/forge.config.ts b/forge.config.ts
@@ -64,7 +64,6 @@ const config: ForgeConfig = {
         },
         mainConfig: mainConfig,
         renderer: {
-          nodeIntegration: true,
           config: rendererConfig,
           entryPoints: [
             {

diff --git a/rtl-spec/components/commands-address-bar.spec.tsx b/rtl-spec/components/commands-address-bar.spec.tsx
@@ -12,7 +12,7 @@ describe('AddressBar component', () => {
   let store: AppState;
 
   beforeEach(() => {
-    store = window.ElectronFiddle.app.state;
+    store = window.app.state;
   });
 
   it('loads a remote gist from a gist URL', async () => {
@@ -33,7 +33,7 @@ describe('AddressBar component', () => {
 
     await userEvent.click(btn);
 
-    const { fetchGistAndLoad } = window.ElectronFiddle.app.remoteLoader;
+    const { fetchGistAndLoad } = window.app.remoteLoader;
     expect(fetchGistAndLoad).toBeCalledWith(gistId);
   });
 

diff --git a/rtl-spec/components/commands-bisect.spec.tsx b/rtl-spec/components/commands-bisect.spec.tsx
@@ -12,7 +12,7 @@ describe('Bisect commands component', () => {
   let store: AppState;
 
   beforeEach(() => {
-    store = window.ElectronFiddle.app.state;
+    store = window.app.state;
   });
 
   it('is disabled if an electron version is currently downloading', () => {

diff --git a/src/ambient.d.ts b/src/ambient.d.ts
@@ -31,6 +31,8 @@ import { FiddleTheme, LoadedFiddleTheme } from './themes-defaults';
 
 declare global {
   interface Window {
+    app: App;
+    monaco: typeof MonacoType;
     ElectronFiddle: {
       addEventListener(
         type: FiddleEvent,
@@ -101,7 +103,6 @@ declare global {
         { dir, packageManager }: PMOperationOptions,
         ...names: Array<string>
       ): Promise<string>;
-      app: App;
       arch: string;
       blockAccelerators(acceleratorsToBlock: BlockableAccelerator[]): void;
       cleanupDirectory(dir: string): Promise<boolean>;
@@ -139,7 +140,6 @@ declare global {
       isDevMode: boolean;
       isReleasedMajor(major: number): Promise<boolean>;
       macTitlebarClicked(): void;
-      monaco: typeof MonacoType;
       onGetFiles(
         callback: (
           options: PackageJsonOptions | undefined,

diff --git a/src/main/windows.ts b/src/main/windows.ts
@@ -48,10 +48,6 @@ export function getMainWindowOptions(): Electron.BrowserWindowConstructorOptions
     backgroundColor: '#1d2427',
     show: false,
     webPreferences: {
-      webviewTag: false,
-      nodeIntegration: true,
-      nodeIntegrationInWorker: true,
-      contextIsolation: false,
       preload: !!process.env.JEST
         ? path.join(process.cwd(), './.webpack/renderer/main_window/preload.js')
         : MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,

diff --git a/src/preload/preload.ts b/src/preload/preload.ts
@@ -1,12 +1,19 @@
 // Remember to update ambient.d.ts for extending window object
-import { IpcRendererEvent, ipcRenderer } from 'electron';
+import { IpcRendererEvent, contextBridge, ipcRenderer } from 'electron';
 
 import {
+  BlockableAccelerator,
   DownloadVersionParams,
   FiddleEvent,
   FileTransformOperation,
   Files,
+  IPackageManager,
+  MessageOptions,
+  OutputEntry,
+  PMOperationOptions,
   PackageJsonOptions,
+  RunResult,
+  RunnableVersion,
   StartFiddleParams,
 } from '../interfaces';
 import { IpcEvents, WEBCONTENTS_READY_FOR_IPC_SIGNAL } from '../ipc-events';
@@ -49,7 +56,7 @@ async function preload() {
 }
 
 export async function setupFiddleGlobal() {
-  window.ElectronFiddle = {
+  contextBridge.exposeInMainWorld('ElectronFiddle', {
     addEventListener(
       type: FiddleEvent,
       listener: (...args: any[]) => void,
@@ -68,16 +75,18 @@ export async function setupFiddleGlobal() {
         }
       }
     },
-    addModules({ dir, packageManager }, ...names) {
+    addModules(
+      { dir, packageManager }: PMOperationOptions,
+      ...names: Array<string>
+    ) {
       return ipcRenderer.invoke(
         IpcEvents.NPM_ADD_MODULES,
         { dir, packageManager },
         ...names,
       );
     },
-    app: null as any, // will be set in main.tsx
     arch: process.arch,
-    blockAccelerators(acceleratorsToBlock) {
+    blockAccelerators(acceleratorsToBlock: BlockableAccelerator[]) {
       ipcRenderer.send(IpcEvents.BLOCK_ACCELERATORS, acceleratorsToBlock);
     },
     cleanupDirectory(dir: string) {
@@ -101,18 +110,14 @@ export async function setupFiddleGlobal() {
     fetchVersions() {
       return ipcRenderer.invoke(IpcEvents.FETCH_VERSIONS);
     },
-    getElectronTypes(ver) {
-      // Destructure ver into a copy, as the object sometimes can't be cloned
-      return ipcRenderer.invoke(IpcEvents.GET_ELECTRON_TYPES, { ...ver });
+    getElectronTypes(ver: RunnableVersion) {
+      return ipcRenderer.invoke(IpcEvents.GET_ELECTRON_TYPES, ver);
     },
     getLatestStable() {
       return ipcRenderer.sendSync(IpcEvents.GET_LATEST_STABLE);
     },
-    getLocalVersionState(ver) {
-      // Destructure ver into a copy, as the object sometimes can't be cloned
-      return ipcRenderer.sendSync(IpcEvents.GET_LOCAL_VERSION_STATE, {
-        ...ver,
-      });
+    getLocalVersionState(ver: RunnableVersion) {
+      return ipcRenderer.sendSync(IpcEvents.GET_LOCAL_VERSION_STATE, ver);
     },
     getOldestSupportedMajor() {
       return ipcRenderer.sendSync(IpcEvents.GET_OLDEST_SUPPORTED_MAJOR);
@@ -126,14 +131,17 @@ export async function setupFiddleGlobal() {
     getAvailableThemes() {
       return ipcRenderer.invoke(IpcEvents.GET_AVAILABLE_THEMES);
     },
-    getIsPackageManagerInstalled(packageManager, ignoreCache) {
+    getIsPackageManagerInstalled(
+      packageManager: IPackageManager,
+      ignoreCache?: boolean,
+    ) {
       return ipcRenderer.invoke(
         IpcEvents.NPM_IS_PM_INSTALLED,
         packageManager,
         ignoreCache,
       );
     },
-    getNodeTypes(version) {
+    getNodeTypes(version: string) {
       return ipcRenderer.invoke(IpcEvents.GET_NODE_TYPES, version);
     },
     getProjectName(localPath?: string) {
@@ -155,7 +163,6 @@ export async function setupFiddleGlobal() {
     macTitlebarClicked() {
       ipcRenderer.send(IpcEvents.CLICK_TITLEBAR_MAC);
     },
-    monaco: null as any, // will be set in main.tsx
     onGetFiles(
       callback: (
         options: PackageJsonOptions | undefined,
@@ -174,7 +181,7 @@ export async function setupFiddleGlobal() {
     async openThemeFolder() {
       await ipcRenderer.invoke(IpcEvents.OPEN_THEME_FOLDER);
     },
-    packageRun({ dir, packageManager }, command) {
+    packageRun({ dir, packageManager }: PMOperationOptions, command: string) {
       return ipcRenderer.invoke(
         IpcEvents.NPM_PACKAGE_RUN,
         { dir, packageManager },
@@ -184,7 +191,7 @@ export async function setupFiddleGlobal() {
     pathExists: (path: string) =>
       ipcRenderer.sendSync(IpcEvents.PATH_EXISTS, path),
     platform: process.platform,
-    pushOutputEntry(entry) {
+    pushOutputEntry(entry: OutputEntry) {
       ipcRenderer.send(IpcEvents.OUTPUT_ENTRY, entry);
     },
     reloadWindows() {
@@ -213,13 +220,13 @@ export async function setupFiddleGlobal() {
     sendReady() {
       ipcRenderer.send(WEBCONTENTS_READY_FOR_IPC_SIGNAL);
     },
-    setNativeTheme(theme) {
+    setNativeTheme(theme: 'dark' | 'light' | 'system') {
       ipcRenderer.send(IpcEvents.SET_NATIVE_THEME, theme);
     },
     setShowMeTemplate(template?: string) {
       ipcRenderer.send(IpcEvents.SET_SHOW_ME_TEMPLATE, template);
     },
-    showWarningDialog(messageOptions) {
+    showWarningDialog(messageOptions: MessageOptions) {
       ipcRenderer.send(IpcEvents.SHOW_WARNING_DIALOG, messageOptions);
     },
     showWindow() {
@@ -231,18 +238,17 @@ export async function setupFiddleGlobal() {
     stopFiddle() {
       ipcRenderer.send(IpcEvents.STOP_FIDDLE);
     },
-    taskDone(result) {
+    taskDone(result: RunResult) {
       ipcRenderer.send(IpcEvents.TASK_DONE, result);
     },
     themePath: await ipcRenderer.sendSync(IpcEvents.GET_THEME_PATH),
-    async uncacheTypes(ver) {
-      // Destructure ver into a copy, as the object sometimes can't be cloned
-      await ipcRenderer.invoke(IpcEvents.UNCACHE_TYPES, { ...ver });
+    async uncacheTypes(ver: RunnableVersion) {
+      await ipcRenderer.invoke(IpcEvents.UNCACHE_TYPES, ver);
     },
     async unwatchElectronTypes() {
       await ipcRenderer.invoke(IpcEvents.UNWATCH_ELECTRON_TYPES);
     },
-  };
+  });
 }
 
 preload();
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
@@ -40,7 +40,7 @@ export class App {
 
     this.taskRunner = new TaskRunner(this);
 
-    this.electronTypes = new ElectronTypes(window.ElectronFiddle.monaco);
+    this.electronTypes = new ElectronTypes(window.monaco);
   }
 
   private confirmReplaceUnsaved(): Promise<boolean> {

diff --git a/src/renderer/components/commands-action-button.tsx b/src/renderer/components/commands-action-button.tsx
@@ -123,8 +123,7 @@ export const GistActionButton = observer(
       const defaultGistValues = await window.ElectronFiddle.getTemplate(
         appState.version,
       );
-      const currentEditorValues =
-        await window.ElectronFiddle.app.getEditorValues(options);
+      const currentEditorValues = await window.app.getEditorValues(options);
 
       defaultGistValues[PACKAGE_NAME as EditorId] =
         currentEditorValues[PACKAGE_NAME as EditorId];
@@ -202,7 +201,7 @@ export const GistActionButton = observer(
       const { appState } = this.props;
       const octo = await getOctokit(this.props.appState);
       const options = { includeDependencies: true, includeElectron: true };
-      const values = await window.ElectronFiddle.app.getEditorValues(options);
+      const values = await window.app.getEditorValues(options);
 
       appState.activeGistAction = GistActionState.updating;
 

diff --git a/src/renderer/components/commands-address-bar.tsx b/src/renderer/components/commands-address-bar.tsx
@@ -33,7 +33,7 @@ export const AddressBar = observer(
       const { gistId } = this.props.appState;
       const value = urlFromId(gistId);
 
-      const { remoteLoader } = window.ElectronFiddle.app;
+      const { remoteLoader } = window.app;
 
       this.state = {
         value,
@@ -62,7 +62,7 @@ export const AddressBar = observer(
      * @memberof AddressBar
      */
     private submit() {
-      const { remoteLoader } = window.ElectronFiddle.app;
+      const { remoteLoader } = window.app;
       if (this.state.value) {
         remoteLoader.fetchGistAndLoad(
           idFromUrl(this.state.value) || this.state.value,

diff --git a/src/renderer/components/commands-bisect.tsx b/src/renderer/components/commands-bisect.tsx
@@ -20,7 +20,7 @@ export const BisectHandler = observer(
     }
 
     private continueBisect(isGood: boolean) {
-      window.ElectronFiddle.app.runner.stop();
+      window.app.runner.stop();
 
       const { appState } = this.props;
       const response = appState.Bisector!.continue(isGood);

diff --git a/src/renderer/components/commands-runner.tsx b/src/renderer/components/commands-runner.tsx
@@ -60,14 +60,14 @@ export const Runner = observer(
           if (isRunning) {
             props.active = true;
             props.text = 'Stop';
-            props.onClick = window.ElectronFiddle.app.runner.stop;
+            props.onClick = window.app.runner.stop;
             props.icon = 'stop';
           } else if (isInstallingModules) {
             props.text = 'Installing modules';
             props.icon = <Spinner size={16} />;
           } else {
             props.text = 'Run';
-            props.onClick = window.ElectronFiddle.app.runner.run;
+            props.onClick = window.app.runner.run;
             props.icon = 'play';
           }
           break;

diff --git a/src/renderer/components/dialog-bisect.tsx b/src/renderer/components/dialog-bisect.tsx
@@ -86,7 +86,7 @@ export const BisectDialog = observer(
     public async onAuto(): Promise<void> {
       const range = this.getBisectRange();
       if (range.length > 1) {
-        window.ElectronFiddle.app.runner.autobisect(range);
+        window.app.runner.autobisect(range);
         this.onClose();
       }
     }

diff --git a/src/renderer/components/editors.tsx b/src/renderer/components/editors.tsx
@@ -47,7 +47,7 @@ export const Editors = observer(
       this.setFocused = this.setFocused.bind(this);
 
       this.state = {
-        monaco: window.ElectronFiddle.monaco,
+        monaco: window.monaco,
         monacoOptions: defaultMonacoOptions,
       };
     }
@@ -75,14 +75,14 @@ export const Editors = observer(
         // Clear previously installed modules.
         modules.clear();
 
-        await window.ElectronFiddle.app.replaceFiddle(values, options);
+        await window.app.replaceFiddle(values, options);
       });
 
       window.ElectronFiddle.addEventListener('new-test', async () => {
         const values = await window.ElectronFiddle.getTestTemplate();
         const options: SetFiddleOptions = { templateName: 'Test' };
 
-        await window.ElectronFiddle.app.replaceFiddle(values, options);
+        await window.app.replaceFiddle(values, options);
       });
 
       window.ElectronFiddle.addEventListener(

diff --git a/src/renderer/components/outputs.tsx b/src/renderer/components/outputs.tsx
@@ -28,7 +28,7 @@ export const Outputs = observer(
       super(props);
 
       this.state = {
-        monaco: window.ElectronFiddle.monaco,
+        monaco: window.monaco,
         monacoOptions: defaultMonacoOptions,
       };
     }

diff --git a/src/renderer/editor-mosaic.ts b/src/renderer/editor-mosaic.ts
@@ -144,7 +144,7 @@ export class EditorMosaic {
       throw new Error(`Cannot add file "${id}": Must be .js, .html, or .css`);
 
     // create a monaco model with the file's contents
-    const { monaco } = window.ElectronFiddle;
+    const { monaco } = window;
     const language = monacoLanguage(id);
     const model = monaco.editor.createModel(value, language);
     model.updateOptions({ tabSize: 2 });

diff --git a/src/renderer/electron-types.ts b/src/renderer/electron-types.ts
@@ -33,7 +33,8 @@ export class ElectronTypes {
     if (!ver) return;
 
     this.setElectronTypes(
-      await window.ElectronFiddle.getElectronTypes(ver),
+      // Destructure ver so it's not a Proxy object, which can't be used
+      await window.ElectronFiddle.getElectronTypes({ ...ver }),
       ver.version,
     );
     await this.setNodeTypes(ver.version);
@@ -71,7 +72,8 @@ export class ElectronTypes {
 
   public async uncache(ver: RunnableVersion) {
     if (ver.source === VersionSource.remote) {
-      await window.ElectronFiddle.uncacheTypes(ver);
+      // Destructure ver so it's not a Proxy object, which can't be used
+      await window.ElectronFiddle.uncacheTypes({ ...ver });
     }
   }