Electronをセキュアな設定の状態で、jsのrequierを行う

Electronの基本おさらい

Electronは、メインプロセスと、そこから読みだされwebページ画面として動くレンダラープロセスの2つの領域が存在します。
そのうち、表示を行うレンダラープロセスはセキュリティを厳しくすることが推奨されています。

Electronのセキュリティ設定

Electronのドキュメント見ると推奨のセキュリティ設定が上げられています。
https://www.electronjs.org/docs/tutorial/security#reporting-security-issues

しかし、デフォルトとのセキュリティ要件だとレンダラー領域でrequierもできずnodeのライブラリを読めません。
もちろん、require('electron')もできないのでレンダラープロセスとメインプロセスとの通信もできません。

requireを渡す

preloadを経由することでrequireを渡すことができます

electronの仕様で、preload内でcontextBridgeを実行することでレンダリングプロセスのjsに紐づきます。
"windows.xx"のxxの部分に紐付けることができます。

requireを使う例です。

メインプロセス

const path = require("path");

//レンダラー読み出し部分
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),//<--ファイルを指定。ここでは同一階層にあるpreload.js
    contextIsolation: true,//<--requireを渡すために必要な設定
  }
})

preload.jsの例

preload.js

const { contextBridge, ipcRenderer} = require("electron")
const fs = require('fs')

contextBridge.exposeInMainWorld(
  "requires", {// <-- ここでつけた名前でひもづく。ここでは"window.requires"
    json5 : require("json5"),//npmで取得したライブラリを渡す時の例。レンダラーにそのまま渡す

    ipcRenderer : ipcRenderer,//ipcRendererも渡せるのでやり取りできる

    getSetting :  () => {// fsも読み込める。レンダリングプロセスにそのまま渡さず、functionにしてできることを制限したほうがセキュリアそう。。。
      const setting_path = 'c:/appSetting.json5';
      return fs.existsSync(setting_path) ? fs.readFileSync(setting_path, 'utf8') : '{}'
    }
  }
);

レンダリングプロセス側の読み出し

レンダリングプロセス

const json5 = window.requires.json5;//requireしたライブラリを読み込み

let app_setting_text = window.requires.getSetting();//preload内のファンクション実行

let app_setting = json5.parse( app_setting_text );// 普通にrequireしたように使える
console.log( app_setting );

まとめ

一工夫いるがElectronのセキュリティ設定を緩めずに、requiresを使用できました。