Я сподіваюся, що ця відповідь приверне певну увагу, оскільки переважна більшість відповідей залишають великі діри в безпеці у вашому електронному додатку. Насправді ця відповідь - це, по суті, те, що ви повинні робити, щоб використовувати require()у своїх електронних додатках. (Існує лише новий електронний API, який робить його трохи чистішим у версії 7).
Я написав детальне пояснення / рішення у github, використовуючи найновіший електронний apis того, як ви require()щось можете , але коротко тут поясню, чому слід дотримуватися підходу, використовуючи сценарій попереднього завантаження, contextBridge та ipc.
Проблема
Додатки Electron чудові, тому що ми можемо використовувати node, але ця сила - це двосічний меч. Якщо ми не будемо обережні, ми надаємо комусь доступ до node через наш додаток, а з node поганий актор може пошкодити вашу машину або видалити файли операційної системи (серед іншого, я думаю).
Як зазначив @raddevus у коментарі, це необхідно під час завантаження віддаленого вмісту. Якщо ваш електронний додаток повністю офлайн / локальний , ви, мабуть, у порядку, просто ввімкнувши nodeIntegration:true. Однак я все-таки вирішив би продовжувати nodeIntegration:falseдіяти як захист для випадкових / зловмисних користувачів, які використовують ваш додаток, і запобігати взаємодії будь-якого можливого шкідливого програмного забезпечення, яке коли-небудь може бути встановлено на вашій машині, з вашим електронним додатком та використання nodeIntegration:trueвектора атаки (неймовірно рідко , але може статися)!
Як виглядає проблема
Ця проблема проявляється, коли ви (будь-який із наведених нижче):
- Чи були
nodeIntegration:trueвключений
- Використовуйте
remoteмодуль
Усі ці проблеми дають безперебійний доступ до вузла з вашого процесу візуалізації. Якщо ваш процес візуалізації коли-небудь викрадений, ви можете вважати, що все втрачено.
Яке наше рішення
Рішення полягає в тому, щоб не надати рендерингу прямий доступ до вузла (тобто. require()), А надати нашому головному процесу електрон доступ requireі щоразу, коли наш процес рендерингу потрібно використовувати require, маршал запитує основний процес.
Це працює в останніх версіях (7+) Electron на стороні візуалізації, ми встановлюємо прив'язки ipcRenderer , а на головній стороні - прив'язки ipcMain . У прив'язках ipcMain ми встановлюємо методи прослуховування, які використовують ми модулі require(). Це добре і добре, тому що наш основний процес може requireвсе, що хоче.
Ми використовуємо contextBridge для передачі прив'язок ipcRenderer до нашого коду програми (для використання), і тому, коли нашій програмі потрібно використовувати requireмодулі d в основному, вона надсилає повідомлення через IPC (міжпроцес-зв'язок), і основний процес запускається якийсь код, і ми потім відправляємо повідомлення з результатом.
Орієнтовно , ось що ви хочете зробити.
main.js
const {
app,
BrowserWindow,
ipcMain
} = require("electron");
const path = require("path");
const fs = require("fs");
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
async function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // is default value after Electron v5
contextIsolation: true, // protect against prototype pollution
enableRemoteModule: false, // turn off remote
preload: path.join(__dirname, "preload.js") // use a preload script
}
});
// Load app
win.loadFile(path.join(__dirname, "dist/index.html"));
// rest of code..
}
app.on("ready", createWindow);
ipcMain.on("toMain", (event, args) => {
fs.readFile("path/to/file", (error, data) => {
// Do something with file contents
// Send result back to renderer process
win.webContents.send("fromMain", responseObj);
});
});
preload.js
const {
contextBridge,
ipcRenderer
} = require("electron");
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"api", {
send: (channel, data) => {
// whitelist channels
let validChannels = ["toMain"];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receive: (channel, func) => {
let validChannels = ["fromMain"];
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
}
);
index.html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8"/>
<title>Title</title>
</head>
<body>
<script>
window.api.receive("fromMain", (data) => {
console.log(`Received ${data} from main process`);
});
window.api.send("toMain", "some data");
</script>
</body>
</html>
Відмова від відповідальності
Я автор secure-electron-templateбезпечного шаблону для створення електронних додатків. Я дбаю про цю тему і працюю над цим вже кілька тижнів (на даний момент).