設定 - nodeIntegration

概要

RendererプロセスでElectronのモジュールを使用する手順を記載する。

XSS対策のため、nodeIntegrationで無効にすることで、RendererプロセスからNode.jsの機能へのアクセスを制限することができる。
そのため、Rendererプロセスでrequire関数が呼ぶことができず、以下のようなエラーが出力される。

Uncaught ReferenceError: require is not defined

詳細においては、以下に示すElectronの公式Webサイトを参照すること。
Do not enable Node.js Integration for Remote Content

方法

以下に示す通り、対応策は2つある。

• ノードインテグレーションを有効にする。
• preloadを使用する。

ノードインテグレーションを有効にする

main.jsファイルのBrowserWindowにおいて、webPreferencesのnodeIntegrationオプションをtrueにする。

 // main.jsファイル
 
 // ...
 mainWindow = new BrowserWindow(
 {
    width: 1000,
    height: 800,
    webPreferences: {nodeIntegration: true},  // 追記
 });
 // ...

ただし、ElectronでXSS攻撃を受ける場合、PCのデータも操作される危険性もあるため、falseが安全である。
ローカルで完結するようなElectronソフトウェアの場合、trueにしても良いが、
DBからユーザが入力したテキストを表示する等、リモートコンテンツを表示する機能がある場合、falseのままが良い。

preloadを使用する

ノードインテグレーションを有効にしない場合、preloadを使用する。

preloadとは、他のスクリプトが実行される前にロードするスクリプトを指定するオプションであり、
指定したスクリプト内では、Node.jsのAPIにアクセスできる。

そのため、以下のように、windowオブジェクト等に使用するモジュールをセットできる。

 // main.jsファイル
 
 new BrowserWindow(
 {
    width: 1200,
    height: 800,
    webPreferences: {nodeIntegration: false, preload: `${__dirname}/<JavaScriptファイル名>.js`}  // 読み込むjsファイルのパス
 });

 // <JavaScriptファイル名>.jsファイル
 
 window.ipcRenderer = require('electron').ipcRenderer;
 window.remote = require('electron').remote;

このように記述した後、Rendererプロセスでwindow.ipcRendererを呼び出す。