指纹检测点: CSS 系统字体关键字

指纹检测点: CSS 系统字体关键字(font:caption)

检测了什么

CSS 规范定义了 6 个系统字体关键字: caption、icon、menu、message-box、
small-caption、status-bar。它们不是具体字体名, 而是让浏览器去读
操作系统的 UI 元素字体配置(标题栏/图标/菜单/对话框/状态栏用的字体), 再解析成真实字体族。

这段 JS 通过 font: 简写把关键字塞进隐藏元素, 用 getComputedStyle 读回解析结果,
一次采集同时暴露三层信息:

1. 操作系统 —— 中文 Windows 解析出 "Microsoft YaHei UI", 英文 Windows 是
   Segoe UI 系, macOS 是 -apple-system 系;
2. 区域语言 —— 同是 Windows, 中文区和英文区的 UI 字体配置不同;

真实 Chrome(中文 Windows) 的输出:

caption:Arial, icon:Arial, menu:"Microsoft YaHei UI", message-box:Arial,
small-caption:"Microsoft YaHei UI", status-bar:"Microsoft YaHei UI"

检测代码

var KEYS = ["caption", "icon", "menu", "message-box", "small-caption", "status-bar"];

var box = document.createElement("div");
var els = KEYS.map(function (k) {
  var d = document.createElement("div");
  // 隐藏 div, font 简写里直接给系统字体关键字
  d.style.cssText = "position:absolute;left:-9999px;top:0;visibility:hidden;font:" + k;
  box.appendChild(d);
  return d;
});
document.body.appendChild(box);

var result = KEYS.map(function (k, i) {
  // 读回计算样式 —— 真浏览器解析出 OS 字体, 无头环境给出默认值
  return k + ":" + window.getComputedStyle(els[i]).fontFamily;
}).join(",");

document.body.removeChild(box);

// result = 'caption:Arial,icon:Arial,menu:"Microsoft YaHei UI",...'
// 作为指纹字段上报

这个点的特点

• 零开销: 纯 CSS + getComputedStyle, 不请求字体、不画 canvas、不调显眼 API;
• 隐蔽: 混在普通 DOM 操作里, 没有 WebGL/AudioContext 那种特征调用;
• 难以伪造自洽: 值必须与 UA 声称的 OS+区域一致 —— 英文 Windows 的 UA
  配中文区的微软雅黑 UI 反而可疑, 换目标环境要整套换;
• 检测端只需 10 行代码, 却同时校验 OS 类型、区域、浏览器真实性三个维度,
  是指纹采集里性价比最高的点之一。