Electron-Vuejs-Vuetifyプロジェクトを このVuetifyのボイラープレート から作成しました
コンソールにこの警告が表示されています:
Electron Security Warning
This renderer process has Node.js integration enabled and
attempted to load remote content. This exposes users of this app to severe security risks.
For more information and help, consult https://electronjs.org/docs/tutorial/security
可能性のある原因-Node、Vue.js、webpackのlocalhost設定私は何をすべきか?
main.js
に次の行を追加します。
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
ただし、その意味を完全に理解するには、 セキュリティ、ネイティブ機能、およびユーザーの責任 を読む必要があります。
あなたはこれを持っています:
Electron Security警告このレンダラープロセスではNode.js統合が有効になっており、リモートコンテンツをロードしようとしました。これにより、このアプリのユーザーは深刻なセキュリティリスクにさらされます。
電子文書 からの2番目のセキュリティ勧告から
リモートコンテンツをロードするレンダラー(BrowserWindow、BrowserView、またはWebView)でNode.js統合を無効にすることが最も重要です。目標は、リモートコンテンツに付与する権限を制限することです。これにより、攻撃者がWebサイトでJavaScriptを実行できるようになった場合、攻撃者がユーザーに危害を加えることが劇的に難しくなります。
この後、特定のホストに追加の権限を付与できます。たとえば、「 https://my-website.com/ 」を指すBrowserWindowを開いている場合、そのWebサイトに必要な機能を正確に与えることができますが、それ以上はできません。
攻撃者がレンダラープロセスから飛び出し、ユーザーのコンピューターでコードを実行できる場合、クロスサイトスクリプティング(XSS)攻撃はより危険です。クロスサイトスクリプティング攻撃はかなり一般的です-問題ではありますが、その力は通常、実行されるWebサイトをいじることに限定されます。 Node.js統合を無効にすると、XSSがいわゆる「リモートコード実行」(RCE)攻撃にエスカレートするのを防ぐことができます。どうやって?
// Bad
const mainWindow = new BrowserWindow()
mainWindow.loadURL('https://my-website.com')
// Good
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false,
preload: './preload.js'
}
})
mainWindow.loadURL('https://my-website.com')
<!-- Bad -->
<webview nodeIntegration src="page.html"></webview>
<!-- Good -->
<webview src="page.html"></webview>
Node.js統合を無効にしても、Node.jsモジュールまたは機能を使用するAPIをWebサイトに公開できます。プリロードスクリプトは引き続きrequireおよびその他のNode.js機能にアクセスできるため、開発者はリモートでロードされたコンテンツにカスタムAPIを公開できます。
次のプリロードスクリプトの例では、後でロードされるWebサイトはwindow.readConfig()
メソッドにアクセスできますが、Node.js機能にはアクセスできません。
const { readFileSync } = require('fs')
window.readConfig = function () {
const data = readFileSync('./config.json')
return data
}
そのため、リモートコンテンツのNode.js統合を無効にすることができるように警告されています。
これがあなたの質問に答えることを願っています。
Electron セキュリティチェックリスト には、セキュリティ警告の対処方法が記載されています。特に、index.html
プロトコルからfile:
プロトコル(HTTP CSPヘッダーを使用できない場合)を提供する場合、セキュリティチェックリストに記載されているように、同じ目的でメタタグを使用できます。 CSP HTTPヘッダー 。
使用することをお勧めします
<meta http-equiv="Content-Security-Policy" content="default-src 'none'" />
…しかし、私は(GitHub here で助けを得た)これはscript src
を使用できるので、より実用的であることがわかりました。
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
content-security-policy.com のCSPの詳細。
Electron Vueテンプレートの新しいバージョンには、これらのwarningsがあります。 :
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
index.js
内で次のことを行う必要があります:
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1';
TLDR:BrowserWindowオプションでeval()を無効にします。
私は最新の電子、vueなどでこのプロセスを実行しましたが、解決策はeval()
を無効にすることです。アプリ)。
警告をきれいに防ぐために、ウィンドウの作成中にallowEval: false
をwebPreferences
に追加します。
const win = new electron.BrowserWindow({
webPreferences: {
allowEval: false // This is the key!
}
});
いくつかの背景情報:electronは実際に(require('electron').executeJavaScript
を使用して文字列から)javascriptコードを実行しようとし、成功した場合、コードは安全ではないと見なします。
Electron 2.0以降、開発者は、開発者コンソールに印刷された警告と推奨事項を見ることができます。バイナリの名前がElectronの場合にのみ表示され、開発者が現在コンソールを見ていることを示します。
これらの警告を回避するには、Electronの公式のセキュリティ推奨事項のチェックリストに従うことをお勧めします https://github.com/electron/electron/blob/master/docs/tutorial/security.md