在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

jgraph/drawio-desktop

菜单

渲染器进程与通信

相关源文件

本文档介绍了 drawio-desktop 应用程序中的渲染器进程及其与主进程的通信方式。有关主进程本身的更多信息，请参阅 主进程。

目的和概述

drawio-desktop 应用程序使用了 Electron 的多进程架构，其中渲染器进程负责：

  • 渲染 draw.io 网页应用程序的 UI
  • 处理用户交互
  • 通过 IPC（进程间通信）安全地与主进程通信

本文档详细介绍了渲染器进程的设置、安全性以及进程间双向通信的实现方式。

来源：src/main/electron.js147-347 src/main/electron-preload.js1-79

渲染器进程架构

渲染器生命周期

渲染器进程在主进程需要新窗口时创建。主进程会使用特定的安全设置配置渲染器，并将其加载到 draw.io 网页应用程序中。

来源：src/main/electron.js147-347 src/main/electron.js896-937

渲染器配置

在创建新的渲染器进程（浏览器窗口）时，会设置几个重要的配置选项：

配置优先考虑安全性，通过上下文隔离和禁用某些功能来实现，同时保留用户对窗口大小的偏好设置。

来源：src/main/electron.js164-177

预加载脚本和上下文桥

预加载脚本在主进程和渲染器进程之间创建了一个安全的桥梁，确保渲染器只能访问特定公开的 API。

上下文桥模式

预加载脚本通过上下文桥向渲染器进程公开两个主要对象：

  1. electron - 包含用于 IPC 通信的方法
  2. process - 公开有限的进程信息

来源：src/main/electron-preload.js36-79

公开的 API

预加载脚本向渲染器进程公开了一组经过精心限制的 API：

API目的
electron.request()向主进程发送请求并处理回调
electron.registerMsgListener()注册特定消息类型的监听器
electron.sendMessage()向主进程发送单向消息
electron.listenOnce()注册一次性事件监听器
process.type公开进程类型信息
process.versions公开版本信息

这种受控的公开确保了渲染器可以与主进程通信，同时维护安全边界。

来源：src/main/electron-preload.js36-79

IPC 通信模式

请求-响应模式

请求-响应模式允许渲染器向主进程发出请求，并通过回调接收异步响应。

来源：src/main/electron-preload.js10-34 src/main/electron-preload.js38-52

基于事件的通信

除了请求-响应模式，drawio-desktop 还使用基于事件的通信，其中任何一方都可以发送事件供另一方监听。

基于事件的通信实现了进程之间更松散的耦合，允许每个进程在无需显式请求-响应周期的情况下响应事件。

来源：src/main/electron.js232-1017 src/main/electron-preload.js53-70

安全性实现

安全性是 drawio-desktop 渲染器进程实现的核心关注点。

上下文隔离

上下文隔离确保预加载脚本和渲染器进程在独立的 JavaScript 上下文中执行，防止它们之间的直接访问。

上下文隔离在 BrowserWindow 配置中通过 contextIsolation: true 启用，确保渲染器进程无法直接访问 Node.js API。

来源：src/main/electron.js174 src/main/electron-preload.js36-72

内容安全策略

应用程序强制执行严格的内容安全策略 (CSP)，该策略限制了渲染器可以加载的资源。

  1. 脚本仅限于同源和特定的哈希值
  2. 连接仅限于同源（可选 Google Fonts）
  3. 图像和媒体可以从任何来源加载
  4. 不允许使用框架（frame-src 'none'）
  5. 样式源仅限于同源和内联样式

此 CSP 应用于渲染器进程中加载的所有内容，增加了额外的安全层。

来源：src/main/electron.js359-371

请求验证

渲染器发送的所有 IPC 请求都会在主进程中进行验证，以确保它们源自受信任的来源。

此验证可确保只有 draw.io 应用程序代码可以与主进程通信，从而防止来自不受信任内容引起的潜在攻击。

来源：src/main/electron.js125-128

渲染器通信示例

打开文件

保存文件

来源：src/main/electron.js311-344 src/main/electron-preload.js10-24

窗口管理通信

主进程负责管理应用程序窗口，并向渲染器进程通信状态更改。

  1. 当窗口最大化或取消最大化时，主进程会发送相应的事件。
  2. 窗口大小调整事件会转发给渲染器。
  3. 渲染器可以通过 'newfile' 事件请求新窗口。
  4. 关闭窗口时，主进程会发送 'isModified' 来检查是否有未保存的更改。

这种通信确保了渲染器可以根据窗口状态更改调整其 UI，并参与窗口生命周期的决策。

来源：src/main/electron.js245-255 src/main/electron.js311-344 src/main/electron.js391-411

结论

drawio-desktop 中的渲染器进程在设计时将安全性作为首要考虑因素，使用上下文隔离和严格的 CSP 来创建安全的环境。渲染器进程和主进程之间的通信通过 IPC 遵循既定的模式，并通过预加载脚本和上下文桥公开精心设计的 API。

这种架构允许基于 Web 的 draw.io 应用程序在桌面环境中安全运行，同时仍然可以通过受控通道访问桌面功能。

来源：src/main/electron.js164-177 src/main/electron-preload.js1-79