Help us understand the problem. What is going on with this article?

【Electron】nodeIntegration: falseのまま、RendererプロセスでElectronのモジュールを使用する

React + Redux + Electronでデスクトップアプリを開発していた際に、Rendererプロセス(React)の以下のコードでUncaught ReferenceError: require is not defined が出て詰まってしまいました。

import { ipcRenderer, remote } from 'electron';

原因

ノードインテグレーションが無効だから。

Electronのバージョン5系では、nodeIntegrationのデフォルト値falseなっていたからでした。

nodeIntegrationとは?

XSS対策のためのオプションで無効(false)にすることで、RendererプロセスからNode.jsの機能へのアクセスを制限することができます。

そのため、Rendererプロセス(React)でrequire関数が呼べずにUncaught ReferenceError: require is not definedが出てしまってたようです。

ネットで検索すると、普通にimportできるような記述をみますが、

  • Electronの古いバージョンでの話(昔はデフォルトtrueだったらしい)
  • nodeIntegration: true にしている

のどちらかだと思います。

【参考】
Electron公式ドキュメントDo not enable Node.js Integration for Remote Content

対応策

対応策は2つあります。

  1. ノードインテグレーションを有効にする
  2. preloadを使う

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

オプションをtrueにするだけです。

mainWindow = new BrowserWindow({
  width: 1000,
  height: 800,
  webPreferences: {
    nodeIntegration: true, // ココ
  },
});

有効にして良いの?

ElectronでXSS攻撃を受けた場合、ユーザのPCのデータも操作されてしまう危険もあるので、falseのままにしておいた方が安全です。

ローカルで完結するようなアプリの場合は、true にしても良いと思いますが、
データベースからユーザが入力したテキストを表示するなど、リモートコンテンツを表示する機能がある場合には意識した方が良いでしょう。

2. preloadを使う

ノードインテグレーションを有効にしたくない場合には、preloadを使いましょう。

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

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

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

// 以下preload.jsの内容
window.ipcRenderer = require('electron').ipcRenderer;
window.remote = require('electron').remote;

このようにしたら、あとは、Rendererプロセスでwindow.ipcRendererを呼び出すだけです!!

【参考】

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした