Bitwarden 贡献文档
⮐ Bitwarden Contributing Documentation我的博客联系我
  • 关于
  • 入门
    • 概述
    • 工具
    • 服务器
      • 设置指南
      • 高级服务器设置
      • 数据库
        • MSSQL
        • 实体框架
      • 事件日志
      • Ingress 隧道
      • SCIM
      • 自托管指南
      • 系统管理门户
      • 单点登录 (SSO)
        • 本地 IdP
        • Okta
      • 故障排除
      • 用户机密
      • 公共 API
    • 网页客户端
      • 网页密码库
        • WebAuthn
      • 浏览器端
        • 生物识别解锁
        • Firefox 隐私模式
      • 桌面端
        • Mac App Store Dev
        • Microsoft Store
        • Native Messaging Test Runner
        • 更新测试
      • CLI
      • 故障排除
    • 移动端
      • Android
        • F-Droid
      • iOS
      • .NET MAUI (legacy)
        • Android
        • iOS
        • watchOS
    • SDK
      • 内部 SDK
      • Secrets Manager
        • Integrations
          • Kubernetes
    • 业务 App
      • 目录连接器
        • JumpCloud
        • OpenLDAP Docker 服务器
      • Key Connector
      • Splunk App
  • 贡献
    • 贡献
    • 代码样式
      • =Android & Kotlin
      • Angular & TypeScript
      • C#
      • =Rust
      • T-SQL
      • =Swift
      • Tailwind
    • 数据库迁移
      • 进化数据库设计
    • 提交签名
    • 拉取请求
      • =贡献审查程序
      • 分支
      • 代码审查
      • UI 审查 - Chromatic
    • 无障碍
    • 依赖管理
    • 功能标记
    • 模板存储库
    • 测试
      • =数据库集成测试
      • 负载测试
      • 单元测试
        • 命名约定
        • 测试结构
    • 修改用户机密
  • 架构
    • 架构
    • 架构决策记录 (ADR)
      • 0001 - Angular Reactive Forms
      • 0002 - Public API for modules
      • 0003 - Adopt Observable Data Services for Angular
      • 0004 - Refactor State Service
      • 0005 - Refactor Api Service
      • 0006 - Clients: Use Jest Mocks
      • 0007 - Manifest V3 sync Observables
      • 0008 - Server: Adopt CQRS
      • 0009 - Composition over inheritance
      • 0010 - Angular Modules
      • 0011 - Scalable Angular Clients folder structure
      • 0012 - Angular Filename convention
      • 0013 - Avoid layered folder structure for request/response models
      • 0014 - Adopt Typescript Strict flag
      • 0015 - Short Lived Browser Services
      • 0016 - Move Decryption and Encryption to Views
      • 0017 - Use Swift to build watchOS app
      • 0018 - Feature management
      • 0019 - Adoption of Web Push
      • 0020 - Observability with OpenTelemetry
      • 0021 - Logging to Standard Output
      • =0022 - Authorization
      • =0023 - Identifying Integrated Clients
    • 移动客户端架构
      • =Android
      • =iOS
        • =推送通知故障排除提示
      • =.NET MAUI (legacy)
        • =概述
        • watchOS
    • =SDK 架构
      • =数据模型
      • =依赖
      • Password Manager
        • Web
          • =互操作性
      • =Secrets Manager
      • =服务器绑定
      • =版本控制和破坏性更改
    • 网络客户端架构
      • 概述
      • 数据模型
      • 表示层
        • Angular
        • CLI
      • =依赖注入
      • 服务层
        • Vision
        • 实现
    • 服务器架构
    • 深度剖析
      • 身份验证
        • 双重身份验证
      • =授权
      • =浏览器自动填充
        • 收集页面详细信息
        • 生成并执行填充脚本
        • 表单提交检测
        • Shadow DOM
        • =内联自动填充菜单
      • Captcha
      • =只读数据库副本
      • 事件日志
      • =FIDO2 和通行密钥
        • =凭据
        • =操作
        • =命名惯例
        • =实现
          • =提供程序
            • =浏览器扩展
          • =依赖方
            • =用于解密的通行密钥
        • =术语表
      • 推送通知
        • 移动端推送通知
        • 其他客户端推送通知
      • =SSH 密钥和代理
        • =SSH 代理
      • =状态提供程序框架
        • =派生状态
    • =安全
      • =定义
      • =原则
        • =P01 - 锁定的密码库是安全的
        • =P02 - 半受损设备密码库的有限安全性
        • =P03 - 完全损坏的系统没有安全性
        • =P04 - 控制密码库数据的访问权限
        • =P05 - 将安全漏洞的影响降至最低
      • =要求
由 GitBook 提供支持
在本页
  • 背景和问题陈述​
  • 考虑的方案​
  • 决策结果​
  • 积极的后果​
  • 消极的后果​
  • 在上下文之间同步主题​
  • 实施浏览器服务​
  1. 架构
  2. 架构决策记录 (ADR)

0015 - Short Lived Browser Services

上一页0014 - Adopt Typescript Strict flag下一页0016 - Move Decryption and Encryption to Views

最后更新于1年前

对应的

ID:
ADR-0015

状态:

进行中

发表于:

2022-12-09

背景和问题陈述​

将 Observables 的使用引入到了我们的 TypeScript 代码库中。该 ADR 描述了使用 ngDestroy 触发取消订阅所有已订阅的 Observables。但是,只有当使用 Angular 路由器离开页面时才会调用 ngDestroy。在 SPA 中,这不是问题。如果没有使用路由器,则意味着您关闭了页面,SPA 已失效。在浏览器扩展中,我们有一个持久的背景,可以在此类关闭事件中存活下来。这意味着观察者队列中存在的订阅不再存在。

特别是在 Firefox 中,这是一个灾难性的失败。Firefox 将用 DeadObject 替换为属于不再存在的 DOM 对象的所有对象。当在 Subject 上调用 next() 时, DeadObject 会被视为观察者并抛出错误,从而阻止向后续观察者发出任何进一步的通知,并导致扩展中出现灾难性的中断。

考虑的方案​

  • 还原 ADR 003 并移除 Observables -- 我们从代码库中删除 Observables 并还原到之前的状态。

  • 浏览器事件 -- 我们使用 beforeunload、unload、visibilityChange 和/或 pageHide 事件来触发 Angular 服务的销毁。

    • 这些触发器并不保证会被调用,并且可能不会在所有浏览器中被调用。

  • 短期主题 -- 我们确保在组件中创建的订阅不会引用长期订阅。

决策结果​

选择的方案:短期主题。

这种方案最为灵活,既能保留 Observables 的优点,又能避免与页面可见性事件相关的不稳定性。

这些短期主题将通过创建可视化级服务来实现,这些服务的生命周期与它们所服务的组件相同。数据将在这些短期服务和后台的长期扩展之间同步。

积极的后果​

  • 对编写组件级代码没有影响。

  • 无论如何都会将我们引向 Manifest V3 所需的方向。

  • 绕过由于悬空订阅而导致的潜在内存泄漏。

消极的后果​

  • 由于需要根据可视化和后台上下文创建服务的可观察量,因此增加了浏览器扩展的内存占用。

  • 需要在前台和后台上下文之间同步服务的可观察量。

  • 需要对服务的可观察量进行更复杂的实现。

在上下文之间同步主题​

上下文之间的主题同步是使用 Observable 订阅、浏览器消息传递 API 和浏览器存储 API 的组合来开发的。

存储或直接对象共享被用作公共数据存储。订阅用于写入公共存储和发出消息,这会触发另一端的后续读取。

实施浏览器服务​

在本节中,我们将通过一个示例介绍如何实现浏览器服务。我们将使用 FolderService 作为示例。

FolderService 提供了两个 Observables ,由 BehaviorSubject、_folders 和 _folderViews 支持。

export class FolderService {
  private _folders = new BehaviorSubject<Folder[]>([]);
  private _folderViews = new BehaviorSubject<FolderView[]>([]);

  readonly folders = this._folders.asObservable();
  readonly folderViews = this._folderViews.asObservable();
}

以下各章节讨论将服务的可观察量分为前台和后台上下文所需的更改。

libs 服务​

libs 服务需要使支持 Observable 的 Subject 可供扩展它的浏览器服务使用。

export class FolderService {
-  private _folders = new BehaviorSubject<Folder[]>([]);
-  private _folderViews = new BehaviorSubject<FolderView[]>([]);
+  protected _folders = new BehaviorSubject<Folder[]>([]);
+  protected _folderViews = new BehaviorSubject<FolderView[]>([]);

  readonly folders = this._folders.asObservable();
  readonly folderViews = this._folderViews.asObservable();
}

浏览器服务​

浏览器服务必须简单地扩展库服务并将其自身和 Subject 包装在一些装饰器中。

@browserSession
export class BrowserFolderService extends FolderService {
  @sessionSync({ initializer: Folder.fromJSON, initializeAs: "array" })
  protected _folders: BehaviorSubject<Folder[]>;
  @sessionSync({ initializer: FolderView.fromJSON, initializeAs: "array" })
  protected _folderViews: BehaviorSubject<FolderView[]>;
}

@sessionSync 装饰器负责注册要同步的属性,并提供有关如何在需要序列化数据时初始化数据的信息。@browserSession 装饰器读取注册的属性并在给定类的所有实例之间设置同步。

依赖注入​

一旦服务实现,就可以向 Angular 的依赖注入系统注册。请务必更新或添加任何必要的提供程序。

main.background

@browserSession 仅在相同的类之间同步,因此后台服务需要使用与前台服务相同的类。目前,后台服务在 main.background.ts 中初始化。

-import { FolderSerivce } from '@bitwarden/common/src/services/folder.service';
+import { BrowserFolderService } from '../services/browser-folder.service';

-this.folderService = new FolderService(
+this.folderService = new BrowserFolderService(
  this.cryptoService,
  this.i18nService,
  this.cipherService,
  this.stateService
);
官方页面地址
ADR-003