Electron で preload.js を正しく利用する: 包括的なガイド

Question

<p>次のように <code>renderer</code> プロセスでノード モジュール (この場合は <code>fs</code>) を使用してみました。 </p> <pre class="brush:php;toolbar:false;">// main_window.js const fs = require('fs') 関数アクション() { コンソール.ログ(fs) }</pre> <p>^{注: <code>main_window</code> のボタンを押すと、<code>action</code> 関数が呼び出されます。}</p> <p>しかし、これではエラーが発生します: </p> <pre class="brush:php;toolbar:false;">Uncaught ReferenceError: require が定義されていません main_window.js:1</pre> で <p>この受け入れられた回答が示すように、<code>main_window</code> を初期化するときにこれらの行を <code>main.js</code> に追加することで、この問題を解決できました。 /p> <pre class="brush:php;toolbar:false;">// main.js main_window = 新しいブラウザウィンドウ({ 幅: 650、 高さ: 550、 ウェブ設定: { ノード統合: true } })</pre> ただし、ドキュメントによると、これはベスト プラクティスではなく、<code>preload.js</code> ファイルを作成し、その中にこれらの Node モジュールをロードしてから、すべての <code>renderer</ にロードする必要があります。コード＞プロセス内で使用します。このように:<p><br /></p> <p><code>main.js</code>:</p> <pre class="brush:php;toolbar:false;">main_window = new BrowserWindow({ 幅: 650、 高さ: 550、 ウェブ設定: { プリロード: path.join(app.getAppPath(), 'preload.js') } })</pre> <p><code>preload.js</code>:</p> <pre class="brush:php;toolbar:false;">const fs = require('fs') window.test = function() { コンソール.ログ(fs) }</pre> <p><code>main_window.js</code>:</p> <pre class="brush:php;toolbar:false;">function action() { window.test() }</pre> <p>そしてそれはうまくいきました! </p>

---

<p>ここで私の質問は、<code>renderer</code> プロセスのコードのほとんどを <code>preload.js</code> に記述する必要があるというのは直観に反していませんか? <code>preload.js</code> 内の Node モジュールにのみアクセスできます)、各 <code>renderer.js</code> ファイル内の関数を呼び出すだけです (ここでは、<code>main_window. js</code>)?ここで何が理解できないのでしょうか? </p>

Answer 1

この例を考えてみましょう

公式ドキュメントのすべてをコード内のどこにでも直接実装できるわけではありません。環境とプロセスを簡潔に理解する必要があります。

＃＃＃説明する＃＃＃ ＃＃＃主要＃＃＃ API はオペレーティング システム (低レベル) に近いものです。これらには、ファイル システム、オペレーティング システム ベースの通知ポップアップ、タスク バーなどが含まれます。これらは、Electron のコア API と Node.js の組み合わせを通じて実装されます。 最近の 付録 Electron v12 変更ログ DOM やフロントエンド JavaScript (上級) などの最新の Web ブラウザー用の API。これは Chromium を通じて実現されます。 コンテキストの分離とノードの統合

環境/プロセス
	プリロード
は、メイン環境で利用可能な強力な API の漏洩を防ぐためのものです。詳細については、	および Issue#23506 を参照してください。 レンダラー

シーンコンテキスト分離 ＃＃＃述べる＃＃＃ ＃＃＃＃＃＃偽物＃＃＃＃＃＃ ＃＃＃＃＃＃偽物＃＃＃＃＃＃ プリロードは必要ありません。 Node.js は Main では利用できますが、Renderer では利用できません。 プリロードが必要です。 Node.js はメインロードとプリロードでは利用できますが、レンダラーでは利用できません。 ＃＃＃デフォルト＃＃＃。 ＃＃＃推薦する＃＃＃。

	ノード統合		#A
B	＃＃＃＃＃＃偽物＃＃＃＃＃＃ ＃＃＃＃＃＃真実＃＃＃＃＃＃ プリロードは必要ありません。 Node.js は Main と Renderer で利用できます。	C	＃＃＃＃＃＃真実＃＃＃＃＃＃ ＃＃＃＃＃＃偽物＃＃＃＃＃＃
D	＃＃＃＃＃＃真実＃＃＃＃＃＃ ＃＃＃＃＃＃真実＃＃＃＃＃＃ プリロードが必要です。 Node.js はメイン、プリロード、レンダラーで利用できます。	プリロードを正しく使用するにはどうすればよいですか? メイン プロセスとレンダラー プロセスが通信するには、Electron のプロセス間通信 (IPC) を使用する必要があります。 main プロセスで、次を使用します。 BrowserWindow.webContents.send() code> レンダラーにメッセージを送信するメソッド ipcMain.handle() レンダラからメッセージを受信するメソッド プレロード プロセスで、 ユーザー定義エンドポイント をレンダラー プロセスに公開します。 レンダラ プロセスでは、パブリック ユーザー定義エンドポイント を使用して次のことを行います。 メインにメッセージを送信 メインからメッセージを受信する 実装例 ＃＃＃＃＃＃主要＃＃＃＃＃＃ リーリー プリロード リーリー レンダラー リーリー Promise を使用してみてはいかがでしょうか? 可能な限り同じプロセス/環境へのコミットメントを維持します。 main での約束はメインに残すべきです。 レンダラー に対するコミットメントはレンダラーにも残る必要があります。メインプログラムからプリローダー、レンダラーにジャンプすることを約束しないでください。 ＃＃＃ファイルシステム＃＃＃ ビジネス ロジックのほとんどは依然としてメインまたはレンダラ側にあるはずですが、プリロード状態にあってはなりません。これは、プリロードがほぼ独占的にメディアとして存在するためです。プリロードは非常に小さくする必要があります。 OPの場合、 fs はマスター側で実装する必要があります。

Answer 2

2022年編集

---

私は、Electron の歴史 (Electron バージョンでセキュリティがどのように変化したか) と、新しいアプリケーションでプリロード ファイルを正しく使用するために Electron 開発者が実行できるその他のセキュリティ上の考慮事項について、より大きな記事 を公開しました。プログラム。

2020年編集

---

別のユーザーが質問したので、以下に私の答えを説明させてください。

Electron で

preload.js を使用する正しい方法は、アプリが 必要とする可能性があるモジュールの周囲にホワイトリスト ラッパーを公開することです。

セキュリティの観点から、

preload.js の require で公開されたもの、または require 呼び出しを介して取得されたものはすべて危険です (私のコメント## を参照してください) # 理由については詳しく説明します)。これは、アプリケーションがリモート コンテンツをロードする場合 (多くのアプリケーションがロードします) に特に当てはまります。 これを正しく行うには、以下で詳しく説明するように、

BrowserWindow に新しいウィンドウを作成する必要があります。これらのオプションを設定すると、Electron アプリケーションは IPC (プロセス間通信) 経由で通信するようになり、2 つの環境が相互に分離されます。このようにアプリケーションを設定すると、クライアントによって改ざんされることなく、バックエンド内の require モジュールである可能性のあるものを検証できます。 以下に、私が話している内容と、それがアプリでどのように表示されるかを示す短い例を示します。これを初めて使用する場合は、

secure-electron-template (私が作成者です) を使用して、Electron アプリケーションを構築するときに最初からこれらすべてのセキュリティのベスト プラクティスを組み込むことをお勧めします。 。

このページ

には、preload.js を使用して安全なアプリケーションを作成するときに必要なアーキテクチャに関する優れた情報も含まれています。

---

main.js

リーリー

preload.js

リーリー

index.html

リーリー