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

Electron Webviewのセキュリティで注意すべきこと

More than 1 year has passed since last update.

こんにちは。プレイドのRyosukeです。現在、明治大学総合数理学部現象数理学科3年生で統計学系の研究室にいます。

今回は、Electron Webviewのセキュリティ面で注意すべきことを書きます。

Electron

Electronとはweb techでクロスプラットフォームデスクトップアプリを作ることができるものです。どういうアプリがElectronで作られてるのかはAwesome electronを御覧ください。

Electronは、nodejsをバックで動かし、chromiumブラウザ上でウェブページを表示することでデスクトップアプリを表現しています。Electronでは、nodejs側のjsプロセス(メインプロセス)とブラウザ側のjsプロセス(レンダラープロセス)は別になるため、プロセス間の通信手段としてipc (internal procedure call?)を使用します。

また、ブラウザ側では<webview>というhtmlタグを使用することができます。webviewとはiframeのように別のwebページをurlを指定することで表示するものです。ただ、iframeと違う部分があり、それは、webview内のjsプロセスはブラウザのjsプロセスとは別のインスタンスをもつということです。もちろん、webview内のjsプロセスはブラウザと同様にレンダラープロセスなので、メインプロセスとの通信手段を持ちます。ここに、セキュリティ面で注意すべきことがあります。

Webviewのセキュリティ

webviewのレンダラープロセスとメインプロセス間で通信をする必要がないのであれば問題はありませんが、それをしたかったり、webviewのレンダラープロセスでnodejsのAPIをrequireして使用したい場合はセキュリティ面で注意が必要です。

安全じゃない方法 - nodeintegration

<webview>のアトリビュートにはnodeintegrationというものがあります。これは、デフォルトではfalseになっていますが、明示的に指定することで、webview内でnodejsのrequireやprocessといった低レベルなシステムへのアクセスが許されます。webviewとメインプロセス間の通信にはipcをrequireする必要があるので、それをしたいのであれば、webviewにnodeintegrationをつけるのが手っ取り早いです。

しかし、XSSの危険性があり悪意のあるサイトが色々と悪さをできてしまいます。ですので、必ずnodeintegrationfalseになっていることを確認してください。

安全な方法 - preload

では、どうすればwebview内でipcや他のapiを使うことができるのでしょう。実はpreloadアトリビュートにjsファイルパスを指定することで、そのjsをpreloadすることができます。また、そのpreloadされるjsには制限が無いのでrequireをすることができますし、preload内のスコープはセキュリティ上、webview内のスコープとは別になるので、ある程度は安心できます。このpreloadを上手く使用することで、nodeintegrationがfalseなwebview内でも使用したいnodejs apiを使用できます。

renderer.html
<webview preload="PATH/TO/PREALOD_JS" src="URL">
preload.js
const {ipcRenderer} = require('electron')

global.sendToHost = (message) => {
  ipcRenderer.sendToHost(message)
}

他に読むべきもの

Why do not you register as a user and use Qiita more conveniently?
  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
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