在使用 Electron WebView 进行开发时需要注意安全问题

2 年 ago

逸, 科

1 minute

你好。我是Play-Doh的Ryosuke。我目前在明治大学综合数理学部应用数理学科就读三年级，专攻统计学系的研究室。

这次我们要写的是关于Electron Webview安全方面需要注意的事项。

电子

Electron是一种可以使用Web技术创建跨平台桌面应用程序的工具。如果想了解由Electron创建的应用程序的相关信息，请查看“Awesome Electron”。

Electron通过在nodejs后台运行并在Chromium浏览器上显示网页来作为桌面应用的表现。由于Electron中的nodejs部分的js进程（主进程）和浏览器部分的js进程（渲染进程）是分开的，因此使用ipc（内部过程调用）作为进程间通信的手段。

而且，在浏览器方面，您可以使用这个HTML标签。webview类似于iframe，可以通过指定URL来显示其他网页。但是，与iframe不同的是，webview内部的javascript进程具有与浏览器的javascript进程不同的实例。当然，webview内部的javascript进程是渲染进程，就像浏览器一样，它具有与主进程进行通信的方式。在安全方面，这里需要注意一些事情。

WebView的安全性。

如果WebView的渲染器进程和主进程之间不需要进行通信，那就没有问题。但是，如果想要进行通信，或者想要在WebView的渲染器进程中使用require来使用nodejs的API，注意在安全方面需要谨慎。

不安全的方法 – nodeintegration

在的属性中，有一个名为nodeintegration的选项。默认情况下，它被设置为false，但可以通过明确指定来允许在webview内访问低级系统功能，如nodejs的require和process。如果想要在webview和主进程之间进行通信，需要使用ipc进行require，所以如果想要实现这一点，最方便的方法是在webview上添加nodeintegration。

然而，XSS存在危险，并且恶意网站可以做很多坏事。因此，请务必确认nodeintegration设置为false。

安全的方式 – 预装

在Webview内如何使用IPC和其他API呢？事实上，通过在preload属性中指定JS文件路径，可以预加载该JS文件。此外，预加载的JS文件没有限制，可以使用require函数，而且preload的作用域与Webview内的作用域是分离的，因此相对较安全。通过合理使用preload，即使在启用nodeintegration为false的Webview内，也能使用所需的Node.js API。

<webview preload="PATH/TO/PREALOD_JS" src="URL">

const {ipcRenderer} = require('electron')

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

还有别的值得阅读的东西

webview Tag