Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Electron で nodeIntegration: false にする方法

More than 1 year has passed since last update.

公式では、未来的に nodeIntegration: false にすることを推奨しています

理由は、レンダラプロセスで Node.js が実行できてしまうと、XSS発生時に脆弱性が増すためです

例えば、fs モジュールを使ってあなたのローカルファイルを取得して、どこかに送信することも可能ですし、ファイルを全て消し去ることもできてしまいます

nodeIntegration: false にする方法

Electronの設定

メインプロセスで nodeIntegration: false にする

 mainWindow = new BrowserWindow({
    ...
    webPreferences: {
      // レンダラープロセスで Node.js 使えないようにする (XSS対策)
      nodeIntegration: false,
      // preloadスクリプトを, app.htmlとは別のJavaScriptコンテキストで実行するかどうか
      // false にしないと、window object を共有できない
      contextIsolation: false,
      // process や Electron を windowオブジェクト に保存する処理。フルパスの指定が必要
      preload: path.join(__dirname, '/preload.js'),
    },
    ...
  });

preload.js を用意

/**
 * preload.js
 * process や Electron を windowオブジェクト に保存する処理
 */
const electron = require('electron');

process.once('loaded', () => {
  // console.log('---- preload.js loaded ----');
  global.process = process;
  global.electron = electron;
  global.module = module;
});

global に持たせたものは、レンダラプロセスにて、window オブジェクトに入るので

require('electron')window.electron に書き換える

Webpackの設定

target: 'web' にする

もし、従来の方式である target:'electron-renderer' にしていた場合は、 bundle.js 内で require するコードが生成されるので、

Uncaught ReferenceError: require is not defined エラーが発生する

  entry: [
    ...
  ],

  output: {
    ...
  },

  /**
   * https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works
   */
  target: 'web',

umamichi
Programmer Guitarist. YouTubeチャンネル登録お待ちしてます🦄
http://umamichi.com
team-lab
最新のテクノロジーを活用したシステムやデジタルコンテンツの開発を行うウルトラテクノロジスト集団
https://www.team-lab.com
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