Electron中 创建窗口的三种方式以及区别?

596 阅读4分钟

创建窗口的三种方式:

  1. 使用 BrowserWindow 模块(推荐)
  2. 通过进程间通信(IPC)来创建窗口: 主进程和渲染进程配合
    • 主进程创建窗口并建立接受通道
    • 渲染进程发送IPC请求创建窗口
  3. 在渲染进程中启用 window.open(不推荐):容易引起攻击
    • 要配置:在主进程创建主窗口时,需要对webPreferences进行设置,使window.open能够使用
    webPreferences: {
      webSecurity: false,
      nodeIntegration: true,
    }

window.open 和 BrowserWindow的区别:

比较项目使用BrowserWindow(主进程)使用window.open(渲染进程)
控制权完全由主进程控制,可精确设置窗口属性(如大小、位置、是否可调整等),也能提前配置安全相关参数(如webPreferences控制权相对分散,更类似浏览器的默认行为,可能受到浏览器安全策略和默认行为限制
安全性更安全。主进程能合理设置安全参数,如webPreferences中的nodeIntegrationwebSecurity,有效防止安全漏洞,如恶意代码利用 Node.js 环境或跨域攻击默认被禁用,若启用(通过设置webSecurity = false)会使一些安全机制失效,增加跨域攻击、恶意脚本注入等风险
灵活性能创建各种特殊样式窗口(如无边框、透明窗口),方便管理窗口生命周期,包括关闭窗口时的资源清理和数据保存等操作灵活性较差,主要模仿浏览器打开新窗口行为,在定制窗口样式(如自定义标题栏)和功能上没有主进程创建那么方便
适用场景适用于需要对窗口进行精细控制、高安全性要求的情况,如创建应用的主要窗口、重要的功能窗口等在某些简单场景下,如果安全风险可接受且希望更接近浏览器的行为模式来打开窗口,可以考虑使用,但一般不推荐

1. 控制权方面

  • BrowserWindow(主进程创建) :通过主进程使用BrowserWindow模块创建窗口,开发者可以完全控制窗口的各种属性,如大小(widthheight)、是否可调整大小、窗口的位置、初始加载的 URL 或文件等。可以在创建窗口时就设置好安全相关的配置,如webPreferences中的nodeIntegrationwebSecurity等参数,以满足应用的安全和功能需求。
  • window.open(渲染进程使用) :如果在渲染进程中使用window.open,控制权相对分散。虽然也能打开新窗口,但它的行为更类似于在浏览器中打开新窗口,可能会受到浏览器默认行为和安全策略的限制。而且,在 Electron 中默认是禁用它的,启用后可能会因为安全设置(如webSecurityfalse)而带来潜在的安全隐患。

1. 安全方面

  • BrowserWindow(主进程创建) :这种方式更安全。主进程可以根据应用的需求,合理设置安全参数。例如,通过设置webPreferences中的nodeIntegrationwebSecurity,可以在保证应用功能的同时,防止恶意代码利用 Node.js 环境或者跨域等安全漏洞进行攻击。
  • window.open(渲染进程使用) :如前面所述,默认被禁用是因为安全考虑。如果为了使用它而设置webSecurity = false,会使一些安全机制失效,如同源策略可能会被削弱,增加了应用遭受跨域攻击、恶意脚本注入等安全风险。

1. 灵活性方面

  • BrowserWindow(主进程创建) :提供了更高的灵活性。可以创建各种类型的窗口,如无边框窗口、透明窗口等特殊样式的窗口。还可以对窗口的生命周期进行管理,例如,在窗口关闭时进行资源清理、保存用户数据等操作。
  • window.open(渲染进程使用) :相对而言灵活性较差。它主要是模仿浏览器中打开新窗口的行为,在样式和功能的定制上没有通过主进程使用BrowserWindow创建窗口那么方便。例如,很难直接通过window.open来创建一个具有特定自定义样式(如自定义标题栏)的窗口。