मुझे उम्मीद है कि इस उत्तर पर कुछ ध्यान दिया जाएगा, क्योंकि यहां के अधिकांश उत्तर आपके इलेक्ट्रॉन ऐप में बड़े सुरक्षा छेद छोड़ते हैं । वास्तव में यह उत्तर अनिवार्य रूप से है जो आपको require()
अपने इलेक्ट्रॉन एप्लिकेशन में उपयोग करने के लिए होना चाहिए । (बस एक नया इलेक्ट्रॉन एपीआई है जो इसे v7 में थोड़ा क्लीनर बनाता है)।
मैंने गथूब में एक विस्तृत विवरण / समाधान लिखा है कि आप require()
कुछ कैसे कर सकते हैं, के सबसे वर्तमान इलेक्ट्रॉन एप का उपयोग करते हुए , लेकिन मैं यहां संक्षेप में बताऊंगा कि आपको प्रीलोड लिपि, संदर्भब्रीज और आईपीसी का उपयोग करके दृष्टिकोण का पालन क्यों करना चाहिए।
समस्या
इलेक्ट्रॉन ऐप्स बहुत अच्छे हैं क्योंकि हमें नोड का उपयोग करने के लिए मिलता है, लेकिन यह शक्ति एक दोधारी तलवार है। यदि हम सावधान नहीं हैं, तो हम अपने ऐप के माध्यम से किसी को नोड तक पहुंच प्रदान करते हैं, और नोड के साथ एक बुरा अभिनेता आपकी मशीन को भ्रष्ट कर सकता है या आपकी ऑपरेटिंग सिस्टम फ़ाइलों को हटा सकता है (अन्य बातों के अलावा, मैं कल्पना करता हूं)।
जैसा कि @raddevus द्वारा एक टिप्पणी में लाया गया है, दूरस्थ सामग्री लोड करते समय यह आवश्यक है। यदि आपका इलेक्ट्रॉन ऐप पूरी तरह से ऑफ़लाइन / स्थानीय है , तो आप शायद ठीक हैं बस चालू करें । हालांकि, मैं अभी भी आपके ऐप का उपयोग करने वाले आकस्मिक / दुर्भावनापूर्ण उपयोगकर्ताओं के लिए एक सुरक्षा के रूप में कार्य करने का विकल्प चुनूंगा, और किसी भी संभावित मैलवेयर को रोक सकता हूं जो आपके इलेक्ट्रॉन ऐप के साथ बातचीत करने और हमला वेक्टर (अविश्वसनीय रूप से दुर्लभ) का उपयोग करके कभी भी आपकी मशीन पर स्थापित हो सकता है। , लेकिन हो सकता है)!nodeIntegration:true
nodeIntegration:false
nodeIntegration:true
समस्या क्या दिखती है
यह समस्या तब प्रकट होती है जब आप (नीचे का कोई भी):
- है
nodeIntegration:true
सक्षम
remote
मॉड्यूल का उपयोग करें
ये सभी समस्याएं आपके रेंडरर प्रक्रिया से नोड तक निर्बाध पहुंच प्रदान करती हैं। यदि आपकी रेंडरर प्रक्रिया कभी भी अपहृत है, तो आप विचार कर सकते हैं कि सभी खो गया है।
हमारा समाधान क्या है
समाधान रेंडरर को नोड (यानी। ) तक सीधी पहुंच नहीं देना है require()
, लेकिन हमारे इलेक्ट्रॉन को मुख्य प्रक्रिया तक पहुंच प्रदान करना है require
, और कभी भी हमारी रेंडरर प्रक्रिया का उपयोग करने की आवश्यकता है require
, मुख्य प्रक्रिया के लिए एक अनुरोध को मार्शल करें।
जिस तरह से यह इलेक्ट्रॉन के नवीनतम संस्करणों (7+) में काम करता है वह रेंडरर पक्ष पर है जिसे हमने ipcRenderer बाइंडिंग सेट किया है , और मुख्य तरफ हम ipcMain बाइंडिंग सेट करते हैं। IpcMain बाइंडिंग में हम श्रोता विधियों को सेट करते हैं जो हम मॉड्यूल का उपयोग करते हैं require()
। यह ठीक और ठीक है क्योंकि हमारी मुख्य प्रक्रिया यह require
सब चाहती है।
हम का उपयोग contextBridge हमारे एप्लिकेशन कोड (उपयोग करने के लिए) के लिए ipcRenderer बाइंडिंग पारित करने के लिए, और इसलिए हमारे एप्लिकेशन की जरूरत का उपयोग करने के लिए जब require
मुख्य में घ मॉड्यूल, यह भारतीय दंड संहिता (अंतर-प्रक्रिया-संचार) और मुख्य प्रक्रिया रन के माध्यम से एक संदेश भेजता है कुछ कोड, और हम फिर अपने परिणाम के साथ एक संदेश वापस भेजते हैं।
मोटे तौर पर , यहाँ आप क्या करना चाहते हैं।
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
इलेक्ट्रॉन एप्लिकेशन बनाने के लिए एक सुरक्षित टेम्पलेट का लेखक हूं । मैं इस विषय की परवाह करता हूं, और कुछ हफ्तों से (इस समय इस बिंदु पर) काम कर रहा हूं।