Electron 如何在沙箱中使用node和Electron的模块

前景

在Electron的沙盒中往往会需要使用node或Electron的Api，一般有以下两种方式

1. 创建窗体时配置允许渲染进程使用node的Api
2. 创建窗体时配置调用preload.js模块，指定暴漏Electron和node的Api

方案

配置允许渲染进程直接使用node的Api

这种方式不在这里做详细描述，可参考
Electron 如何在渲染进程中去创建新弹窗

Preload的形式（推荐）

1. 编写preload的js文件,设计需要暴漏给沙箱（渲染进程）的Api

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electron', {
	listenCreateFile: (callback) => {
		ipcRenderer.on('createNewFile', () => {
			callback()
		})
	},
	removeListenCreateFile: () => {
		ipcRenderer.removeAllListeners('createNewFile')
	}
})

2. 创建窗体时，引入preload的js文件

const win = new BrowserWindow({
	width: 1024,
	height: 800,
	webPreferences: {
		preload: path.join(__dirname, './preload/index.js')
	}
})
//窗体激活时注册快捷键
win.on('focus', () => {
	globalShortcut.register('CommandOrControl+N', () => {
		win.webContents.send('createNewFile') //给沙箱发送创建文件的消息
	})
})
//窗体失去焦点卸载监听
win.on('blur', () => {
	globalShortcut.unregister('CommandOrControl+N')
})

3. 在沙箱（渲染进程）中使用

useEffect(() => {
	window.electron.listenCreateFile(createNewFile)
	return () => {
		window.electron.removeListenCreateFile()
	}
})

优缺点对比

	electron/remote形式	preload形式
优点	可直接在沙箱（渲染进程）中使用node、electron 的api，方便	安全，可指定暴露node、electron的Api
缺点	具有安全风险，外部可注入node脚本来入侵	使用起来相对来说比较麻烦，需维护preload的js文件

总体的来说，基于安全风险的考虑，Electron官方也是推荐使用preload的形式，也因此remote模块也在近几年中从Electron中抽离了出来，形成独立的模块来维护