preload.js
是一个在渲染进程加载之前执行的脚本,它有权访问渲染器全局(例如window
和document
)和 Node.js 环境(主进程)。这个脚本在网页内容加载之前执行,它具有比普通渲染器更高的权限,可以访问 Node.js API,同时也可以与网页内容安全的交互。
在 Electron 的 BrowserWindow
配置中指定 preload.js
路径。这个脚本在网页加载之前执行,但在网页的 JavaScript 开始运行之后:
javascript">// main.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true, // 推荐开启
enableRemoteModule: false // 推荐禁用,用ipcMain和ipcRenderer代替
}
});
mainWindow.loadFile('index.html');
}
app.on('ready', createWindow);
javascript">// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld(
'api', {
send: (channel, data) => {
// 白名单通道
let validChannels = ['toMain'];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receive: (channel, func) => {
let validChannels = ['fromMain'];
if (validChannels.includes(channel)) {
// 过滤通道,只接受预定义的通道
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
}
);
注:contextBridge
用于在网页中安全地暴露 send
和 receive
方法,这些方法通过 ipcRenderer
与主进程进行通信,同时也限制了可以使用的通道,提高了安全性。
开发electron应用,preload.js
很重要:
preload.js
文件在 Electron 应用中起着桥梁的作用,使得在保持安全的同时,渲染进程可以访问主进程的功能。通过精心设计preload
脚本,可以有效地加强应用的安全性,避免直接暴露过多的 Node.js API 给可能的前端网页(渲染进程端)攻击。
END.