Electron apps that can securely access online content

[Uncle Buddy]

I have no interest in having Treebard access the internet. I have a browser for that, no? But I can't guarantee that others who work on the project or borrow ideas will feel the same way. It would be too bad if someone got ahold of Treebard and extended it into bloatware that's supposed to do everything including tie your shoes for you, except for proper genealogy database storage and retrieval. Treebard is supposed to become a universally acceptable mode of genealogy data sharing, universal enough to replace GEDCOM in some facets. (Just share the whole program--who needs GEDCOM?)

Electron is going to be the vehicle for Treebard v. 0.0.0. The purpose of Electron is to write standalone desktop applications, not web apps. But these days, you could get tarred and feathered and rode out of town on a rail for suggesting that any application should just ignore the internet. The way I see it, if Treebard becomes popular, someone is going to extend it to interface with remote content. So realistically speaking, it should be set up that way from the start.

Actually, the extra trouble involved with worrying about this sort of thing is what turned me off to writing a web app to begin with. So once again, with Electron, the security issue rears its ugly head. I want to be realistic about it. No one is going to agree with me except other dodderers like me. A lot of techy and nerd types who like genealogy also like to fiddle around with scraping data off of websites etc. I don't consider that to be genealogy research, I consider it to be techy, nerdy, computerish stuff. But I don't mind that someone, someday, will extend Treebard beyond my original vision of outlandish simplicity.

Therefore, I'm going to outline what's needed for Electron apps to work securely with remote online content. I'll put the info right here, and then I'll turn around and write a standalone app like I want to and not deal with the extra coding problems. I love to make GUIs and databases. So that's what I will do with my precious time on this earth. It beats collecting stamps.

Electron has a main process or back-end which communicates with the computer, the file system, the database, etc. This works because of a JavaScript extension called Node.js. Electron also has a renderer process which renders web pages inside of the app which looks like a standalone app, not a browser, but runs on the same software as the Chrome browser. Every window in the app has its own renderer process which works with HTML, CSS and JavaScript, same as any web page. This is the front-end.

The great thing about Electron is that it includes both the front-end and the back-end, gets them to talk to each other, and frees up the developer to be creative instead of having to be a full-stack developer or give part of the project to a back-end developer who understands Node, security, etc. So Electron knows how to talk to itself and we don't worry about establishing a localhost connection etc. This is a big deal for people like me who aren't interested in those inner computerish details. My ideal as a lover of GUI creation is to make an app that is so easy and intuitive and capable that the computer disappears in the process and the user is alone with his creation, for example a family tree. I don't like to think about the actual computer itself.

The old, "wrong", insecure way of getting Electron to talk to itself in 2021:

This isn't wrong at all, so let's call it the standalone desktop app vs. the connecteddesktop app.

It's simple, and this information is easy to find online if I haven't spelled it out well enough. In the main process such as index.js or main.js, the function that creates windows has to change the security defaults built into Electron. This gives the front-end access to all Node methods. Here's the simple, two-line solution to making this work, and this will fix all of the online Electron tutorials that no longer work due to an error such as `require is not defined`.

function createWindow () {
 const win = new BrowserWindow({
   webPreferences: {
     nodeIntegration: true,
     contextIsolation: false
   }
 })

 win.loadFile('index.html')

}

The two Electron security defaults set to true and false above will allow the front-end to have easy access to Node's back-end methods. In the next post I'll outline the sorts of things that have to be done instead if the defaults are left in place so the app can communicate securely with your own computer's back-end as well as remote (online) data sources.

[Uncle Buddy]

I don't personally know how to do this yet but have copied the only three working examples of it that I could find online and it does work. I won't try to explain it completely, since I barely understand it, but the gist of it is that you leave the security defaults in place so that `nodeIntegration` is `false` and `contextIsolation` is `true`. Then for each Node method you want to use (each time you want to access back-end data, even if it's from your own computer), you have to give the front-end permission to see it. You could import a whole module called `os` for example, and the front-end will only be able to see the methods of the imported module that you specifically give it permission to see.

The way this is done, in general, is to use Electron's `contextBridge` method. Here's an example of the kind of code you'll have to write if the two magic security defaults are left in their default setting:

const { ipcRenderer, contextBridge } = require('electron')

contextBridge.exposeInMainWorld(
 'app',
 {
   setFullscreen: (flag) => ipcRenderer.invoke('setFullscreen', flag),
 }
)

The code above is a file called `preload.js` in one of the working examples I tried. This file pre-loads the front-end with the permitted data, which in this case is just a Node method that lets the front-end toggle itself to full screen mode when the user pushes a button. I'll give the links to the three working examples I could find. If you need this info, you should recreate all three of them and read the code to see how they work. They are simple working examples but more like these are needed to get through to people like me who just want to make a GUI right now.

Here's the secure window creation function from the main process which matches the code I showed in the previous post on the standalone version:

function createWindow () {
 const mainWindow = new BrowserWindow({
   webPreferences: {
     contextIsolation: true,
     enableRemoteModule: false,
     nodeIntegration: false,
     preload: path.join(app.getAppPath(), 'preload.js'),
   }
 })
 mainWindow.loadFile('index.html')

 ipcMain.handle('setFullscreen', (event, flag) => {
   if (mainWindow) {
     mainWindow.setFullScreen(flag)
   }
 })
}

This is just enough information to hopefully show you more or less what's going on in a very general way. To experience this for yourself, create an Electron app using just about any tutorial you can find, and it won't work until you set nodeIntegration to true and contextIsolation to false. This is OK but on a real-world project that's going to ever touch remote content (anything you get over an internet connection), learn the secure way as above and do it right.

I'm not doing my app "wrong". I'm very deeply disinterested in using it to send or receive remote data. I just need the Node stuff to communicate with the back-end of my very own computer, period, the end. So I'm not doing it wrong by overriding the defaults. Possibly I'm the only computerish person on earth who would prefer to just open my browser or email program if I want to go online and do something.

Here are the relevant links to getting a proper education in using Electron securely. The first four links are for the only three examples I've found that show how to use Electron securely. The others include a quick-start tutorial from Electron docs and other essential information.

https://gist.github.com/matt-allan/f2ba61de30cfde2aa1f90d44177d68cf
mattallan.me/posts/electron-context-bridge

www.youtube.com/watch?v=WRuz9ZgG7g4

www.alanwsmith.com/electron-v12-example-app-template

Detailed information from an expert on this topic:
github.com/reZach/secure-electron-template/blob/master/docs/newtoelectron.md
stackoverflow.com/questions/57807459/how-to-use-preload-js-properly-in-electron

Electron offical docs:
www.electronjs.org/docs/api/context-bridge
www.electronjs.org/docs/tutorial/security
www.electronjs.org/docs/api/ipc-renderer
www.electronjs.org/docs/api/ipc-main
www.electronjs.org/docs/tutorial/quick-start

Notice that in the official Electron quick-start tutorial, which you should use, this security information has not been integrated. In fact, this information is scattered tersely from page to page in the Electron docs, which is too bad for us novices, but experienced programmers do have a tendency to not repeat themselves, which is too bad for us novices.