浏览器指纹识别通过组合Canvas、WebGL、navigator属性、时区和屏幕信息等5–7个稳定字段哈希生成,非隐私模式下识别率超90%,但需遵守GDPR/CCPA合规要求。

JavaScript 实现浏览器指纹识别,核心思路是收集浏览器和设备的多种可读属性,组合成一个高区分度的“指纹”,用于匿名识别用户。它不依赖 Cookie 或登录态,但稳定性与唯一性受环境影响较大。
Canvas 渲染指纹
利用 Canvas API 绘制一段文字或图形,再调用 toDataURL() 获取渲染后的像素数据(PNG)。不同 GPU、驱动、操作系统、浏览器对字体渲染、抗锯齿、颜色校准等处理存在细微差异,导致输出的 base64 字符串略有不同。
建议做法:
- 绘制隐藏 canvas 元素,避免干扰页面布局
- 使用固定字体(如
monospace)、字号、颜色和文本内容 - 对输出的 PNG 数据做哈希(如 SHA-256)生成简短指纹段
- 注意:部分隐私模式或浏览器(如 Firefox 隐私窗口)会禁用或统一 canvas 输出,降低区分度
WebGL 渲染与参数指纹
通过 WebGLRenderingContext 查询显卡型号、驱动版本、支持的扩展、着色器精度等信息。例如调用 getParameter(gl.RENDERER)、getParameter(gl.VENDOR),或执行简单着色器获取浮点数精度表现。
立即学习“Java免费学习笔记(深入)”;
关键点:
- 需创建并销毁 WebGL 上下文,避免长期占用资源
- 部分参数在沙箱环境(如某些企业浏览器或 iOS Safari)中被模糊化或返回空值
- 结合 Canvas 指纹可显著提升整体唯一性
系统与浏览器特征采集
读取 JavaScript 可访问的只读属性,包括:
-
navigator.userAgent:含浏览器类型、版本、OS 信息(但易被伪造或标准化) -
navigator.platform、navigator.hardwareConcurrency、screen.availWidth等硬件/屏幕信息 -
Intl.DateTimeFormat().resolvedOptions().timeZone:本地时区(较稳定) -
performance.memory(需 HTTPS + 权限):内存大小(Chrome 支持,但受限) -
navigator.plugins和navigator.mimeTypes(现代浏览器已弃用或为空)
注意:userAgent 在 Chrome 110+ 后默认启用 UA 减少(UA-CH),返回简化字符串,需配合 getHighEntropyValues() 异步获取更详细字段(需用户手势触发且 HTTPS)。
字体与音频指纹(进阶)
字体指纹:动态加载常见字体,测量 document.fonts.check() 或使用 canvas.measureText() 计算字符宽度,推断系统是否安装某字体。
音频指纹:创建 AudioContext,输入特定波形,分析输出音频节点的 FFT 或延迟特性——不同音频栈实现有微小差异。
这两类方法精度高但开销大、兼容性差(如 iOS 不允许 AudioContext 自动启动),且容易触发用户反感,生产环境慎用。
实际应用中,推荐组合 Canvas + WebGL + 基础 navigator + 时区 + 屏幕信息这 5–7 个稳定字段,经哈希后生成指纹。单个字段不可靠,但组合后在非隐私模式下识别率可达 90% 以上。同时需注意合规性:GDPR、CCPA 要求明确告知并获得用户同意,尤其在欧盟地区不得默认采集。











