コンテキストの分離
これは何ですか?
コンテキスト分離は、あなたのプレロード
スクリプトと Electron の内部ロジックの両方が、 webContents
でロードしたウェブサイトに対して別のコンテキストで実行されることを保証する機能です。 これは、ウェブサイトが Electron の内部にアクセスできないようにするためのセキュリティを向上させ、プリロードスクリプトがアクセスできる強力な API を防ぐために重要です。
つまり、プリロードスクリプトがアクセスできる window
オブジェクトは、ウェブサイトがアクセスできるオブジェクトとは実際には 異なる オブジェクトであることを意味します。 例えば、コンテキストの分離が有効の場合、プリロードスクリプトで window.hello = 'wave'
を設定してウェブサイトがこれにアクセスしようとしても、window.hello
は undefined になります。
コンテキストの分離は Electron 12 からデフォルトで有効になっており、すべてのアプリケーション で推奨されているセキュリティ設定です。
移行
コンテキストが分離されていない状態で、
window.X = apiObject
を使ってプリロードスクリプトから API を提供していました。 どうすればよいですか?
ビフォー: コンテキストの分離が無効のとき
プリロードスクリプトからレンダラープロセスで読み込まれたウェブサイトに API を公開することは、ごく一般的な使用例です。 コンテキストの分離を無効にすると、プリロードスクリプトは、共通のグローバルな window
オブジェクトをレンダラーと共有することになります。 そして、任意のプロパティをプリロードスクリプトに添付できます。
// コンテキストの分離が無効のプリロード
window.myAPI = {
doAThing: () => {}
}
doAThing()
関数は、レンダラープロセスで直接使用できます。
// レンダラー内から公開された API を使用
window.myAPI.doAThing()
アフター: コンテキストの分離が有効のとき
Electron には、これを楽に行うための専用モジュールがあります。 contextBridge
モジュールは、プリロードスクリプトの分離した コンテキストから、ウェブサイトが実行されているコンテキストに API を 安全に 公開するために使用できます。 このAPIは以前と同様に window.myAPI
のウェブサイトからもアクセスできます。
// コンテキストの分離が有効のプリロード
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
doAThing: () => {}
})
// レンダラー内から公開された API を使用
window.myAPI.doAThing()
上記の contextBridge
ドキュメントを読んで、その制限を完全に理解してください。 例えば、カスタムプロトタイプやシンボルはブリッジで送信できません。