設定 - nodeIntegrationのソースを表示

== 概要 ==
RendererプロセスでElectronのモジュールを使用する手順を記載する。<br>
<br>
XSS対策のため、nodeIntegrationで無効にすることで、RendererプロセスからNode.jsの機能へのアクセスを制限することができる。<br>
そのため、Rendererプロセスでrequire関数が呼ぶことができず、以下のようなエラーが出力される。<br>
 Uncaught ReferenceError: require is not defined
<br>
詳細においては、以下に示すElectronの公式Webサイトを参照すること。<br>
[https://electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content Do not enable Node.js Integration for Remote Content]<br>
<br><br>

== 方法 ==
以下に示す通り、対応策は2つある。<br>
* ノードインテグレーションを有効にする。
* preloadを使用する。
<br>
==== ノードインテグレーションを有効にする ====
main.jsファイルのBrowserWindowにおいて、webPreferencesのnodeIntegrationオプションをtrueにする。<br>
 <syntaxhighlight lang="javascript">
 // main.jsファイル
 
 // ...
 mainWindow = new BrowserWindow(
 {
    width: 1000,
    height: 800,
    webPreferences: {nodeIntegration: true},  // 追記
 });
 // ...
 </syntaxhighlight>
<br>
ただし、ElectronでXSS攻撃を受ける場合、PCのデータも操作される危険性もあるため、falseが安全である。<br>
ローカルで完結するようなElectronソフトウェアの場合、trueにしても良いが、<br>
DBからユーザが入力したテキストを表示する等、リモートコンテンツを表示する機能がある場合、falseのままが良い。<br>
<br>
==== preloadを使用する ====
ノードインテグレーションを有効にしない場合、preloadを使用する。<br>
<br>
preloadとは、他のスクリプトが実行される前にロードするスクリプトを指定するオプションであり、<br>
指定したスクリプト内では、Node.jsのAPIにアクセスできる。<br>
<br>
そのため、以下のように、windowオブジェクト等に使用するモジュールをセットできる。<br>
 <syntaxhighlight lang="javascript">
 // main.jsファイル
 
 new BrowserWindow(
 {
    width: 1200,
    height: 800,
    webPreferences: {nodeIntegration: false, preload: `${__dirname}/<JavaScriptファイル名>.js`}  // 読み込むjsファイルのパス
 });
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="javascript">
 // <JavaScriptファイル名>.jsファイル
 
 window.ipcRenderer = require('electron').ipcRenderer;
 window.remote = require('electron').remote;
 </syntaxhighlight>
<br>
このように記述した後、Rendererプロセスでwindow.ipcRendererを呼び出す。<br>
<br><br>

__FORCETOC__
[[カテゴリ:Electron]]