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 提供支持
在本页
  • 请求页面详细信息收集
  • 在后台请求页面详细信息
  • 从上下文菜单请求页面详细信息
  • 通过键盘快捷键请求页面详细信息
  • 从扩展 UI 请求页面详细信息
  • 执行页面详细信息收集
  1. 架构
  2. 深度剖析
  3. =浏览器自动填充

收集页面详细信息

上一页=浏览器自动填充下一页生成并执行填充脚本

最后更新于1年前

对应的

自动填充流程的第一步是收集代码库中所谓的「页面详细信息」。页面详细信息是有关当前浏览器选项卡的页面源的元数据数组。

由于它需要访问选项卡的 DOM,因此页面详细信息的收集必须由内容脚本执行。Bitwarden 浏览器扩展通过 autofill-init.ts 内容脚本中初始化的 方法执行此操作。此类中的逻辑负责解析页面 DOM 并返回表示当前选项卡的页面详细信息的数据结构。

页面详情

要深入了解页面详细信息中包含的内容, TypeScript 类的文档对属性及其用途进行了解释。

请求页面详细信息收集

可以从其他内容脚本或扩展本身请求页面详细信息收集。

在后台请求页面详细信息

在这两种情况下,内容脚本会请求页面详细信息收集:

  • notificationBar.js 内容脚本检测到页面 DOM 或 URL 已更改,或者

  • 用户打开了「页面加载时自动填充」,因此 autofiller.ts 会在页面加载时请求自动填充

在这两种情况下,页面详细信息收集的处理方式如下:

  1. 请求内容脚本发送 bgCollectPageDetails 命令以将请求发送到 runtime.background.ts 后台页面。

  2. runtime.background.ts 页面调用 main.background.ts 上的 collectPageDetailsForContentScript 方法。

  3. collectPageDetailsForContentScript 方法将带有 collectPageDetails 命令的消息发送到 autofill-init.ts 内容脚本。

  4. autofill-init.ts 内容脚本生成页面详细信息,然后广播一条发送方为 autofiller 或 notificationBar 的 collectPageDetailsResponse 消息。

  5. runtime.background.js 和 notification.background.js 分别监听这两个消息,并对它们采取行动。

这些流程如下图所示:

页面加载时自动填充

通知栏

从上下文菜单请求页面详细信息

Bitwarden 扩展用户可以通过右键单击页面然后选择「Bitwarden / 自动填充」,然后从与当前页面 URI 匹配的项目中选择一个密码库项目,从而从上下文菜单中触发自动填充。

当用户在上下文菜单中选择一个项目时,浏览器的 contextMenu.OnClicked() 事件就会被触发。该事件由 contextMenus.background.js 后台页面处理。该页面会发送一条发送方为 contextMenus 的 collectPageDetails 命令。autofill-init.ts 内容脚本捕获此请求,并在完成后发送一条发发送方为 contextMenus 的 collectPageDetailsResponse 消息,此消息由 runtime.background.js 后台页面处理。

通过键盘快捷键请求页面详细信息

Manifest v2

在运行 Manifest v2 的浏览器扩展中,commands.background.ts 后台页面会侦听 autofill_login 命令。此后台页面在 main.background.js 上执行 collectPageDetailsForContentScript() 方法,该方法将 collectPageDetails 消息广播到 autofill-init.ts 内容脚本。

生成页面详细信息后,autofill-init.ts 内容脚本会广播一条发送方为 autofill_cmd 的 collectPageDetailsResponse 消息。runtime.background.js 后台页面会侦听并接收此消息。

Manifest v3

对于运行 Manifest v3 的浏览器扩展,后台页面将替换为 commandListener。commandListener 会侦听 autofill_login 命令,并通过广播 collectPageDetailsImmediately 命令进行响应。

collectPageDetailsImmediately 与 collectPageDetails 命令不同,因为响应不是通过浏览器命令 API 广播的另一条消息。相反,autofill-init.ts 内容脚本执行页面详细信息生成然后通过 Promise 异步返回响应。

从扩展 UI 请求页面详细信息

用户可以通过两种方式从 Bitwarden 浏览器扩展 UI 请求自动填充:

  • 在查看密码库中的项目时点击「自动填充」按钮 ( view.component.ts ),或者

  • 在当前标签视图中点击密码库项目 ( current-tab.component.ts )

在这两种情况下,组件都会将扩展实例的唯一 BroadcasterSubscriptionId 作为 sender 发送 collectPageDetails 命令。autofill-init.ts 内容脚本会生成页面详细信息,然后使用相同的 sender 响应 collectPageDetailsResponse 消息,确保消息被正确的发送方接收。

执行页面详细信息收集

在上述所有场景中,autofill-init.ts 内容脚本都会收到收集页面详细信息的请求。此时,将通过 CollectAutofillContentService 中的 getPageDetails() 方法收集页面详细信息。

Bitwarden 自动填的键盘快捷键分别在 Manifest v2 和 v3 的 manifest.json 和 manifest.v3.json 文件中配置。该命令在清单文件中定义为 autofill_login 。当用户启动该组合键时,浏览器命令将广播给所有侦听器。此行为的详细介绍请参阅。

getPageDetails() 方法解析页面 DOM 并创建 类的实例。

该类包含 和 对象的数组,每个对象代表页面源上一个潜在可填充字段。对象的属性将在自动填充流程的下一步「」中使用。

官方页面地址
CollectAutofillContentService
AutofillPageDetails
此处
AutofillPageDetails
AutofillField
AutofillForm
生成填充脚本