返回

Electron开发: BrowserWindow vs webview 选型指南

javascript

BrowserWindow 与 <webview> 标签:选型指南

Electron 应用开发中,BrowserWindow<webview> 标签是两个关键组件,都用于显示网页内容,但它们的应用场景和实现方式存在明显差异。正确理解它们的特性,可以帮助开发者更好地构建高效、安全的应用。

BrowserWindow:独立窗口的基石

BrowserWindow 创建的是一个独立的进程窗口,它拥有自己的渲染进程,能够像普通浏览器窗口一样处理页面内容、执行 JavaScript 代码。每个 BrowserWindow 都是一个独立的沙盒环境,这意味着窗口间的隔离性较好,即使其中一个窗口出现问题,通常不会影响其他窗口或主进程。

适用场景

  • 应用的主窗口:承载应用的 UI 界面和主要交互。
  • 对隔离性有较高要求的页面:例如,敏感信息的展示,复杂的第三方插件渲染等。
  • 多窗口应用:需要多个独立的顶级窗口来展示不同内容的场景。

代码示例

创建新的 BrowserWindow,展示指定网页:

const { BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: false, //  安全性考虑,通常禁用
        contextIsolation: true // 启用上下文隔离,进一步提升安全
    }
  });

  win.loadFile('index.html'); //  加载本地 html 文件,也可使用 loadURL 加载在线 url
}

app.whenReady().then(() => {
  createWindow();
})

操作步骤

  1. 确保 Electron 开发环境已经搭建。
  2. 创建一个 Electron 项目。
  3. 复制上方代码到主进程入口文件。
  4. 使用 npm start 或类似命令运行项目,即可看到新窗口打开,并显示 index.html 的内容。

<webview> 标签:嵌入式网页容器

<webview> 是 HTML 标签,可以嵌入到其他 BrowserWindow 内。它可以将网页内容渲染在指定位置,就像 <iframe> 标签一样,但具有更多 Electron 相关的控制能力。 <webview> 标签也运行在独立的渲染进程中,它提供了一个有限的沙盒环境,虽然没有 BrowserWindow 的严格,但仍可以提升一定安全性。

适用场景

  • 应用内嵌网页:在应用中展示一些简单的动态页面,比如侧边栏、预览框等。
  • 第三方内容集成:引入第三方的网页或者服务时。
  • 简单的文档预览:展示如 Markdown 格式,或者代码预览的场景。

代码示例

在 HTML 文件中使用 <webview> 标签:

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
      <webview src="https://www.example.com" style="width:600px; height:400px;"></webview>
  </body>
</html>

操作步骤

  1. 假设你已经有主进程代码并能启动应用。
  2. 将上方 HTML 代码保存为 index.html 文件(或已存在的文件)。
  3. 确保在你的主进程创建的窗口里,使用 win.loadFile('index.html'); 加载了这个 html。
  4. 运行 Electron 应用,你会看到 example.com 被渲染在了你应用的 index.html 里。

如何选择:实际案例分析

回到最初的例子:构建浏览器或者代码编辑器。

  • 构建浏览器 : 每个标签页最好使用 BrowserWindow 来实现。这样可以确保各个标签页之间的隔离性,并且在某些情况下,可以减少一些性能上的问题。如果使用 <webview>,可能会随着标签页的增加,带来内存和性能的挑战,以及复杂标签管理。
  • 构建编辑器 : 代码渲染输出部分,使用 BrowserWindowwebview 取决于渲染页面的复杂程度和与应用主体的交互要求。如果仅仅是预览代码输出,并且不需要太多和编辑器界面的联动,则 <webview> 可能是一个更合适的选择。如果页面渲染过程较为复杂,同时页面需要在代码变动后重新渲染,或者与编辑器其他部分有比较深入的交互,则使用单独的 BrowserWindow 窗口能更好的分离逻辑,同时保障更好的安全隔离。

安全建议

无论是 BrowserWindow 还是 <webview>,都有安全风险需要注意。

  • 禁用 nodeIntegration:在所有渲染进程(包括 BrowserWindow<webview> )中禁用 node 集成,从而阻止远程代码访问 Electron 或 node.js 功能。
  • 开启 contextIsolation: contextIsolation 可以有效的阻止窗口内的 javascript 代码直接访问全局变量。这能进一步阻止潜在的脚本注入攻击。
  • 严格审查网页内容来源:避免加载不可信的第三方网页。对于使用 loadURL 加载的内容,严格审查其安全性,尤其是加载动态地址或者用户输入的内容时。
  • 限制 webview 权限:可以设置 webPreferencesallowpopups 属性限制 <webview> 的能力,使其无法随意地创建新窗口或者使用插件。

选择 BrowserWindow 还是 <webview> 需要结合具体场景需求,仔细考量性能和安全等因素。合理利用二者特性,能够帮助你构建更加高效、稳定的 Electron 应用。