Electron require () n'est pas défini

Je crée une application Electron dans mon propre but. Mon problème est que lorsque j'utilise des fonctions de nœud dans ma page HTML, une erreur de:

'require ()' n'est pas défini.

Existe-t-il un moyen d'utiliser les fonctionnalités de Node dans toutes mes pages HTML? Si cela est possible, veuillez me donner un exemple de la façon de procéder ou fournir un lien. Voici les variables que j'essaie d'utiliser dans ma page HTML:

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

et ce sont les valeurs que j'utilise dans toutes mes fenêtres HTML dans Electron.

À partir de la version 5, la valeur par défaut de est nodeIntegrationpassée de true à false. Vous pouvez l'activer lors de la création de la fenêtre du navigateur:

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

Pour des raisons de sécurité, vous devez conserver nodeIntegration: falseet utiliser un script de préchargement pour exposer exactement ce dont vous avez besoin de l'API Node / Electron au processus de rendu (vue) via la variable window. Extrait de la documentation Electron :

Les scripts de préchargement continuent d'avoir accès à requireet à d'autres fonctionnalités de Node.js

Exemple

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();
});

J'espère que cette réponse retiendra l'attention, car une grande majorité des réponses ici laissent de grandes failles de sécurité dans votre application électronique. En fait, cette réponse est essentiellement ce que vous devriez faire pour l'utiliser require()dans vos applications électroniques. (Il y a juste une nouvelle API électronique qui le rend un peu plus propre dans la v7).

J'ai écrit une explication / solution détaillée dans github en utilisant les API électroniques les plus récentes sur la façon dont vous pouvez require()quelque chose, mais je vais expliquer brièvement ici pourquoi vous devriez suivre une approche utilisant un script de préchargement, contextBridge et ipc.

Le problème

Les applications Electron sont excellentes parce que nous utilisons le nœud, mais ce pouvoir est une épée à double tranchant. Si nous ne faisons pas attention, nous donnons à quelqu'un l'accès au node via notre application, et avec node un mauvais acteur peut corrompre votre machine ou supprimer les fichiers de votre système d'exploitation (entre autres, j'imagine).

Comme indiqué par @raddevus dans un commentaire, cela est nécessaire lors du chargement de contenu distant . Si votre application électronique est entièrement hors ligne / locale , vous pouvez probablement simplement l'allumer nodeIntegration:true. Cependant, je choisirais toujours de continuer nodeIntegration:falseà agir comme une protection pour les utilisateurs accidentels / malveillants utilisant votre application, et d'empêcher tout logiciel malveillant qui pourrait être installé sur votre machine d'interagir avec votre application électronique et d'utiliser le nodeIntegration:truevecteur d'attaque (incroyablement rare , mais cela pourrait arriver)!

À quoi ressemble le problème

Ce problème se manifeste lorsque vous (l'un des éléments ci-dessous):

1. Ont nodeIntegration:trueactivé
2. Utilisez le remotemodule

Tous ces problèmes donnent un accès ininterrompu au nœud à partir de votre processus de rendu. Si votre processus de rendu est piraté, vous pouvez considérer que tout est perdu.

Quelle est notre solution

La solution est de ne pas donner au moteur de rendu un accès direct au nœud (c'est-à-dire require()), mais de donner à notre processus électronique l'accès au processus principal require, et à chaque fois que notre processus de rendu doit utiliser require, rassembler une requête vers le processus principal.

La façon dont cela fonctionne dans les dernières versions (7+) d'Electron est du côté du rendu, nous configurons les liaisons ipcRenderer , et du côté principal, nous configurons les liaisons ipcMain . Dans les liaisons ipcMain, nous mettons en place des méthodes d'écoute qui utilisent les modules we require(). C'est très bien parce que notre processus principal peut requiretout ce qu'il veut.

Nous utilisons le contextBridge pour transmettre les liaisons ipcRenderer au code de notre application (à utiliser), et donc, lorsque notre application doit utiliser les requiremodules d dans main, elle envoie un message via IPC (communication inter-processus) et le processus principal s'exécute un peu de code, puis nous renvoyons un message avec notre résultat.

En gros , voici ce que vous voulez faire.

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>

Avertissement

Je suis l'auteur d' secure-electron-templateun modèle sécurisé pour créer des applications électroniques. Je me soucie de ce sujet et j'y travaille depuis quelques semaines (en ce moment).

Utilisez-vous nodeIntegration: falsependant l'initialisation de BrowserWindow? Si tel est le cas, définissez-le sur true(la valeur par défaut est true).

Et incluez vos scripts externes dans le HTML comme ceci (pas comme <script> src="./index.js" </script>):

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

Tout d'abord, la solution @Sathiraumesh laisse votre application électronique avec un énorme problème de sécurité. Imaginez que votre application ajoute des fonctionnalités supplémentaires messenger.com, par exemple, l'icône de la barre d'outils change ou clignote lorsque vous avez un message non lu. Donc, dans votre main.jsfichier, vous créez un nouveau BrowserWindow comme ceci (notez que j'ai intentionnellement mal orthographié messenger.com):

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

Et si messengre.comc'est un site Web malveillant qui veut nuire à votre ordinateur. Si vous définissez nodeIntegration: truece site a accès à votre système de fichiers local et pouvez l'exécuter:

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

Et votre répertoire personnel a disparu.

Solution
N'exposez que ce dont vous avez besoin, au lieu de tout. Ceci est réalisé en préchargeant le code javascript avec des requireinstructions.

// 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>

Maintenant terrible messengre.comne peut pas supprimer tout votre système de fichiers.

Enfin, je l'ai fait fonctionner.Ajoutez ce code à votre document HTML Script Element.

Désolé pour la réponse tardive, j'utilise le code ci-dessous pour faire cette chose.

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

Et utilisez nodeRequireau lieu d'utiliser require.

Ça fonctionne bien.

Vous devez activer le nodeIntegration dans webPreferences pour l'utiliser. voir ci-dessous,

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

Il y a eu un changement de rupture de l'API dans electron 5.0 ( Annonce sur le référentiel ). Dans les versions récentes, nodeIntegration est défini par défaut sur false .

Docs En raison de l'intégration Node.js d'Electron, il y a quelques symboles supplémentaires insérés dans le DOM comme module, exports, require. Cela pose des problèmes pour certaines bibliothèques car elles veulent insérer les symboles avec les mêmes noms.Pour résoudre cela, vous pouvez désactiver l'intégration des nœuds dans Electron:

Mais si vous souhaitez conserver la possibilité d'utiliser les API Node.js et Electron, vous devez renommer les symboles dans la page avant d'inclure d'autres bibliothèques:

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