从页面运行时、DOM、资源 URL、响应头、动态加载和源码版权注释 6 个维度收集线索,把站点用的前后端栈分门别类列清楚。
StackPrism(以下简称 栈棱镜)是一款基于 Chrome / Edge Manifest V3 的网页技术栈识别扩展。
不同于市面上多数只看 HTML 资源 URL 的同类工具,栈棱镜把检测拆成 4 个独立通道并行收集线索:
- 静态扫描:页面加载时由注入脚本扫 DOM、全局变量、CSS 类名、CSS 变量、
<meta> - 响应头观察:Service Worker 监听
webRequest.onHeadersReceived,捕获主文档/XHR/iframe 的响应头与 HTTP 版本 - 动态资源监听:content script 用
PerformanceObserver+MutationObserver累积页面交互后新加载的脚本/样式/iframe/feed - JS 版权注释扫描:后台异步抓主 bundle 的开头版权注释,识别打包进
index/main/vendorchunk 的第三方依赖
4 路结果合并去重后,按 50+ 个类目分组展示,并对伪造响应头、自指检测、模糊误报等场景做了主动收敛。
- MV3 service worker 架构:无后台常驻进程,事件驱动,内存占用低
- 规则即数据:50+ 个 JSON 规则文件(
public/rules/)集中维护,构建期预编译 hint prefilter 与 keyword 合并正则,运行时只跑命中候选 - 伪造检测:响应头里同时出现 ≥4 种主体身份字段(
server、x-aspnet-*、x-drupal-*、x-powered-cms、x-varnish等),或server字段拼了多个产品,自动降级所有相关类目的置信度并附警示 - 自指抑制:身在 github.com / x.com / npmmirror.com 等 50+ 主流站点时,自动不再把同名服务列为"使用的技术"
- HTTP 版本识别:从
webRequest.statusLine提取真实协商版本,绕开跨域Timing-Allow-Origin限制
| 维度 | 类目示例 |
|---|---|
| 前端 | 前端框架 / UI 框架 / 前端库 / 构建与运行时 |
| 服务端 | Web 服务器 / 后端框架 / CDN 与托管 / 开发语言 |
| 内容 | 网站程序 / 主题模板 / CMS / 电商平台 / RSS |
| 第三方 | SaaS / 探针监控 / AI 大模型 / 第三方登录 / 支付 |
| 营销 | 广告 / 营销 / 统计 / 分析 / 标签管理 |
| 安全 | HTTPS / HTTP/2 / HTTP/3 / CSP / Cookie 同意 |
从源码加载(开发模式):
git clone https://github.com/setube/stackprism.git
cd stackprism
pnpm install
pnpm run build- 打开
chrome://extensions或edge://extensions - 右上角开启「开发者模式」
- 点「加载已解压的扩展程序」,选刚才构建出的
dist/目录 - 访问任意网页,扩展图标显示识别数量
pnpm run dev # 开发模式 + HMR
pnpm run typecheck # vue-tsc 类型检查
pnpm run lint # ESLint
pnpm run build # 生产构建(含规则预编译)
pnpm run docs:dev # VitePress 文档站本地预览栈棱镜的规则系统是数据驱动的——绝大多数检测改规则 JSON 即可,无需碰代码。
- 加载清单:public/rules/index.json 列出所有要加载的规则文件
- 页面规则:
public/rules/page/*.json处理页面源码、DOM、资源 URL、动态资源 - 响应头规则:
public/rules/headers/*.json处理服务端响应头与 Cookie - 自指抑制:public/rules/self-host-suppress.json 当用户在某主流站点上时跳过同名识别
- 技术链接:public/tech-links.json 集中维护技术名 → 官网/仓库 URL 的映射,识别结果可点击跳转
- 构建期 prefilter:vite.config.ts 的
precompileRulesPlugin在closeBundle阶段为每条 leaf rule 注入__hints(最长 literal 段去重排序取前 3)和__keywordCombined(keyword 合并正则),运行时rule-matcher.ts优先用它们做候选过滤
新规则的字段:
- 优先用高特征信号:响应头、专属资源 URL、
<meta name="generator">、window.<global>、独家 CSS 选择器、JS 版权注释、官方 SDK 包名 - 避免短或过宽的 keyword(
spring/phoenix/column/container这些会命中竞品讨论、Bootstrap 与 Tailwind 通用类) - 优先限定
matchIn,优先resources/url/headers而不是裸html,减少正文误报
- 后端识别不保证完整:很多站点隐藏
Server/X-Powered-By等响应头,后端结果会以"线索 + 置信度"形式展示 - 伪造响应头:扩展会主动识别 ≥4 种主体身份字段同时存在的伪造场景,将相关类目降级为低置信度并附警示。但单个伪造头无法识别,建议结合其他线索判断
- 首次安装请刷新目标页:让 service worker 捕获主文档响应头
- 源代码搜索是 DOM 快照:基于当前页面的
outerHTML,不等同于服务器最初返回的原始 HTML - Chrome 系统页 / 商店页 / 内置页通常不允许注入检测脚本
- 动态监控异步累积:content script 在后台累计交互后新加载的资源,重新打开 popup 可看到合并结果
栈棱镜目前内置 50+ 类目下 2000+ 条识别规则,但前端生态变化快,新框架、新 SaaS、新规则误报都欢迎参与:
- Bug / 误识 / 漏识反馈:Issues — popup 上直接点「识别不准确」按钮会自动填好议题模板
- 规则贡献:扩展设置页点「提交规则贡献」,或直接 PR 到
public/rules/ - 讨论与提案:Discussions
提交代码前请跑 pnpm run typecheck && pnpm run lint && pnpm run build 三个检查全过。
如果觉得有帮助,欢迎点 Star 让更多人看到这个项目。
本项目基于 CC BY-NC-SA 4.0 协议授权 —— 允许非商业自由使用与二次修改,必须署名且衍生作品采用同一协议。完整法律文本见 LICENSE。
{ "name": "技术名称", "category": "前端框架", // 50+ 类目之一 "patterns": ["正则或关键词"], "matchType": "regex", // 或 "keyword" "matchIn": ["html", "resources", "url", "headers", "dynamic"], "confidence": "高", // 高 / 中 / 低 "kind": "类型说明", "selectors": ["CSS 选择器"], "globals": ["window 全局变量名"], "classPrefixes": ["类名前缀"] }