Security Best Practices (Help Wanted)

I’ve recently seen a handful of security related suggestions such as https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/733#issuecomment-623763139 and https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/610#issuecomment-618901558. With v2.0 of this plugin I’d like to make it much more secure by default. I’ve started by disabling nodeIntegration by default, but I’d also like to add a security section to the docs.

If you have any suggestions related to security, whether it be something I should change in the background.js template or something I should explain in this new section, please leave a comment below. As a bonus, I’d really appreciate a short tutorial on how to configure it if the process isn’t as simple as changing a line or two of code. Thank you for your help making the many apps built with this plugin more secure.

EDIT: The security page is now live, but I’ll leave this open as I could still add more to it.

[aleksey-hoffman]

Issue: webPreferences.webSecurity

When you try to display images or other files in a renderer window with webSecurity: true you get the following error: Not allowed to load local resource.

Most answers on the internet tell you to just set webSecurity: false, so I would imagine that’s exactly what most devs do. It solves the problem and allows you to load images, but it makes the app less safe to use.

I don’t know how dangerous it actually is to use an app with disabled webSecurity, but according to the docs and to Electron maintainer @MarshallOfSound, disabling webSecurity is a bad idea:

loading arbitrary local resources from a remote endpoint is a massive security violation and you should be aware of what you are doing if you intend for that to be possible.

The correct way to handle this kind of thing is to expose a custom protocol handler app:// that can serve specific files from local disk for your remote endpoint to use.

Solution

To make electron-builder v2.0 safer by default, and prevent developers from monkey-patching their apps with webSecurity: false, perhaps electron-builder should regitster a custom protocol automatically:

Main process:

import { protocol } from 'electron'
...

app.on('ready', () => {
  registerSafeFileProtocol()
  ...
})

function registerSafeFileProtocol() {
  const safeFileProtocol = `${appName}-safe-file-protocol`
  protocol.registerFileProtocol(safeFileProtocol, (request, callback) => {
    const url = request.url.replace(`${safeFileProtocol}://`, '')
    // Decode URL to prevent errors when loading filenames with UTF-8 chars or chars like "#"
    const decodedUrl = decodeURIComponent(url)
    try {
      return callback(decodedUrl)
    }
    catch (error) {
      console.error('ERROR: main | registerSafeFileProtocol | Could not get file path', error)
    }
  })
}

I think it should add the app name to the protocol: ${appName}-safe-file-protocol, otherwise, if you have multiple apps that use the same protocol, there might be a conflict, for example, if you have 2 apps with this:

app.setAsDefaultProtocolClient('safe-file-protocol')

And then open a file from a URL using the protocol, e.g. safe-file-protocol://test.jpg - will all the apps with that protocol open? Will you get an error?

Docs

Also docs would have to be updated to explain how to use the protocol to load files:

Method 1: load image in a renderer window:

Renderer process:

<img :src="getSafePath('C:/test.jpg')">

computed: {
  getSafePath (path) {
    // return `${__safeFileProtocol}://${path}`
    return `appName-safe-file-protocol://${path}`
  }
}

Method 2: load path selected by user via dialog from the main process:

Main process:

ipcMain.on('open-file-dialog', (event) => {
  const window = BrowserWindow.getFocusedWindow()

  dialog.showOpenDialog(window, { properties: ['openFile'] })
    .then(result => {
      // Send the path back to the renderer
      event.sender.send('open-file-dialog-reply', { path: result.filePaths[0] })
    })
    .catch(error => {
       console.log('ERROR: main | open-file-dialog | Could not get file path')
    })
})

Renderer process:

<img id="image-1">

mounted () {
  ipcRenderer.on('open-file-dialog-reply', (event, data) => {
    this.loadImage(data.path)
  }
},
methods: {
  loadImage (path) {
    const image1 = document.getElementById('image-1')
    image1.src = `appName-safe-file-protocol://${path}`
  }
}

[Sparkenstein]

Following comments from #610 someone made a electron template for react that targets security only. take a look at secure-electron-template). preload.js from this project is a good example of how to expose protected methods.