window.electronAPI in renderer, best practice? | electronjs.org | Page 1

meager spruce Nov 18, 2022, 11:13 AM

#

Hey folks, I am coming from Electron v0 up to Electron v21, so the preload system is quite a change for me. I've managed to have typed "window.electronAPI", by defining a preload.d.ts. However I am a bit worried about calling "window.electronAPI" everywhere in the renderer process. The types are correct, but I am not fond on relying on a global object. Do you have a best practice for this? Is it ok to have "window.electronAPI" a million times in my application ?

somber willow Nov 18, 2022, 11:16 AM

#

https://www.electronjs.org/docs/latest/tutorial/context-isolation#usage-with-typescript

Context Isolation | Electron

Context Isolation is a feature that ensures that both your preload scripts and Electron's internal logic run in a separate context to the website you load in a webContents. This is important for security purposes as it helps prevent the website from accessing Electron internals or the powerful APIs your preload script has access to.

meager spruce Nov 18, 2022, 12:33 PM

#

That's indeed how I do it, by the way in "preload.ts" I do "export ElectronAPI = typeof electronApi", which avoids rewriting the types for nothing

#

however, this means that in the code you will have calls to "window.electronAPI"

#

while for client/server communication, I am more used to writing a client-side service that communicates with the backend

#

and encapsulates the HTTP call

#

the "preload" system forces the use of a global variable tied to window which is a bit unsettling, I wonder if people are ok with calling "window" everywhere in their frontend code

somber willow Nov 18, 2022, 12:36 PM

#

so?

#

preload expose api into window object

#

you may not use window directly

#

if js able to find proper context

meager spruce Nov 18, 2022, 1:32 PM

#

Yeah I mean it's not a big deal, just new to me when not being used to Electron

#

I think I will use a bit of nesting to have a nicer structure, instead of putting everything in "electronAPI" object at top level

#

eg "electronAPI = { ui: { zoom: { /* all my zoom related methods*/ }, dialogs: { /** all my dialog related methods */ }}"
etc.

#

By any chance, do you have an idea about what could cause this issue?
The migration to "preload.js" seems done, I don't have imports of electron in my renderer anymore, but this error is quite vague

somber willow Nov 18, 2022, 1:39 PM

#

https://www.electronjs.org/docs/latest/tutorial/sandbox#disabling-the-sandbox-for-a-single-process

Process Sandboxing | Electron

One key security feature in Chromium is that processes can be executed within a sandbox. The sandbox limits the harm that malicious code can cause by limiting access to most system resources — sandboxed processes can only freely use CPU cycles and memory. In order to perform operations requiring additional privilege, sandboxed processes use dedi...

meager spruce Nov 18, 2022, 1:48 PM

#

hmm this doesn't fix but changes the error message, at least the preload script is running ok

#window.electronAPI in renderer, best practice?