Lightbeam的心脏一个HTTP请求如何从Firefox事件捕获变成图谱上的一个节点【免费下载链接】lightbeamOrignal unmaintained version of the Lightbeam extension. See lightbeam-we for the new one which works in modern versions of Firefox.项目地址: https://gitcode.com/gh_mirrors/li/lightbeamLightbeam 是一款面向 Firefox 的开源浏览器扩展它能将你在网上浏览时产生的每一次跨站 HTTP 请求实时可视化成一张「网站追踪图谱」。本文将带你深入它的心脏看看一个普通的 HTTP 请求是如何从 Firefox 的事件总线一路流转、被清洗成结构化数据最终变成图谱上一个可点击、可封禁的节点的。第一步在 Firefox 的「事件总线」上搭起听诊器Lightbeam 的心脏只有几行代码它注册了 Firefox 的网络事件http-on-examine-response——每当一个 HTTP 响应完成扩展就会被唤醒This is the heart of Lightbeam, we get all of our data from observing these requests.这句话就写在 lib/main.js 的源码注释里。扩展在这里把原始请求对象channel交给Connection.fromSubject()解析解析成功就记录一条连接、并向界面页面广播消息。第二步把原始请求「洗」成一个 Connection 对象原始的浏览器请求对象很「毛糙」lib/connection.js 负责把它清洗成一个干净、可序列化的Connection 对象。它做了四件关键的事提取域名借助 Firefox 的 eTLD 服务从ads.example.com这类地址中提取出基础域名example.com让同一公司旗下的子域名归为同一个站点判断首/三方比较「你正在访问的页面域名」和「请求目标域名」判定这是一次你自己点的访问还是一次背后悄悄发出的第三方追踪请求打上标签是否携带 Cookie、是否 HTTPS、请求方法、状态码、内容类型……一共15 个字段见 lib/connection.js 中的字段常量过滤噪声localhost、插件自身的请求、无所属标签页的请求等都会被标记为无效并丢弃。字段顺序在 doc/data_format.v1.2.md 中有完整定义每条连接本质上是一个 14 元组紧凑得像一行数据库记录。第三步跨进程通信把数据递到界面手里插件逻辑运行在浏览器后台进程而图谱界面是一个普通的网页标签页两者不能直接共享内存。Lightbeam 通过 Mozilla Add-on SDK 的page-mod port 消息通道解决后台一侧lib/ui.js 的emitForWorker()把连接数据通过 port 发出界面一侧data/content-script.js 监听connection事件把新连接推入allConnections并触发聚合更新。这套机制还承担了历史数据回传passStoredConnections、封禁名单同步update-blocklist等任务是插件与 UI 之间的唯一数据管道。第四步从「连接」到「图谱节点」的聚合一条连接只是「某一刻发生的一次请求」而图谱需要的是带时间跨度的节点和边。data/aggregate.js 中的onConnection()函数是聚合中枢节点复用用nodemap按域名缓存GraphNode同一个站点无论出现多少次在图上永远只有一个节点新连接只是更新它的firstAccess/lastAccess、Cookie 计数等内容边的合并edgemap以「源-目标」为键合并重复边角色判定根据访问次数占比给节点打上site你访问的站点、thirdparty纯追踪方或both标签并更新顶栏的统计数字。第五步D3 力导向布局让节点「活」起来最后登场的是 data/graph.js它把聚合好的节点和边交给 D3 的d3.layout.force()力导向布局节点之间互相排斥、被边拉紧经过几十毫秒的「模拟退火」后站点关系网自然舒展开来——连接越多的节点比如大型广告追踪公司会被更多力拉扯、居于更显著的位置。每来一条新连接模拟就会重新加热reheat图谱随之动态生长。数据的归宿本地存储与隐私设计被捕获的连接并不会无限膨胀。lib/connection.js 采用「批量缓冲」策略每积累 200 条或每 5 分钟就把连接写入 lib/persist.js 管理的本地 simple-storage当存储接近配额上限时自动丢弃最旧的一半记录。此外隐私窗口中的连接只可视化、不落盘见 lib/connection.js。小结回顾这条数据流水线正是它让 Lightbeam 成为隐私研究者的利器HTTP响应 → http-on-examine-response 事件 → Connection 对象15字段 → port 消息 → GraphNode/GraphEdge 聚合 → D3 力导向图谱从一次毫秒级的网络事件到屏幕上缓缓成型的追踪网络每一步都有清晰的分工事件捕获、数据清洗、跨进程通信、图聚合、可视化渲染。理解了这条管线你也就掌握了 Lightbeam 的心脏跳动方式。 想动手研究可以重点阅读 lib/main.js事件捕获、lib/connection.js数据清洗与 data/aggregate.js图聚合这三个文件它们加起来不到 1000 行却覆盖了 Lightbeam 的全部核心逻辑。【免费下载链接】lightbeamOrignal unmaintained version of the Lightbeam extension. See lightbeam-we for the new one which works in modern versions of Firefox.项目地址: https://gitcode.com/gh_mirrors/li/lightbeam创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考