Merge branch 'sandbox-electron-renderer'

30 files changed, 272 insertions, 189 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index cbd56f3843..f3ac7e72c0 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -34,11 +34,12 @@ import {
   RelaySettingsUpdate,
   TunnelState,
 } from '../shared/daemon-rpc-types';
-import { loadTranslations, messages } from '../shared/gettext';
+import { messages, relayLocations } from '../shared/gettext';
 import { SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
-import { IpcMainEventChannel } from '../shared/ipc-event-channel';
 import log, { ConsoleOutput, Logger } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
+import { IpcMainEventChannel } from './ipc-event-channel';
+import { ICurrentAppVersionInfo } from '../shared/ipc-types';
 import {
   AccountExpiredNotificationProvider,
   CloseToAccountExpiryNotificationProvider,
@@ -65,11 +66,13 @@ import {
   IpcInput,
   OLD_LOG_FILES,
 } from './logging';
+import { loadTranslations } from './load-translations';
 import NotificationController from './notification-controller';
 import { resolveBin } from './proc';
 import ReconnectionBackoff from './reconnection-backoff';
 import TrayIconController, { TrayIconType } from './tray-icon-controller';
 import WindowController from './window-controller';
+import { ITranslations } from '../shared/ipc-schema';
 
 // Only import when running app on Linux.
 const linuxSplitTunneling = process.platform === 'linux' && require('./linux-split-tunneling');
@@ -88,13 +91,6 @@ enum AppQuitStage {
   ready,
 }
 
-export interface ICurrentAppVersionInfo {
-  gui: string;
-  daemon: string;
-  isConsistent: boolean;
-  isBeta: boolean;
-}
-
 type AccountVerification = { status: 'verified' } | { status: 'deferred'; error: Error };
 
 class ApplicationMain {
@@ -204,6 +200,7 @@ class ApplicationMain {
   private autoConnectFallbackScheduler = new Scheduler();
 
   private rendererLog?: Logger;
+  private translations: ITranslations = { locale: this.locale };
 
   public run() {
     // Remove window animations to combat window flickering when opening window. Can be removed when
@@ -212,6 +209,10 @@ class ApplicationMain {
       app.commandLine.appendSwitch('wm-window-animations-disabled');
     }
 
+    if (process.platform !== 'linux') {
+      app.enableSandbox();
+    }
+
     this.overrideAppPaths();
 
     if (this.ensureSingleInstance()) {
@@ -373,7 +374,7 @@ class ApplicationMain {
 
     this.blockRequests();
 
-    this.updateCurrentLocale();
+    this.translations = this.updateCurrentLocale();
 
     this.daemonRpc.addConnectionObserver(
       new ConnectionObserver(this.onDaemonConnected, this.onDaemonDisconnected),
@@ -1007,6 +1008,9 @@ class ApplicationMain {
       upgradeVersion: this.upgradeVersion,
       guiSettings: this.guiSettings.state,
       wireguardPublicKey: this.wireguardPublicKey,
+      translations: this.translations,
+      platform: process.platform,
+      runningInDevelopment: process.env.NODE_ENV === 'development',
     }));
 
     IpcMainEventChannel.settings.handleSetAllowLan((allowLan: boolean) =>
@@ -1074,7 +1078,7 @@ class ApplicationMain {
 
     IpcMainEventChannel.guiSettings.handleSetPreferredLocale((locale: string) => {
       this.guiSettings.preferredLocale = locale;
-      this.didChangeLocale();
+      return Promise.resolve(this.updateCurrentLocale());
     });
 
     IpcMainEventChannel.account.handleCreate(() => this.createNewAccount());
@@ -1368,15 +1372,13 @@ class ApplicationMain {
 
     log.info(`Detected locale: ${this.locale}`);
 
-    loadTranslations(this.locale, messages);
-  }
-
-  private didChangeLocale() {
-    this.updateCurrentLocale();
-
-    if (this.windowController) {
-      IpcMainEventChannel.locale.notify(this.windowController.webContents, this.locale);
-    }
+    const messagesTranslations = loadTranslations(this.locale, messages);
+    const relayLocationsTranslations = loadTranslations(this.locale, relayLocations);
+    return {
+      locale: this.locale,
+      messages: messagesTranslations,
+      relayLocations: relayLocationsTranslations,
+    };
   }
 
   // Since the app frontend never performs any network requests, all requests originating from the
@@ -1446,11 +1448,15 @@ class ApplicationMain {
       transparent: !this.guiSettings.unpinnedWindow,
       useContentSize: true,
       webPreferences: {
-        nodeIntegration: true,
-        devTools: process.env.NODE_ENV === 'development',
-        // TODO: Remove use of remote
-        enableRemoteModule: true,
+        preload: path.join(__dirname, '../renderer/preloadBundle.js'),
+        nodeIntegration: false,
+        nodeIntegrationInWorker: false,
+        nodeIntegrationInSubFrames: false,
+        enableRemoteModule: false,
+        sandbox: process.platform !== 'linux',
+        contextIsolation: true,
         spellcheck: false,
+        devTools: process.env.NODE_ENV === 'development',
       },
     };
 
diff --git a/gui/src/main/ipc-event-channel.ts b/gui/src/main/ipc-event-channel.ts
new file mode 100644
index 0000000000..9bd8af1490
--- /dev/null
+++ b/gui/src/main/ipc-event-channel.ts
@@ -0,0 +1,5 @@
+import { ipcMain } from 'electron';
+import { createIpcMain } from '../shared/ipc-helpers';
+import { ipcSchema } from '../shared/ipc-schema';
+
+export const IpcMainEventChannel = createIpcMain(ipcSchema, ipcMain);
diff --git a/gui/src/main/linux-desktop-entry.ts b/gui/src/main/linux-desktop-entry.ts
index dc1ae0e57b..a2712bb7e3 100644
--- a/gui/src/main/linux-desktop-entry.ts
+++ b/gui/src/main/linux-desktop-entry.ts
@@ -1,4 +1,5 @@
 import child_process from 'child_process';
+import { nativeImage } from 'electron';
 import fs from 'fs';
 import path from 'path';
 import { ILinuxApplication } from '../shared/application-types';
@@ -45,7 +46,7 @@ export async function getAppIcon(name?: string) {
 
   // Chromium doesn't support .xpm files
   const extensions = ['svg', 'png'];
-  return findIcon(name, extensions, [
+  const iconPath = await findIcon(name, extensions, [
     getIconDirectories(),
     await getGtkThemeDirectories(),
     // Begin with preferred sized but if nothing matches other sizes should be considered as well.
@@ -53,6 +54,19 @@ export async function getAppIcon(name?: string) {
     // Search in all categories of icons.
     [/.*/],
   ]);
+
+  if (iconPath && path.extname(iconPath) === '.svg') {
+    try {
+      const contents = await fs.promises.readFile(iconPath);
+      return `data:image/svg+xml;base64,${contents.toString('base64')}`;
+    } catch (error) {
+      log.error(`Failed to read icon of application: ${name},`, error);
+    }
+  } else if (iconPath) {
+    return nativeImage.createFromPath(iconPath).toDataURL();
+  }
+
+  return undefined;
 }
 
 // Implemented according to freedesktop specification.
diff --git a/gui/src/main/load-translations.ts b/gui/src/main/load-translations.ts
new file mode 100644
index 0000000000..63d76f0ac6
--- /dev/null
+++ b/gui/src/main/load-translations.ts
@@ -0,0 +1,72 @@
+import fs from 'fs';
+import { GetTextTranslations, po } from 'gettext-parser';
+import Gettext from 'node-gettext';
+import path from 'path';
+import log from '../shared/logging';
+
+const SOURCE_LANGUAGE = 'en';
+const LOCALES_DIR = path.resolve(__dirname, '../../locales');
+
+export function loadTranslations(
+  currentLocale: string,
+  catalogue: Gettext,
+): GetTextTranslations | undefined {
+  // First look for exact match of the current locale
+  const preferredLocales = [];
+
+  if (currentLocale !== SOURCE_LANGUAGE) {
+    preferredLocales.push(currentLocale);
+  }
+
+  // In case of region bound locale like en-US, fallback to en.
+  const language = Gettext.getLanguageCode(currentLocale);
+  if (currentLocale !== language) {
+    preferredLocales.push(language);
+  }
+
+  const domain = catalogue.domain;
+  for (const locale of preferredLocales) {
+    const parsedTranslations = parseTranslation(locale, domain, catalogue);
+    if (parsedTranslations) {
+      log.info(`Loaded translations ${locale}/${domain}`);
+      catalogue.setLocale(locale);
+      return parsedTranslations;
+    }
+  }
+
+  // Reset the locale to source language if we couldn't load the catalogue for the requested locale
+  // Add empty translations to suppress some of the warnings produces by node-gettext
+  catalogue.addTranslations(SOURCE_LANGUAGE, domain, {});
+  catalogue.setLocale(SOURCE_LANGUAGE);
+  return;
+}
+
+function parseTranslation(
+  locale: string,
+  domain: string,
+  catalogue: Gettext,
+): GetTextTranslations | undefined {
+  const filename = path.join(LOCALES_DIR, locale, `${domain}.po`);
+  let contents: string;
+
+  try {
+    contents = fs.readFileSync(filename, { encoding: 'utf8' });
+  } catch (error) {
+    if (error.code !== 'ENOENT') {
+      log.error(`Cannot read the gettext file "${filename}": ${error.message}`);
+    }
+    return undefined;
+  }
+
+  let translations: GetTextTranslations;
+  try {
+    translations = po.parse(contents);
+  } catch (error) {
+    log.error(`Cannot parse the gettext file "${filename}": ${error.message}`);
+    return undefined;
+  }
+
+  catalogue.addTranslations(locale, domain, translations);
+
+  return translations;
+}
diff --git a/gui/src/main/logging.ts b/gui/src/main/logging.ts
index fb21c54b48..7029625d3f 100644
--- a/gui/src/main/logging.ts
+++ b/gui/src/main/logging.ts
@@ -1,7 +1,7 @@
 import { app } from 'electron';
 import fs from 'fs';
 import path from 'path';
-import { IpcMainEventChannel } from '../shared/ipc-event-channel';
+import { IpcMainEventChannel } from './ipc-event-channel';
 import { LogLevel, ILogInput, ILogOutput } from '../shared/logging-types';
 
 export const OLD_LOG_FILES = ['frontend-renderer.log'];
diff --git a/gui/src/main/window-controller.ts b/gui/src/main/window-controller.ts
index a44724d23f..69ae6acb02 100644
--- a/gui/src/main/window-controller.ts
+++ b/gui/src/main/window-controller.ts
@@ -1,15 +1,12 @@
 import { BrowserWindow, Display, screen, Tray, WebContents } from 'electron';
-import { IpcMainEventChannel } from '../shared/ipc-event-channel';
+import { IpcMainEventChannel } from './ipc-event-channel';
+import { IWindowShapeParameters } from '../shared/ipc-types';
 
 interface IPosition {
   x: number;
   y: number;
 }
 
-export interface IWindowShapeParameters {
-  arrowPosition?: number;
-}
-
 interface IWindowPositioning {
   getPosition(window: BrowserWindow): IPosition;
   getWindowShapeParameters(window: BrowserWindow): IWindowShapeParameters;
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index f63e03633a..9ff1459322 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -15,14 +15,15 @@ import configureStore from './redux/store';
 import userInterfaceActions from './redux/userinterface/actions';
 import versionActions from './redux/version/actions';
 
-import { ICurrentAppVersionInfo } from '../main';
-import { loadTranslations, messages, relayLocations } from '../shared/gettext';
-import { IGuiSettingsState, SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
-import { IpcRendererEventChannel, IRelayListPair } from '../shared/ipc-event-channel';
+import { ICurrentAppVersionInfo } from '../shared/ipc-types';
 import { ILinuxSplitTunnelingApplication } from '../shared/application-types';
+import { messages, relayLocations } from '../shared/gettext';
+import { IGuiSettingsState, SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
 import log, { ConsoleOutput } from '../shared/logging';
+import { IRelayListPair } from '../shared/ipc-schema';
 import consumePromise from '../shared/promise';
 import History from './lib/history';
+import { loadTranslations } from './lib/load-translations';
 
 import {
   AccountToken,
@@ -45,6 +46,8 @@ import {
 import { LogLevel } from '../shared/logging-types';
 import IpcOutput from './lib/logging';
 
+const IpcRendererEventChannel = window.ipc;
+
 interface IPreferredLocaleDescriptor {
   name: string;
   code: string;
@@ -98,20 +101,6 @@ export default class AppRenderer {
     log.addOutput(new ConsoleOutput(LogLevel.debug));
     log.addOutput(new IpcOutput(LogLevel.debug));
 
-    IpcRendererEventChannel.locale.listen((locale) => {
-      // load translations for the new locale
-      this.loadTranslations(locale);
-
-      // set current locale
-      this.setLocale(locale);
-
-      // refresh the relay list pair with the new translations
-      this.propagateRelayListPairToRedux();
-
-      // refresh the location with the new translations
-      this.propagateLocationToRedux();
-    });
-
     IpcRendererEventChannel.windowShape.listen((windowShapeParams) => {
       if (typeof windowShapeParams.arrowPosition === 'number') {
         this.reduxActions.userInterface.updateWindowArrowPosition(windowShapeParams.arrowPosition);
@@ -186,9 +175,20 @@ export default class AppRenderer {
     // Request the initial state from the main process
     const initialState = IpcRendererEventChannel.state.get();
 
-    // Load translations
-    this.loadTranslations(initialState.locale);
+    window.platform = initialState.platform;
+    window.runningInDevelopment = initialState.runningInDevelopment;
+
     this.setLocale(initialState.locale);
+    loadTranslations(
+      messages,
+      initialState.translations.locale,
+      initialState.translations.messages,
+    );
+    loadTranslations(
+      relayLocations,
+      initialState.translations.locale,
+      initialState.translations.relayLocations,
+    );
 
     this.setAccountExpiry(initialState.accountData && initialState.accountData.expiry);
     this.handleAccountChange(undefined, initialState.settings.accountToken);
@@ -464,8 +464,23 @@ export default class AppRenderer {
     ];
   }
 
-  public setPreferredLocale(preferredLocale: string) {
-    IpcRendererEventChannel.guiSettings.setPreferredLocale(preferredLocale);
+  public async setPreferredLocale(preferredLocale: string): Promise<void> {
+    const translations = await IpcRendererEventChannel.guiSettings.setPreferredLocale(
+      preferredLocale,
+    );
+
+    // set current locale
+    this.setLocale(translations.locale);
+
+    // load translations for new locale
+    loadTranslations(messages, translations.locale, translations.messages);
+    loadTranslations(relayLocations, translations.locale, translations.relayLocations);
+
+    // refresh the relay list pair with the new translations
+    this.propagateRelayListPairToRedux();
+
+    // refresh the location with the new translations
+    this.propagateLocationToRedux();
   }
 
   public getPreferredLocaleDisplayName(localeCode: string): string {
@@ -479,12 +494,6 @@ export default class AppRenderer {
     this.loginTimer = global.setTimeout(() => this.history.resetWith('/connect'), 1000);
   }
 
-  private loadTranslations(locale: string) {
-    for (const catalogue of [messages, relayLocations]) {
-      loadTranslations(locale, catalogue);
-    }
-  }
-
   private setLocale(locale: string) {
     this.locale = locale;
     this.reduxActions.userInterface.updateLocale(locale);
@@ -576,7 +585,7 @@ export default class AppRenderer {
   }
 
   private async autoConnect() {
-    if (process.env.NODE_ENV === 'development') {
+    if (window.runningInDevelopment) {
       log.info('Skip autoconnect in development');
     } else if (this.autoConnected) {
       log.info('Skip autoconnect because it was done before');
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 6633e35746..7c97f0d844 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -429,7 +429,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                     <Cell.Icon height={12} width={7} source="icon-chevron" />
                   </Cell.CellButton>
 
-                  {process.platform === 'linux' && (
+                  {window.platform === 'linux' && (
                     <Cell.CellButton onClick={this.props.onViewLinuxSplitTunneling}>
                       <Cell.Label>
                         {messages.pgettext('advanced-settings-view', 'Split tunneling')}
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index bc56ffcf3c..87c5b82dce 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -47,7 +47,7 @@ interface IScrollbarUpdateContext {
 export default class CustomScrollbars extends React.Component<IProps, IState> {
   public static defaultProps: IProps = {
     // auto-hide on macOS by default
-    autoHide: process.platform === 'darwin',
+    autoHide: window.platform === 'darwin',
     trackPadding: { x: 2, y: 2 },
   };
 
diff --git a/gui/src/renderer/components/Focus.tsx b/gui/src/renderer/components/Focus.tsx
index 6a2e9c7126..85c2c307e4 100644
--- a/gui/src/renderer/components/Focus.tsx
+++ b/gui/src/renderer/components/Focus.tsx
@@ -1,4 +1,3 @@
-import path from 'path';
 import React, { useImperativeHandle, useState } from 'react';
 import { useLocation } from 'react-router';
 import { sprintf } from 'sprintf-js';
@@ -29,7 +28,7 @@ function Focus(props: IFocusProps, ref: React.Ref<IFocusHandle>) {
     ref,
     () => ({
       resetFocus: () => {
-        const pageName = path.basename(location.pathname);
+        const pageName = location.pathname.slice(location.pathname.lastIndexOf('/') + 1);
         const titleElement = document.getElementsByTagName('h1')[0];
         const titleContent = titleElement?.textContent ?? pageName;
         setTitle(titleContent);
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 67b9622b21..bdf7d51924 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -28,7 +28,7 @@ interface IHeaderBarContainerProps {
 
 const HeaderBarContainer = styled.header({}, (props: IHeaderBarContainerProps) => ({
   padding: '12px 16px',
-  paddingTop: process.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+  paddingTop: window.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
   backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default],
 }));
 
diff --git a/gui/src/renderer/components/ImageView.tsx b/gui/src/renderer/components/ImageView.tsx
index fd6588b1fb..3be04159a2 100644
--- a/gui/src/renderer/components/ImageView.tsx
+++ b/gui/src/renderer/components/ImageView.tsx
@@ -1,4 +1,3 @@
-import path from 'path';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -40,7 +39,7 @@ const ImageMask = styled.div((props: IImageMaskProps) => {
 const HiddenImage = styled.img({ visibility: 'hidden' });
 
 export default function ImageView(props: IImageViewProps) {
-  const url = path.isAbsolute(props.source)
+  const url = props.source.startsWith('data:')
     ? props.source
     : `../../assets/images/${props.source}.svg`;
 
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index 98c5184ea3..a82256b077 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -20,7 +20,7 @@ export const StyledNavigationItems = styled.div({
 export const StyledNavigationBar = styled.nav((props: { unpinnedWindow: boolean }) => ({
   flex: 0,
   padding: '12px',
-  paddingTop: process.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+  paddingTop: window.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
 }));
 
 export const StyledNavigationBarWrapper = styled.div({
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
index 633b7aee95..83aa7b3f7f 100644
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ b/gui/src/renderer/components/PlatformWindow.tsx
@@ -10,7 +10,7 @@ interface IPlatformWindowProps {
 export default styled.div({}, (props: IPlatformWindowProps) => {
   let mask: string | undefined;
 
-  if (process.platform === 'darwin' && !props.unpinnedWindow) {
+  if (window.platform === 'darwin' && !props.unpinnedWindow) {
     const arrowPositionCss =
       props.arrowPosition !== undefined ? `${props.arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
 
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index ab2b423686..d47a7315c6 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -179,8 +179,8 @@ export default class Preferences extends React.Component<IProps> {
                   </Cell.Footer>
                 </AriaInputGroup>
 
-                {(process.platform === 'win32' ||
-                  (process.platform === 'darwin' && process.env.NODE_ENV === 'development')) && (
+                {(window.platform === 'win32' ||
+                  (window.platform === 'darwin' && window.runningInDevelopment)) && (
                   <AriaInputGroup>
                     <Cell.Container>
                       <AriaLabel>
diff --git a/gui/src/renderer/containers/SelectLanguagePage.tsx b/gui/src/renderer/containers/SelectLanguagePage.tsx
index eb052fb8a6..5c073c22e1 100644
--- a/gui/src/renderer/containers/SelectLanguagePage.tsx
+++ b/gui/src/renderer/containers/SelectLanguagePage.tsx
@@ -11,8 +11,8 @@ const mapStateToProps = (state: IReduxState) => ({
 const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     preferredLocalesList: props.app.getPreferredLocaleList(),
-    setPreferredLocale(locale: string) {
-      props.app.setPreferredLocale(locale);
+    async setPreferredLocale(locale: string) {
+      await props.app.setPreferredLocale(locale);
       props.history.goBack();
     },
     onClose() {
diff --git a/gui/src/renderer/context.tsx b/gui/src/renderer/context.tsx
index 113a29fe71..d4b20daeb1 100644
--- a/gui/src/renderer/context.tsx
+++ b/gui/src/renderer/context.tsx
@@ -6,7 +6,7 @@ export interface IAppContext {
 }
 
 export const AppContext = React.createContext<IAppContext | undefined>(undefined);
-if (process.env.NODE_ENV === 'development') {
+if (window.runningInDevelopment) {
   AppContext.displayName = 'AppContext';
 }
 
@@ -34,7 +34,7 @@ export default function withAppContext<Props>(BaseComponent: React.ComponentType
     );
   };
 
-  if (process.env.NODE_ENV === 'development') {
+  if (window.runningInDevelopment) {
     wrappedComponent.displayName =
       'withAppContext(' + (BaseComponent.displayName || BaseComponent.name) + ')';
   }
diff --git a/gui/src/renderer/index.html b/gui/src/renderer/index.html
index 3f2da3d633..043955b3c5 100644
--- a/gui/src/renderer/index.html
+++ b/gui/src/renderer/index.html
@@ -4,10 +4,11 @@
     <title>Mullvad VPN</title>
     <link rel="stylesheet" href="../../assets/css/style.css" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
+    <meta charset="UTF-8">
   </head>
   <body>
     <div id="app"></div>
     <script>var exports = {};</script>
-    <script src="./index.js"></script>
+    <script src="./bundle.js"></script>
   </body>
 </html>
diff --git a/gui/src/renderer/lib/ipc-event-channel.ts b/gui/src/renderer/lib/ipc-event-channel.ts
new file mode 100644
index 0000000000..bcb816e918
--- /dev/null
+++ b/gui/src/renderer/lib/ipc-event-channel.ts
@@ -0,0 +1,5 @@
+import { ipcRenderer } from 'electron';
+import { createIpcRenderer } from '../../shared/ipc-helpers';
+import { ipcSchema } from '../../shared/ipc-schema';
+
+export const IpcRendererEventChannel = createIpcRenderer(ipcSchema, ipcRenderer);
diff --git a/gui/src/renderer/lib/load-translations.ts b/gui/src/renderer/lib/load-translations.ts
new file mode 100644
index 0000000000..43a483de25
--- /dev/null
+++ b/gui/src/renderer/lib/load-translations.ts
@@ -0,0 +1,22 @@
+import { GetTextTranslations } from 'gettext-parser';
+import Gettext from 'node-gettext';
+import log from '../../shared/logging';
+
+const SOURCE_LANGUAGE = 'en';
+
+export function loadTranslations(
+  catalogue: Gettext,
+  locale: string,
+  translations?: GetTextTranslations,
+) {
+  if (translations) {
+    catalogue.addTranslations(locale, catalogue.domain, translations);
+    catalogue.setLocale(locale);
+    log.info(`Loaded translations ${locale}/${catalogue.domain}`);
+  } else {
+    // Reset the locale to source language if we couldn't load the catalogue for the requested locale
+    // Add empty translations to suppress some of the warnings produces by node-gettext
+    catalogue.addTranslations(SOURCE_LANGUAGE, catalogue.domain, {});
+    catalogue.setLocale(SOURCE_LANGUAGE);
+  }
+}
diff --git a/gui/src/renderer/lib/logging.ts b/gui/src/renderer/lib/logging.ts
index 433ba20f8f..7c8dc9e542 100644
--- a/gui/src/renderer/lib/logging.ts
+++ b/gui/src/renderer/lib/logging.ts
@@ -1,10 +1,9 @@
-import { IpcRendererEventChannel } from '../../shared/ipc-event-channel';
 import { ILogOutput, LogLevel } from '../../shared/logging-types';
 
 export default class IpcOutput implements ILogOutput {
   constructor(public level: LogLevel) {}
 
   public write(level: LogLevel, message: string) {
-    IpcRendererEventChannel.logging.log({ level: level, message });
+    window.ipc.logging.log({ level: level, message });
   }
 }
diff --git a/gui/src/renderer/preload.ts b/gui/src/renderer/preload.ts
new file mode 100644
index 0000000000..5c44b71eeb
--- /dev/null
+++ b/gui/src/renderer/preload.ts
@@ -0,0 +1,4 @@
+import { contextBridge } from 'electron';
+import { IpcRendererEventChannel } from './lib/ipc-event-channel';
+
+contextBridge.exposeInMainWorld('ipc', IpcRendererEventChannel);
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 59b4c32b46..592caab687 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -148,7 +148,7 @@ const initialState: ISettingsReduxState = {
     autoConnect: true,
     monochromaticIcon: false,
     startMinimized: false,
-    unpinnedWindow: process.platform !== 'win32' && process.platform !== 'darwin',
+    unpinnedWindow: window.platform !== 'win32' && window.platform !== 'darwin',
   },
   relaySettings: {
     normal: {
diff --git a/gui/src/renderer/redux/store.ts b/gui/src/renderer/redux/store.ts
index 49f864d18b..92d85e4dbe 100644
--- a/gui/src/renderer/redux/store.ts
+++ b/gui/src/renderer/redux/store.ts
@@ -54,7 +54,7 @@ export default function configureStore(initialState?: IReduxState) {
   const composeEnhancers: typeof compose = (() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const reduxCompose = window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
-    if (process.env.NODE_ENV === 'development' && reduxCompose) {
+    if (window.runningInDevelopment && reduxCompose) {
       return reduxCompose({ actionCreators });
     }
     return compose;
diff --git a/gui/src/shared/gettext.ts b/gui/src/shared/gettext.ts
index 3283269c70..0416e8b1ce 100644
--- a/gui/src/shared/gettext.ts
+++ b/gui/src/shared/gettext.ts
@@ -1,67 +1,8 @@
-import fs from 'fs';
-import { po } from 'gettext-parser';
 import Gettext from 'node-gettext';
-import path from 'path';
 import { LocalizationContexts } from './localization-contexts';
 import log from './logging';
 
 const SOURCE_LANGUAGE = 'en';
-const LOCALES_DIR = path.resolve(__dirname, '../../locales');
-
-export function loadTranslations(currentLocale: string, catalogue: Gettext) {
-  // First look for exact match of the current locale
-  const preferredLocales = [];
-
-  if (currentLocale !== SOURCE_LANGUAGE) {
-    preferredLocales.push(currentLocale);
-  }
-
-  // In case of region bound locale like en-US, fallback to en.
-  const language = Gettext.getLanguageCode(currentLocale);
-  if (currentLocale !== language) {
-    preferredLocales.push(language);
-  }
-
-  const domain = catalogue.domain;
-  for (const locale of preferredLocales) {
-    if (parseTranslation(locale, domain, catalogue)) {
-      log.info(`Loaded translations ${locale}/${domain}`);
-      catalogue.setLocale(locale);
-      return;
-    }
-  }
-
-  // Reset the locale to source language if we couldn't load the catalogue for the requested locale
-  // Add empty translations to suppress some of the warnings produces by node-gettext
-  catalogue.addTranslations(SOURCE_LANGUAGE, domain, {});
-  catalogue.setLocale(SOURCE_LANGUAGE);
-}
-
-function parseTranslation(locale: string, domain: string, catalogue: Gettext): boolean {
-  const filename = path.join(LOCALES_DIR, locale, `${domain}.po`);
-  let contents: string;
-
-  try {
-    contents = fs.readFileSync(filename, { encoding: 'utf8' });
-  } catch (error) {
-    if (error.code !== 'ENOENT') {
-      log.error(`Cannot read the gettext file "${filename}": ${error.message}`);
-    }
-    return false;
-  }
-
-  let translations: ReturnType<typeof po.parse>;
-  try {
-    translations = po.parse(contents);
-  } catch (error) {
-    log.error(`Cannot parse the gettext file "${filename}": ${error.message}`);
-    return false;
-  }
-
-  catalogue.addTranslations(locale, domain, translations);
-
-  return true;
-}
 
 function setErrorHandler(catalogue: Gettext) {
   catalogue.on('error', (error) => {
diff --git a/gui/src/shared/ipc-helpers.ts b/gui/src/shared/ipc-helpers.ts
index d1a72a2df6..59eee46459 100644
--- a/gui/src/shared/ipc-helpers.ts
+++ b/gui/src/shared/ipc-helpers.ts
@@ -1,4 +1,4 @@
-import { ipcMain, ipcRenderer, WebContents } from 'electron';
+import { IpcMain as EIpcMain, IpcRenderer as EIpcRenderer, WebContents } from 'electron';
 import { capitalize } from './string-helpers';
 import log from './logging';
 
@@ -7,26 +7,21 @@ type Sender<T, R> = (arg: T) => R;
 type Notifier<T> = (webContents: WebContents, arg: T) => void;
 type Listener<T> = (callback: (arg: T) => void) => void;
 
-interface IpcCall<T, R> {
-  direction: 'renderer-to-main' | 'main-to-renderer';
-  send: (event: string) => Notifier<T> | Sender<T, R>;
-  receive: (event: string) => Listener<T> | Handler<T, R>;
-}
-
-interface MainToRenderer<T> extends IpcCall<T, never> {
+interface MainToRenderer<T> {
   direction: 'main-to-renderer';
-  send: (event: string) => Notifier<T>;
-  receive: (event: string) => Listener<T>;
+  send: (event: string, ipcMain: EIpcMain) => Notifier<T>;
+  receive: (event: string, ipcRenderer: EIpcRenderer) => Listener<T>;
 }
 
-interface RendererToMain<T, R> extends IpcCall<T, R> {
+interface RendererToMain<T, R> {
   direction: 'renderer-to-main';
-  send: (event: string) => Sender<T, R>;
-  receive: (event: string) => Handler<T, R>;
+  send: (event: string, ipcRenderer: EIpcRenderer) => Sender<T, R>;
+  receive: (event: string, ipcMain: EIpcMain) => Handler<T, R>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyIpcCall = IpcCall<any, any>;
+type AnyIpcCall = MainToRenderer<any> | RendererToMain<any, any>;
+
 type Schema = Record<string, Record<string, AnyIpcCall>>;
 
 // Renames all IPC calls, e.g. `callName` to either `notifyCallName` or `handleCallName` depending
@@ -66,22 +61,31 @@ type IpcRenderer<S extends Schema> = {
 };
 
 // Preforms the transformation of the main event channel in accordance with the above types.
-export function createIpcMain<S extends Schema>(ipc: S): IpcMain<S> {
-  return createIpc(ipc, (event, key, spec) => {
+export function createIpcMain<S extends Schema>(schema: S, ipcMain: EIpcMain): IpcMain<S> {
+  return createIpc(schema, (event, key, spec) => {
     const capitalizedKey = capitalize(key);
     const newKey =
       spec.direction === 'main-to-renderer' ? `notify${capitalizedKey}` : `handle${capitalizedKey}`;
-    const newValue = spec.direction === 'main-to-renderer' ? spec.send(event) : spec.receive(event);
+    const newValue =
+      spec.direction === 'main-to-renderer'
+        ? spec.send(event, ipcMain)
+        : spec.receive(event, ipcMain);
 
     return [newKey, newValue];
   });
 }
 
 // Preforms the transformation of the renderer event channel in accordance with the above types.
-export function createIpcRenderer<S extends Schema>(ipc: S): IpcRenderer<S> {
-  return createIpc(ipc, (event, key, spec) => {
+export function createIpcRenderer<S extends Schema>(
+  schema: S,
+  ipcRenderer: EIpcRenderer,
+): IpcRenderer<S> {
+  return createIpc(schema, (event, key, spec) => {
     const newKey = spec.direction === 'main-to-renderer' ? `listen${capitalize(key)}` : key;
-    const newValue = spec.direction === 'main-to-renderer' ? spec.receive(event) : spec.send(event);
+    const newValue =
+      spec.direction === 'main-to-renderer'
+        ? spec.receive(event, ipcRenderer)
+        : spec.send(event, ipcRenderer);
 
     return [newKey, newValue];
   });
@@ -105,8 +109,8 @@ function createIpc<S extends Schema, T, R extends IpcMain<S> | IpcRenderer<S>>(
 export function send<T>(): RendererToMain<T, void> {
   return {
     direction: 'renderer-to-main',
-    send: (event: string) => (newValue: T) => ipcRenderer.send(event, newValue),
-    receive: (event: string) => (handlerFn: (value: T) => void) => {
+    send: (event, ipcRenderer) => (newValue: T) => ipcRenderer.send(event, newValue),
+    receive: (event, ipcMain) => (handlerFn: (value: T) => void) => {
       ipcMain.on(event, (_event, newValue: T) => {
         handlerFn(newValue);
       });
@@ -118,8 +122,8 @@ export function send<T>(): RendererToMain<T, void> {
 export function invokeSync<T, R>(): RendererToMain<T, R> {
   return {
     direction: 'renderer-to-main',
-    send: (event: string) => (newValue: T) => ipcRenderer.sendSync(event, newValue),
-    receive: (event: string) => (handlerFn: (value: T) => R) => {
+    send: (event, ipcRenderer) => (newValue: T) => ipcRenderer.sendSync(event, newValue),
+    receive: (event, ipcMain) => (handlerFn: (value: T) => R) => {
       ipcMain.on(event, (ipcEvent, newValue: T) => {
         ipcEvent.returnValue = handlerFn(newValue);
       });
@@ -141,13 +145,13 @@ export function notifyRenderer<T>(): MainToRenderer<T> {
   return {
     direction: 'main-to-renderer',
     send: notifyRendererImpl,
-    receive: (event: string) => (fn: (value: T) => void) => {
+    receive: (event, ipcRenderer) => (fn: (value: T) => void) => {
       ipcRenderer.on(event, (_event, newState: T) => fn(newState));
     },
   };
 }
 
-function notifyRendererImpl<T>(event: string): Notifier<T> {
+function notifyRendererImpl<T>(event: string, _ipcMain: EIpcMain): Notifier<T> {
   return (webContents: WebContents, value: T) => {
     if (webContents.isDestroyed()) {
       log.error(`sender(${event}): webContents is already destroyed!`);
@@ -159,7 +163,7 @@ function notifyRendererImpl<T>(event: string): Notifier<T> {
 
 type RequestResult<T> = { type: 'success'; value: T } | { type: 'error'; message: string };
 
-function invokeImpl<T, R>(event: string): Sender<T, Promise<R>> {
+function invokeImpl<T, R>(event: string, ipcRenderer: EIpcRenderer): Sender<T, Promise<R>> {
   return async (arg: T): Promise<R> => {
     const result: RequestResult<R> = await ipcRenderer.invoke(event, arg);
     switch (result.type) {
@@ -171,7 +175,7 @@ function invokeImpl<T, R>(event: string): Sender<T, Promise<R>> {
   };
 }
 
-function handle<T, R>(event: string): Handler<T, Promise<R>> {
+function handle<T, R>(event: string, ipcMain: EIpcMain): Handler<T, Promise<R>> {
   return (fn: (arg: T) => Promise<R>) => {
     ipcMain.handle(event, async (_ipcEvent, arg: T) => {
       try {
diff --git a/gui/src/shared/ipc-event-channel.ts b/gui/src/shared/ipc-schema.ts
index 19c11f85ab..a31745c01f 100644
--- a/gui/src/shared/ipc-event-channel.ts
+++ b/gui/src/shared/ipc-schema.ts
@@ -1,6 +1,5 @@
-import { ICurrentAppVersionInfo } from '../main/index';
-import { IWindowShapeParameters } from '../main/window-controller';
-import { ILinuxSplitTunnelingApplication } from '../shared/application-types';
+import { GetTextTranslations } from 'gettext-parser';
+import { ILinuxSplitTunnelingApplication } from './application-types';
 import {
   AccountToken,
   BridgeSettings,
@@ -18,20 +17,20 @@ import {
   VoucherResponse,
 } from './daemon-rpc-types';
 import { IGuiSettingsState } from './gui-settings-state';
-import {
-  createIpcMain,
-  createIpcRenderer,
-  invoke,
-  invokeSync,
-  notifyRenderer,
-  send,
-} from './ipc-helpers';
 import { LogLevel } from './logging-types';
 
 interface ILogEntry {
   level: LogLevel;
   message: string;
 }
+import { invoke, invokeSync, notifyRenderer, send } from './ipc-helpers';
+import { ICurrentAppVersionInfo, IWindowShapeParameters } from './ipc-types';
+
+export interface ITranslations {
+  locale: string;
+  messages?: GetTextTranslations;
+  relayLocations?: GetTextTranslations;
+}
 
 export interface IRelayListPair {
   relays: IRelayList;
@@ -52,6 +51,9 @@ export interface IAppStateSnapshot {
   upgradeVersion: IAppVersionInfo;
   guiSettings: IGuiSettingsState;
   wireguardPublicKey?: IWireguardPublicKey;
+  translations: ITranslations;
+  platform: NodeJS.Platform;
+  runningInDevelopment: boolean;
 }
 
 // The different types of requests are:
@@ -93,13 +95,10 @@ export interface IAppStateSnapshot {
 //       listenFourth: (fn: (arg: boolean) => void) => void,
 //     },
 //   }
-const ipc = {
+export const ipcSchema = {
   state: {
     get: invokeSync<void, IAppStateSnapshot>(),
   },
-  locale: {
-    '': notifyRenderer<string>(),
-  },
   windowShape: {
     '': notifyRenderer<IWindowShapeParameters>(),
   },
@@ -155,7 +154,7 @@ const ipc = {
     setAutoConnect: send<boolean>(),
     setStartMinimized: send<boolean>(),
     setMonochromaticIcon: send<boolean>(),
-    setPreferredLocale: send<string>(),
+    setPreferredLocale: invoke<string, ITranslations>(),
     setUnpinnedWindow: send<boolean>(),
   },
   account: {
@@ -192,6 +191,3 @@ const ipc = {
     log: send<ILogEntry>(),
   },
 };
-
-export const IpcMainEventChannel = createIpcMain(ipc);
-export const IpcRendererEventChannel = createIpcRenderer(ipc);
diff --git a/gui/src/shared/ipc-types.ts b/gui/src/shared/ipc-types.ts
new file mode 100644
index 0000000000..7781551ed5
--- /dev/null
+++ b/gui/src/shared/ipc-types.ts
@@ -0,0 +1,10 @@
+export interface ICurrentAppVersionInfo {
+  gui: string;
+  daemon: string;
+  isConsistent: boolean;
+  isBeta: boolean;
+}
+
+export interface IWindowShapeParameters {
+  arrowPosition?: number;
+}
diff --git a/gui/src/shared/notifications/error.ts b/gui/src/shared/notifications/error.ts
index d580bf1f1e..c5f15482dc 100644
--- a/gui/src/shared/notifications/error.ts
+++ b/gui/src/shared/notifications/error.ts
@@ -45,7 +45,7 @@ export class ErrorNotificationProvider
 function getMessage(errorDetails: IErrorState, accountExpiry?: string): string {
   if (errorDetails.blockFailure) {
     if (errorDetails.cause.reason === 'set_firewall_policy_error') {
-      switch (process.platform) {
+      switch (process.platform ?? window.platform) {
         case 'win32':
           return messages.pgettext(
             'notifications',
@@ -86,7 +86,7 @@ function getMessage(errorDetails: IErrorState, accountExpiry?: string): string {
           'Could not configure IPv6. Disable it in the app or enable it on your device.',
         );
       case 'set_firewall_policy_error':
-        switch (process.platform) {
+        switch (process.platform ?? window.platform) {
           case 'win32':
             return messages.pgettext(
               'notifications',
diff --git a/gui/src/shared/notifications/no-valid-key.ts b/gui/src/shared/notifications/no-valid-key.ts
index d1b90095e2..8da145a1f0 100644
--- a/gui/src/shared/notifications/no-valid-key.ts
+++ b/gui/src/shared/notifications/no-valid-key.ts
@@ -14,7 +14,7 @@ export class NoValidKeyNotificationProvider implements InAppNotificationProvider
   public mayDisplay() {
     const usingWireGuard =
       this.context.tunnelProtocol === 'wireguard' ||
-      (this.context.tunnelProtocol === 'any' && process.platform !== 'win32');
+      (this.context.tunnelProtocol === 'any' && (process.platform ?? window.platform) !== 'win32');
     const keyInvalid =
       this.context.wireGuardKey.type === 'key-not-set' ||
       this.context.wireGuardKey.type === 'too-many-keys' ||