refactor: context isolation via preload script

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

config/webpack.config.main.base.ts

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import type webpack from 'webpack';
 import { merge } from 'webpack-merge';
+
 import baseConfig from './webpack.config.common';
 import webpackPaths from './webpack.paths';
 

config/webpack.config.main.prod.ts

@@ -1,6 +1,7 @@
 import TerserPlugin from 'terser-webpack-plugin';
 import type webpack from 'webpack';
 import { merge } from 'webpack-merge';
+
 import baseConfig from './webpack.config.main.base';
 
 const configuration: webpack.Configuration = {

config/webpack.config.preload.base.ts

@@ -0,0 +1,26 @@
+import path from 'node:path';
+import type webpack from 'webpack';
+import { merge } from 'webpack-merge';
+
+import baseConfig from './webpack.config.common';
+import webpackPaths from './webpack.paths';
+
+const configuration: webpack.Configuration = {
+  devtool: 'inline-source-map',
+
+  mode: 'development',
+
+  target: 'electron-main',
+
+  entry: [path.join(webpackPaths.srcMainPath, 'preload.ts')],
+
+  output: {
+    path: webpackPaths.buildPath,
+    filename: 'preload.js',
+    library: {
+      type: 'umd',
+    },
+  },
+};
+
+export default merge(baseConfig, configuration);

config/webpack.config.preload.prod.ts

@@ -0,0 +1,18 @@
+import TerserPlugin from 'terser-webpack-plugin';
+import type webpack from 'webpack';
+import { merge } from 'webpack-merge';
+
+import baseConfig from './webpack.config.preload.base';
+
+const configuration: webpack.Configuration = {
+  devtool: 'source-map',
+
+  mode: 'production',
+
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+};
+
+export default merge(baseConfig, configuration);

config/webpack.config.renderer.base.ts

@@ -4,6 +4,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
+
 import baseConfig from './webpack.config.common';
 import webpackPaths from './webpack.paths';
 

config/webpack.config.renderer.prod.ts

@@ -2,6 +2,7 @@ import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import type webpack from 'webpack';
 import { merge } from 'webpack-merge';
+
 import baseConfig from './webpack.config.renderer.base';
 
 const configuration: webpack.Configuration = {

package.json

@@ -5,11 +5,13 @@
   "main": "build/main.js",
   "scripts": {
     "clean": "rimraf build coverage dist node_modules",
-    "build": "concurrently --names \"main,renderer\" --prefix-colors \"blue,green\" \"pnpm build:main\" \"pnpm build:renderer\"",
+    "build": "concurrently --names \"main,preload,renderer\" --prefix-colors \"blue,magenta,green\" \"pnpm build:main\" \"pnpm build:preload\" \"pnpm build:renderer\"",
     "build:main": "webpack --config ./config/webpack.config.main.prod.ts",
+    "build:preload": "webpack --config ./config/webpack.config.preload.prod.ts",
     "build:renderer": "webpack --config ./config/webpack.config.renderer.prod.ts",
-    "watch": "concurrently --names \"main,renderer\" --prefix-colors \"blue,green\" \"pnpm watch:main\" \"pnpm watch:renderer\"",
+    "watch": "concurrently --names \"main,preload,renderer\" --prefix-colors \"blue,magenta,green\" \"pnpm watch:main\" \"pnpm watch:preload\" \"pnpm watch:renderer\"",
     "watch:main": "webpack --watch --config ./config/webpack.config.main.base.ts",
+    "watch:preload": "webpack --watch --config ./config/webpack.config.preload.base.ts",
     "watch:renderer": "webpack --watch --config ./config/webpack.config.renderer.base.ts",
     "prepare:remove-source-maps": "ts-node ./scripts/delete-source-maps.ts",
     "package:linux": "electron-builder --linux",

src/main/main.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import { app, globalShortcut, ipcMain as ipc, safeStorage } from 'electron';
 import log from 'electron-log';
 import { menubar } from 'menubar';
@@ -22,8 +23,10 @@ const browserWindowOpts = {
   skipTaskbar: true, // Hide the app from the Windows taskbar
   // TODO #700 refactor to use preload script with a context bridge
   webPreferences: {
-    nodeIntegration: true,
-    contextIsolation: false,
+    preload: path.join(__dirname, 'preload.js'),
+    contextIsolation: true, // TODO change this
+    enableRemoteModule: false,
+    nodeIntegration: false, // TODO change this
   },
 };
 
@@ -125,7 +128,7 @@ app.whenReady().then(async () => {
 
   ipc.on(namespacedEvent('window-hide'), () => mb.hideWindow());
 
-  ipc.on(namespacedEvent('quit'), () => mb.app.quit());
+  // ipc.on(namespacedEvent('quit'), () => mb.app.quit());
 
   ipc.on(
     namespacedEvent('use-alternate-idle-icon'),

src/main/preload.ts

@@ -0,0 +1,62 @@
+import { contextBridge, ipcRenderer } from 'electron';
+import { namespacedEvent } from '../shared/events';
+
+import { Constants } from '../renderer/utils/constants';
+import type { GitifyAPI } from './types';
+
+const api: GitifyAPI = {
+  // Define the global variable
+  global: globalThis,
+
+  openExternalLink: (url) =>
+    ipcRenderer.send(namespacedEvent('open-external-link'), url),
+
+  getAppVersion: () => ipcRenderer.invoke(namespacedEvent('version')),
+
+  encryptValue: (value) =>
+    ipcRenderer.invoke(namespacedEvent('safe-storage-encrypt'), value),
+
+  decryptValue: (value) =>
+    ipcRenderer.invoke(namespacedEvent('safe-storage-decrypt'), value),
+
+  quitApp: () => ipcRenderer.send(namespacedEvent('quit')),
+
+  showWindow: () => ipcRenderer.send(namespacedEvent('window-show')),
+
+  hideWindow: () => ipcRenderer.send(namespacedEvent('window-hide')),
+
+  setAutoLaunch: (value) =>
+    ipcRenderer.send(namespacedEvent('update-auto-launch'), {
+      openAtLogin: value,
+      openAsHidden: value,
+    }),
+
+  setAlternateIdleIcon: (value) =>
+    ipcRenderer.send(namespacedEvent('use-alternate-idle-icon'), value),
+
+  setKeyboardShortcut: (keyboardShortcut) =>
+    ipcRenderer.send(namespacedEvent('update-keyboard-shortcut'), {
+      enabled: keyboardShortcut,
+      keyboardShortcut: Constants.DEFAULT_KEYBOARD_SHORTCUT,
+    }),
+
+  updateTrayIcon: (notificationsLength = 0) => {
+    if (notificationsLength < 0) {
+      ipcRenderer.send(namespacedEvent('icon-error'));
+      return;
+    }
+
+    if (notificationsLength > 0) {
+      ipcRenderer.send(namespacedEvent('icon-active'));
+      return;
+    }
+
+    ipcRenderer.send(namespacedEvent('icon-idle'));
+    // ipcRenderer.send(namespacedEvent('update-tray-icon'), notificationsLength),
+  },
+
+  updateTrayTitle: (title = '') =>
+    ipcRenderer.send(namespacedEvent('update-title'), title),
+};
+
+contextBridge.exposeInMainWorld('gitify', api);

src/main/types.ts

@@ -0,0 +1,15 @@
+export interface GitifyAPI {
+  global: typeof globalThis;
+  openExternalLink: (url: string) => void;
+  getAppVersion: () => Promise<string>;
+  encryptValue: (value: string) => Promise<string>;
+  decryptValue: (value: string) => Promise<string>;
+  quitApp: () => void;
+  showWindow: () => void;
+  hideWindow: () => void;
+  setAutoLaunch: (value: boolean) => void;
+  setAlternateIdleIcon: (value: boolean) => void;
+  setKeyboardShortcut: (keyboardShortcut: boolean) => void;
+  updateTrayIcon: (notificationsLength?: number) => void;
+  updateTrayTitle: (title?: string) => void;
+}