frontend: app: Pass backendToken via IPC

This change removes the backendToken from the URL and instead passes it
via IPC. This ensures that restarting the app does not create new
instances with unique URLs.

Fixes: #2846

Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>

app/electron/main.ts

@@ -48,9 +48,6 @@ const startUrl = (
     pathname: frontendPath,
     protocol: 'file:',
     slashes: true,
-    query: {
-      backendToken: backendToken,
-    },
   })
 )
   // Windows paths use backslashes and for consistency we want to use forward slashes.
@@ -1200,6 +1197,10 @@ function startElecron() {
       }
     });
 
+    ipcMain.on('request-backend-token', () => {
+      mainWindow?.webContents.send('backendToken', backendToken);
+    });
+
     /**
      * Data sent from the renderer process when a 'run-command' event is emitted.
      */

app/electron/preload.ts

@@ -12,6 +12,7 @@ contextBridge.exposeInMainWorld('desktopApi', {
       'pluginsLoaded',
       'run-command',
       'plugin-manager',
+      'request-backend-token',
     ];
     if (validChannels.includes(channel)) {
       ipcRenderer.send(channel, data);
@@ -27,6 +28,7 @@ contextBridge.exposeInMainWorld('desktopApi', {
       'command-stderr',
       'command-exit',
       'plugin-manager',
+      'backendToken',
     ];
     if (validChannels.includes(channel)) {
       // Deliberately strip event as it includes `sender`

frontend/src/components/App/AppContainer.tsx

@@ -2,13 +2,20 @@ import { GlobalStyles } from '@mui/material';
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { BrowserRouter, HashRouter } from 'react-router-dom';
-import helpers from '../../helpers';
+import helpers, { setBackendToken } from '../../helpers';
 import Plugins from '../../plugin/Plugins';
 import ReleaseNotes from '../common/ReleaseNotes/ReleaseNotes';
 import Layout from './Layout';
 import { PreviousRouteProvider } from './RouteSwitcher';
 
 export default function AppContainer() {
+  React.useEffect(() => {
+    window.desktopApi?.send('request-backend-token');
+    window.desktopApi?.receive('backendToken', (token: string) => {
+      setBackendToken(token);
+    });
+  }, []);
+
   const Router = ({ children }: React.PropsWithChildren<{}>) =>
     helpers.isElectron() ? (
       <HashRouter>{children}</HashRouter>

frontend/src/helpers/index.ts

@@ -362,14 +362,17 @@ export function getWebsocketMultiplexerEnabled(): boolean {
 
 /**
  * The backend token to use when making API calls from Headlamp when running as an app.
- * The app opens the index.html?backendToken=... and passes the token to the frontend
- * in this way. The token is then used in the getHeadlampAPIHeaders function below.
+ * The token is requested from the main process via IPC once the renderer is ready,
+ * and stored for use in the getHeadlampAPIHeaders function below.
  *
- * The app also passes the token to the headlamp-server via HEADLAMP_BACKEND_TOKEN env var.
+ * The app also sets HEADLAMP_BACKEND_TOKEN in the headlamp-server environment,
+ * which the server checks to validate requests containing this same token.
  */
-const backendToken =
-  import.meta.env.REACT_APP_HEADLAMP_BACKEND_TOKEN ||
-  new URLSearchParams(window.location.search).get('backendToken');
+let backendToken: string | null = null;
+
+export function setBackendToken(token: string | null) {
+  backendToken = import.meta.env.REACT_APP_HEADLAMP_BACKEND_TOKEN || token;
+}
 
 /**
  * Returns headers for making API calls to the headlamp-server backend.