ইলেক্ট্রন প্রয়োজন () সংজ্ঞায়িত করা হয় না

Question 1

আমি আমার নিজের উদ্দেশ্যে একটি ইলেক্ট্রন অ্যাপ তৈরি করছি। আমার সমস্যাটি হ'ল যখন আমি আমার HTML পৃষ্ঠার অভ্যন্তরে নোড ফাংশন ব্যবহার করি তখন এটির একটি ত্রুটি নিক্ষেপ করে:

'প্রয়োজনীয় ()' সংজ্ঞায়িত করা হয় না।

আমার সমস্ত HTML পৃষ্ঠায় নোড কার্যকারিতা ব্যবহার করার কোনও উপায় আছে? যদি এটি সম্ভব হয় তবে দয়া করে এটি কীভাবে করবেন বা একটি লিঙ্ক সরবরাহ করবেন তার একটি উদাহরণ দিন। আমার এইচটিএমএল পৃষ্ঠায় আমি যে পরিবর্তনগুলি ব্যবহার করতে চাইছি তা এখানে রয়েছে:

  var app = require('electron').remote; 
  var dialog = app.dialog;
  var fs = require('fs');

এবং ইলেক্ট্রনের অভ্যন্তরে আমার সমস্ত এইচটিএমএল উইন্ডোগুলিতে আমি এই মানগুলি ব্যবহার করছি।

Question 2

সংস্করণ 5 হিসাবে, ডিফল্টটি nodeIntegrationসত্য থেকে মিথ্যাতে পরিবর্তিত হয়। ব্রাউজার উইন্ডোটি তৈরি করার সময় আপনি এটি সক্ষম করতে পারেন:

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});

Question 3

সুরক্ষার কারণে, nodeIntegration: falseনোড / ইলেক্ট্রন এপিআই থেকে উইন্ডো ভেরিয়েবলের মাধ্যমে রেন্ডার প্রক্রিয়া (দেখুন) এর জন্য আপনার যা প্রয়োজন তা প্রকাশ করার জন্য আপনার একটি প্রিললোড স্ক্রিপ্ট রাখা এবং ব্যবহার করা উচিত । থেকে ইলেকট্রন ডক্স :

প্রিললোড স্ক্রিপ্টগুলিতে requireএবং অন্যান্য নোড.জেএস বৈশিষ্ট্যগুলিতে অ্যাক্সেস থাকা অবিরত রয়েছে

উদাহরণ

main.js

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(app.getAppPath(), 'preload.js')
  }
})

preload.js

const { remote } = require('electron');

let currWindow = remote.BrowserWindow.getFocusedWindow();

window.closeCurrentWindow = function(){
  currWindow.close();
}

renderer.js

let closebtn = document.getElementById('closebtn');

closebtn.addEventListener('click', (e) => {
  e.preventDefault();
  window.closeCurrentWindow();
});

Question 4

আমি আশা করি এই উত্তরটি কিছুটা মনোযোগ পেয়েছে, কারণ এখানে বিপুল সংখ্যাগরিষ্ট উত্তরগুলি আপনার ইলেক্ট্রন অ্যাপ্লিকেশনে বৃহত সুরক্ষা গর্ত ছেড়ে দেয় । আসলে এই উত্তরটিrequire() আপনার ইলেক্ট্রন অ্যাপ্লিকেশনগুলিতে ব্যবহার করার জন্য আপনাকে কী করা উচিত তা মূলত is (এখানে কেবলমাত্র একটি নতুন ইলেক্ট্রন এপিআই রয়েছে যা এটি ভি 7 এ কিছুটা পরিষ্কার করে তোলে)।

আপনি কীভাবে কিছু করতে পারেন তার সর্বাধিক বর্তমান ইলেকট্রন এপিএস ব্যবহার করে আমি গিথুবে একটি বিস্তারিত ব্যাখ্যা / সমাধান লিখেছি require(), তবে আমি এখানে সংক্ষেপে ব্যাখ্যা করব কেন আপনার একটি প্রিললোড স্ক্রিপ্ট, কনটেক্সট ব্রিজ এবং আইপিসি ব্যবহার করে কেন একটি পদ্ধতির অনুসরণ করা উচিত।

সমস্যাটি

ইলেক্ট্রন অ্যাপ্লিকেশন দুর্দান্ত কারণ আমরা নোড ব্যবহার করতে পারি তবে এই শক্তিটি একটি দ্বি-তরোয়াল তরোয়াল। আমরা যদি সাবধান না হন তবে আমরা কাউকে আমাদের অ্যাপের মাধ্যমে নোডের অ্যাক্সেস দিয়ে থাকি এবং নোডের সাহায্যে একজন খারাপ অভিনেতা আপনার মেশিনকে দূষিত করতে পারে বা আপনার অপারেটিং সিস্টেমের ফাইলগুলি মুছে ফেলতে পারে (অন্যান্য জিনিসগুলির মধ্যে, আমি কল্পনাও করি)।

@Raddevus দ্বারা একটি মন্তব্যে যেমন উত্থাপিত হয়েছে, দূরবর্তী সামগ্রী লোড করার সময় এটি প্রয়োজনীয় । যদি আপনার ইলেক্ট্রন অ্যাপ সম্পূর্ণরূপে অফলাইন / স্থানীয় হয় তবে আপনি সম্ভবত ঠিক চালু করছেন । তবুও আমি আপনার অ্যাপ্লিকেশনটি ব্যবহার করে দুর্ঘটনাজনিত / দূষিত ব্যবহারকারীদের জন্য সুরক্ষার কাজ হিসাবে কাজ করা বেছে নেব এবং আপনার ইলেকট্রন অ্যাপ্লিকেশনটির সাথে ইন্টারঅ্যাক্ট করতে এবং আক্রমণকারী ভেক্টর ব্যবহার থেকে আপনার মেশিনে ইনস্টল হওয়া কোনও সম্ভাব্য ম্যালওয়ারকে আটকাতে পারি (অবিশ্বাস্যভাবে বিরল , কিন্তু ঘটতে পারে)!nodeIntegration:truenodeIntegration:falsenodeIntegration: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, বৈদ্যুতিন অ্যাপ্লিকেশনগুলি তৈরির জন্য একটি সুরক্ষিত টেম্পলেট। আমি এই বিষয়টির বিষয়ে যত্নশীল, এবং কয়েক সপ্তাহ ধরে (সময়ের এই সময়ে) এটি নিয়ে কাজ করছি।

Question 5

nodeIntegration: falseব্রাউজার উইন্ডো সূচনা করার সময় আপনি কী ব্যবহার করছেন ? যদি তা হয় তবে এটি সেট করুন true(ডিফল্ট মান হয় true)।

এবং আপনার বাহ্যিক স্ক্রিপ্টগুলি এইচটিএমএলে অন্তর্ভুক্ত করুন (যেমন নয় <script> src="./index.js" </script>):

<script>
   require('./index.js')
</script>

Question 6

প্রথমে, @ সাথিরুমেশ সমাধান আপনার সুরক্ষা ইস্যুতে ইলেক্ট্রন অ্যাপ্লিকেশনটি ছাড়বে। কল্পনা করুন যে আপনার অ্যাপটিতে কিছু অতিরিক্ত বৈশিষ্ট্য যুক্ত করা হচ্ছে messenger.com, উদাহরণস্বরূপ সরঞ্জামদণ্ডের আইকনটি যখন আপনার অপঠিত বার্তা রয়েছে তখন পাল্টে বা জ্বলতে থাকবে। সুতরাং আপনার main.jsফাইলে আপনি নতুন ব্রাউজার উইন্ডোটি তৈরি করেন (লক্ষ্য করুন আমি ইচ্ছাকৃতভাবে ম্যাসেঞ্জার ডট কমকে ভুল বানান):

app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
    mainWindow.loadURL(`https://messengre.com`);
});

যদি messengre.comকোনও দূষিত ওয়েবসাইট হয় তবে তা আপনার কম্পিউটারের ক্ষতি করতে চায়। আপনি যদি সেট করেন nodeIntegration: trueএই সাইটটিতে আপনার স্থানীয় ফাইল সিস্টেমে অ্যাক্সেস রয়েছে এবং এটি কার্যকর করতে পারে:

require('child_process').exec('rm -r ~/');

এবং আপনার হোম ডিরেক্টরি চলে গেছে।

সমাধান
সমস্ত কিছুর পরিবর্তে আপনার যা প্রয়োজন তা প্রকাশ করুন। requireবিবৃতি সহ জাভাস্ক্রিপ্ট কোড প্রিলোড করে এটি অর্জন করা হয়েছে।

// main.js
app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            preload: `${__dirname}/preload.js`
        }
    });
    mainWindow.loadURL(`https://messengre.com`);
});

// preload.js
window.ipcRenderer = require('electron').ipcRenderer;

// index.html
<script>
    window.ipcRenderer.send('channel', data);
</script>

এখন ভয়াবহ messengre.comআপনার পুরো ফাইল সিস্টেমটি মুছতে পারে না।

Question 7

আমি যা করতে চেয়েছিলাম তা হল আমার এইচটিএমএল পৃষ্ঠায় একটি জেএস ফাইলের প্রয়োজন যা আমি অনুসরণ করছিলাম সেই টিউটোরিয়ালটির কারণে। যাইহোক, আমি দূরবর্তী মডিউলগুলি ব্যবহার করার ইচ্ছা করি যাতে সুরক্ষা ছিল সর্বোচ্চ m আমি মাইকেলের উত্তরটি সেখানেই সংশোধন করেছি তাই আমি পোস্ট করছি, নিখুঁতভাবে যারা আমার মতো 'প্রয়োজনীয়' সুরক্ষিত বিকল্পের সন্ধানে ঘন্টা ব্যয় করেছেন। কোডটি যদি ভুল হয় তবে নির্দ্বিধায় এটিকে নির্দেশ করুন।

main.js

const electron = require('electron');
const app=electron.app;
const BrowserWindow=electron.BrowserWindow;
const ipcMain=electron.ipcMain;

const path=require('path');
const url=require('url');

let win;

function createWindow(){
    win=new BrowserWindow({
        webPreferences:{
            contextIsolation: true,
            preload: path.join(__dirname, "preload.js")
        }
    });
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }));

    win.on('close', function(){
        win=null
    });
}

app.on('ready', createWindow);

preload.js

const electron=require('electron');
const contextBridge=electron.contextBridge;

contextBridge.exposeInMainWorld(
    "api", {
        loadscript(filename){
            require(filename);
        }
    }
);

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World App</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <button id="btn">Click</button>
    </body>
    <script>
        window.api.loadscript('./index.js');
    </script>
</html>

index.js

const btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('button clicked');
});

এটি এখনও সুরক্ষার ঝুঁকি উপস্থাপন করে কিনা তা জানতে আমি বিশেষভাবে আগ্রহী। ধন্যবাদ

Question 8

অবশেষে, আমি এটি কার্যকর করে দিয়েছি your এই কোডটি আপনার এইচটিএমএল নথি স্ক্রিপ্ট উপাদানটিতে যুক্ত করুন।

দেরীতে জবাব দেওয়ার জন্য দুঃখিত। আমি এই জিনিসটি করতে নীচের কোডটি ব্যবহার করি।

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;

এবং ব্যবহার nodeRequireনা করে ব্যবহার করুন require।

এটি ফাইন কাজ করে।

Question 9

আপনি সক্ষম হবে nodeIntegration মধ্যে webPreferences এটা ব্যবহার করতে। নিচে দেখ,

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true
  }
})
win.show()

ইলেক্ট্রন 5.0 (ভাণ্ডার সম্পর্কিত ঘোষণা ) এ একটি ব্রেকিং এপি পরিবর্তন হয়েছিল । সাম্প্রতিক সংস্করণে nodeIntegration ডিফল্ট সেট করে মিথ্যা ।

ডকস ইলেক্ট্রনের নোড.জেএস সংহতকরণের কারণে, ডিওএম-তে মডিউল, রফতানি, প্রয়োজনীয়তার মতো কিছু অতিরিক্ত চিহ্ন প্রবেশ করানো হয়েছে। এটি কিছু লাইব্রেরির জন্য সমস্যা সৃষ্টি করে যেহেতু তারা একই নামের সাথে চিহ্নগুলি sertোকাতে চায়। এটি সমাধান করার জন্য, আপনি ইলেকট্রনে নোড সংহতকরণ বন্ধ করতে পারেন:

তবে আপনি যদি নোড.জেএস এবং ইলেক্ট্রন এপিআই ব্যবহার করার ক্ষমতা রাখতে চান তবে অন্যান্য লাইব্রেরিগুলি অন্তর্ভুক্ত করার আগে আপনাকে পৃষ্ঠাতে চিহ্নগুলির নাম পরিবর্তন করতে হবে:

<head>
    <script>
        window.nodeRequire = require;
        delete window.require;
        delete window.exports;
        delete window.module;
    </script>
    <script type="text/javascript" src="jquery.js"></script>
</head>