Access Native Resources in Electron App

Question

I'm currently evaluating Electron for an upcoming project. Perhaps my question is trivial for someone who has used Electron. However, I can't find the answer in the documentation or maybe don't fully grasp the concept.

I want to have a web app that users can access with a browser if they choose or from a native app, if they want to use a USB device (in this case, a credit card reader) attached to their pc. So, the main.js file would open the remote web app like so

  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL('http://www.example.com/login.html')

Is there any difference in being able to access local resources (files, ports, etc, if the page is remote vs local? In other words, can you still access the USB ports from a remotely hosted web app wrapped by Electron the same as if the files were local, as in the case of an installed native Electron app? I would think it would load a remote page the same as a local but not sure if ipc would still work.

Answer 1

To access native resources on devices you'll need to be running an electron BrowserWindow with nodeIntegration enabled. This is the default but there are big security implications when loading content from the web into a node enabled BrowserWindow. If you're site is compromised through XSS, all your clients PC's will be open to remote code execution.

For that reason you should build a backend service with your API and then host a front end on a website and a distributed version in your app. You can still build the two from the same code.