我正在尝试在我的 renderer
进程中使用 Node 模块(在本例中为 fs
),如下所示:
// main_window.js
const fs = require('fs')
function action() {
console.log(fs)
}
注意: action
函数在我按下 main_window
中的按钮时被调用。
但这给出了一个错误:
Uncaught ReferenceError: require is not defined
at main_window.js:1
我可以 按照这个接受的答案的建议 解决这个问题,方法是在初始化 main.js
时将这些行添加到我的 main_window
:
// main.js
main_window = new BrowserWindow({
width: 650,
height: 550,
webPreferences: {
nodeIntegration: true
}
})
但是, 根据文档,这不是最好的做法,我应该创建一个 preload.js
文件并在那里加载这些节点模块,然后在我的所有 renderer
中使用它 ---
过程。像这样:
main.js
:
main_window = new BrowserWindow({
width: 650,
height: 550,
webPreferences: {
preload: path.join(app.getAppPath(), 'preload.js')
}
})
preload.js
:
const fs = require('fs')
window.test = function() {
console.log(fs)
}
main_window.js
:
function action() {
window.test()
}
它有效!
现在我的问题是,我应该在 --- 中编写我的 renderer
进程的大部分代码是不是违反直觉的 preload.js
(因为仅在 preload.js
可以访问 Node 模块),然后只调用每个 renderer.js
文件中的函数(例如这里, main_window.js
)?我在这里不明白什么?
原文由 Amir Shabani 发布,翻译遵循 CC BY-SA 4.0 许可协议
编辑 2022
我已经 发表了一篇关于 Electron 历史的大型文章(安全性在整个 Electron 版本中发生了怎样的变化)以及 Electron 开发人员可以采取的其他安全注意事项,以确保在新应用程序中正确使用预加载文件。
编辑 2020
正如另一位用户所问,让我在下面解释我的答案。
在 Electron 中使用
preload.js
的正确方法是在您的应用程序可能需要的任何模块周围公开白名单包装器require
。安全方面,暴露
require
或您通过require
调用您的preload.js
评论- 更多解释(请参阅我 的)。如果您的应用程序加载远程内容时尤其如此,很多人都会这样做。为了正确地做事,您需要在您的
BrowserWindow
上启用很多选项,正如我在下面详述的那样。设置这些选项会强制您的电子应用程序通过 IPC(进程间通信)进行通信,并将两个环境相互隔离。像这样设置您的应用程序可以让您验证后端中可能是require
模块的任何内容,客户端不会对其进行篡改。下面,您将找到一个简短示例,说明我所说的内容以及它在您的应用程序中的外观。如果您是新手,我可能建议您使用
secure-electron-template
(我是其作者),它在构建电子应用程序时从一开始就融入了所有这些安全最佳实践。此页面 还提供了有关使用 preload.js 制作安全应用程序时所需架构的详细信息。
主程序
预加载.js
索引.html