Electron security best-practices should allow us to work with Webpack

[reZach]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

According to best security practices, it is recommended we turn off node integration in order to prevent RCE attacks. We as the community however, tend to use webpack for bundling our JS within our Electron applications.

The problem arises because in order to use webpack, we need node present - otherwise there are plenty of issues that arise such as... Module not found: Error: Can't resolve 'fs'. It is out of the scope here to look at problems related to webpack, but potential solutions range from:

• Putting in an empty polyfill for fs (webpack documentation)
• Import fs another way
• Use a fs library from NPM
• Setting the webpack target to node

I come and post a feature request here because I haven't found a definitive guide and was expecting at least some direction from the community on how to implement best-practices with using webpack as the primary bundler.

Proposed Solution

Ideally, there should be some documentation or even better - a sample repo, that has all security best-practices in the template. I've begun creating one, but can't get webpack to bundle properly due to the error I describe above.

If you care to help us "cross the finish line" to bridge best-security practices with webpack, I have a boilerplate/template you can consider starting from.

git clone https://github.com/reZach/electron-webpack-template.git
cd electron-webpack-template
npm i
npm run prod

Or, a new endpoint/hook into Electron that allows a safe way to insert Node into webpack but still maintains isolation to prevent RCE attacks?

Alternatives Considered

The author of webpack confirms that without fs in the renderer process, webpack won't have it either (and fail). I was hoping to gleam some information from the webpack-side if there is some unknown feature that could give us electron users the security practices and still allow us to work with webpack. We'll see if that conversation leads to any good gains.

Additional Information

[MarshallOfSound]

Normally would close this out as a question but here's a generic architecture for a webpack based app that follows security best practices.

You need three build targets (your app is split into three logical parts)

• Main process -> electron-main target in webpack, has access to node, electron, etc.
• Renderer process -> browser target in webpack, acts exactly like a browser. Should have nodeIntegration: false and contextIsolation: true
• Preload script -> electron-preload target in webpack, has access to node, electron, etc. Can expose additional capabilities to the renderer process via the electron.contextBridge module.

In regards to a webpack quick start you can use electron-forge with the webpack template to get started quickly.

npx create-electron-app --template=webpack my-new-app

[reZach]

@MarshallOfSound Thank you for this advice and these directions.

The repository that is created does not have things such as contextIsolation: true or enableRemoteModule: false set in the defaults. This is okay, I can go through and begin to add these, I thought it would be included. Thank you nonetheless!

[reZach]

@MarshallOfSound FYI since you posted here, just want you & others who run across this issue that some of the variables you expose in contextBridge are not available in their entirety in the renderer or preload scripts. I'm moving the issue forward.