探讨了浏览器指纹技术如何通过 Canvas、WebGL 和 Audio API 收集设备特征以唯一标识用户。文章详细解析了三大核心技术的原理与实现代码，分析了其难以防御的原因，并介绍了现代浏览器的反指纹防御策略如 Canvas Farbling。最后提供了开源库实战方案及针对开发者和普通用户的隐私保护建议。
你以为清除了 Cookie 就安全了？2025 年约翰霍普金斯大学的研究首次证实：浏览器指纹追踪比你想象的更普遍，而且你几乎无法阻止它。
还记得那些年困扰我们的 Cookie 弹窗吗？
'本网站使用 Cookie 改善您的体验'——然后给你两个选项：一个巨大的"接受所有 Cookie"按钮，和一个藏在角落里的"拒绝"链接。这就是所谓的"暗模式"（Dark Pattern），专门用来诱导用户同意追踪。
好消息是，这个时代正在落幕。Chrome、Firefox、Safari 都在逐步默认阻止第三方 Cookie。但坏消息是——。
浏览器指纹最大的特点是：你无法删除它，甚至无法感知它。它就像你在互联网上留下的无形签名，无论你如何清理浏览数据，它都能把你认出来。
2025 年 2 月，约翰霍普金斯大学和德州农工大学的研究团队发布了论文《The First Early Evidence of the Use of Browser Fingerprinting for Online Tracking》，首次实证证实了浏览器指纹被广泛用于广告追踪。研究团队通过 FPTrace 框架发现，改变指纹后广告竞价出现了显著差异，直接证明了指纹与广告定向的关联。
更讽刺的是，2025 年 3 月，Google 修改了隐私政策，允许在 Privacy Sandbox 中使用浏览器指纹技术。这意味着连倡导"隐私保护"的科技巨头，也在拥抱这种技术。
简单来说，浏览器指纹就是通过收集浏览器和设备的多种特征信息，生成一个几乎唯一的标识符。这些特征包括但不限于：
| 特征类别 | 具体信息 | 熵值贡献 |
|---|---|---|
| User Agent | 浏览器版本、操作系统 | 中等 |
| 屏幕信息 | 分辨率、颜色深度、可用分辨率 | 低 |
| 时区语言 | 时区偏移、首选语言 | 低 |
| 字体列表 | 已安装字体 | 极高 |
| 插件信息 | 浏览器插件列表 | 中等 |
| Canvas | 2D 渲染像素差异 | 极高 |
| WebGL | GPU 型号、渲染器信息 | 极高 |
| Audio | 音频处理特征 | 高 |
| Hardware | 内存、CPU 核心数 | 中等 |
根据 EFF 的 Panopticlick 研究，在 100 万个样本中，94.2% 的浏览器指纹都是唯一的。
打个比方：如果把 User Agent 比作你的名字，Canvas 指纹就是你的笔迹，WebGL 指纹是你的 DNA——前者很容易伪造，后者几乎无法复制。
Canvas 指纹是浏览器指纹中最成熟、最稳定的技术之一。它的核心思想非常简单：让浏览器在 Canvas 上绘制特定内容，然后读取像素数据，不同浏览器/设备产生的像素差异就是指纹。
为什么会产生差异？主要原因包括：
function getCanvasFingerprint() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = 200;
canvas.height = 50;
// 绘制背景
ctx.fillStyle = '#f60';
ctx.fillRect(0, 0, 200, 50);
// 绘制文字 - 关键！字体和抗锯齿会产生差异
ctx.textBaseline = 'alphabetic';
ctx.fillStyle = '#069';
ctx.font = '16px "Times New Roman"';
ctx.fillText('FingerprintJS 🤓', 10, 30);
// 绘制复杂图形 - 增加熵值
ctx.strokeStyle = '#06f';
ctx.arc(150, 25, 15, 0, Math.PI * 2);
ctx.stroke();
// 获取像素数据并哈希
const data = canvas.toDataURL('image/png');
return hashString(data); // 生成哈希值作为指纹
}
fingerprintjs（GitHub 26.4k stars）的 Canvas 实现更加复杂：
// 来自 fingerprintjs/src/sources/canvas.ts
function renderTextImage(canvas, context) {
// 绘制多行文字，使用多种字体和 emoji
const text = 'Cwm fjordbank glyphs vext quiz 😃';
context.font = '14px Arial';
context.fillText(text, 2, 20);
// 绘制几何图形
context.beginPath();
context.moveTo(100, 5);
context.lineTo(120, 35);
context.stroke();
}
// 关键：检测 Canvas Farbling（噪声注入）
function isCanvasStable(canvas) {
const img1 = canvas.toDataURL();
const img2 = canvas.toDataURL();
return img1 === img2; // Brave 等浏览器会注入噪声，两次读取结果不同
}
Canvas 指纹的可怕之处在于它利用了合法的 Web API。网站可以说"我只是想画个图表"，实际上却在偷取你的指纹。你无法完全禁用 Canvas，否则大量网站（包括图表库、游戏、视频编辑）都会失效。
如果说 Canvas 指纹是"笔迹"，那 WebGL 指纹就是"DNA 检测"——它直接读取你的显卡型号和驱动信息。
WebGL（Web Graphics Library）是浏览器中的 3D 图形 API。它的指纹信息主要来源：
WEBGL_debug_renderer_info 扩展获取真实的显卡型号MAX_TEXTURE_SIZE、MAX_VIEWPORT_DIMS 等参数function getWebGLFingerprint() {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) return null;
const result = [];
// 基础参数
result.push('vendor:' + gl.getParameter(gl.VENDOR));
result.push('renderer:' + gl.getParameter(gl.RENDERER));
result.push('version:' + gl.getParameter(gl.VERSION));
result.push('shadingLanguageVersion:' + gl.getParameter(gl.SHADING_LANGUAGE_VERSION));
// 关键：获取真实的 GPU 信息（如果扩展可用）
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
if (debugInfo) {
result.push('unmaskedVendor:' + gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL));
result.push('unmaskedRenderer:' + gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
}
// 能力参数 - 这些因 GPU 而异
result.push('maxTextureSize:' + gl.getParameter(gl.MAX_TEXTURE_SIZE));
result.push('maxViewportDims:' + gl.getParameter(gl.MAX_VIEWPORT_DIMS));
result.push('maxVertexAttribs:' + gl.getParameter(gl.MAX_VERTEX_ATTRIBS));
return result.join('|');
}
除了基础参数，还可以通过实际渲染来生成指纹：
// 来自 beefproject/beef 的 WebGL 指纹实现
function getAdvancedWebGLFingerprint() {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
// 创建着色器程序
const vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, `attribute vec2 attrVertex; void main() { gl_Position = vec4(attrVertex, 0.0, 1.0); } `);
gl.compileShader(vShader);
const fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, `precision mediump float; void main() { gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0); } `);
gl.compileShader(fShader);
// 链接着色器并绘制
const program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);
// 读取像素 - 不同 GPU 渲染结果有细微差异
const pixels = new Uint8Array(4);
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
return pixels.join(',');
}
1. 唯一性极高：GPU 型号 + 驱动版本的组合几乎是唯一
2. 难以伪造：除非使用虚拟机或模拟器，否则无法欺骗真实的 GPU
3. 跨会话稳定：除非更换显卡或驱动，否则指纹基本不变
但有个致命弱点：某些浏览器（如 Tor Browser）完全禁用 WebGL，或者某些隐私插件会拦截 WEBGL_debug_renderer_info 扩展。
如果说 Canvas 和 WebGL 是"视觉指纹"，那 Audio 指纹就是"听觉指纹"——通过音频处理管道的微小差异来识别设备。
Audio 指纹的原理是利用 AudioContext API：
为什么会产生差异？
async function getAudioFingerprint() {
try {
const AudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
if (!AudioContext) return null;
// 创建离线音频上下文
const context = new AudioContext(1, 44100, 44100);
// 创建振荡器（音源）
const oscillator = context.createOscillator();
oscillator.type = 'triangle';
oscillator.frequency.setValueAtTime(10000, 0);
// 创建压缩器 - 关键！不同设备的压缩算法有差异
const compressor = context.createDynamicsCompressor();
compressor.threshold.setValueAtTime(-50, 0);
compressor.knee.setValueAtTime(40, 0);
compressor.ratio.setValueAtTime(12, 0);
compressor.attack.setValueAtTime(0, 0);
compressor.release.setValueAtTime(0.25, 0);
// 连接节点
oscillator.connect(compressor);
compressor.connect(context.destination);
// 播放并获取音频数据
oscillator.start(0);
const renderedBuffer = await context.startRendering();
// 提取特征点（取特定时间点的样本）
const channelData = renderedBuffer.getChannelData(0);
const samples = [];
for (let i = 4500; i < 5000; i += 10) {
samples.push(channelData[i].toFixed(10));
}
return hashString(samples.join(','));
} catch (e) {
return null;
}
}
Audio 指纹的优势在于它不太受软件版本影响，更多取决于硬件（声卡/音频芯片）。这意味着：
除了三大核心指纹技术，还有很多"小而美"的指纹维度：
检测已安装的字体列表：
function getFontFingerprint() {
const baseFonts = ['Arial', 'Times New Roman', 'Courier New'];
const testFonts = ['Helvetica', 'Georgia', 'Verdana', 'Tahoma'];
const detected = [];
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 使用基线字体测量文本宽度
ctx.font = '72px ' + baseFonts[0];
const baselineWidth = ctx.measureText('mmmmmmmmlli').width;
// 测试每种字体
testFonts.forEach(font => {
ctx.font = '72px "' + font + '", ' + baseFonts[0];
const width = ctx.measureText('mmmmmmmmlli').width;
if (width !== baselineWidth) {
detected.push(font);
}
});
return detected.join(',');
}
function getHardwareFingerprint() {
return {
deviceMemory: navigator.deviceMemory, // RAM（GB）
hardwareConcurrency: navigator.hardwareConcurrency, // CPU 核心数
maxTouchPoints: navigator.maxTouchPoints, // 触摸点数
platform: navigator.platform,
};
}
function getTimezoneFingerprint() {
return {
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
timezoneOffset: new Date().getTimezoneOffset(),
languages: navigator.languages,
language: navigator.language,
};
}
既然指纹技术如此强大，有没有办法防御呢？答案是——有，但不完美。
这是Brave 浏览器首创的技术，后来被 Firefox 采用。
原理：在 Canvas 读取像素数据时，向某些像素注入微小的随机噪声（通常是 RGB 值的±1）。人眼无法察觉，但会破坏指纹哈希的稳定性。
// Brave 的 Farbling 原理示意
const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype.toDataURL = function (...args) {
const data = originalToDataURL.apply(this, args);
// 注入基于会话的伪随机噪声
return addFarblingNoise(data, getSessionSeed());
};
检测 Farbling 的方法（来自 fingerprintjs）：
function detectCanvasFarbling() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, 1, 1);
const data1 = canvas.toDataURL();
const data2 = canvas.toDataURL();
return data1 !== data2; // 如果两次读取不同，说明有 Farbling
}
隐私插件（如 ScriptSafe）会拦截对 WEBGL_debug_renderer_info 的访问：
// 防追踪脚本的典型做法
const originalGetExtension = WebGLRenderingContext.prototype.getExtension;
WebGLRenderingContext.prototype.getExtension = function (name) {
if (name === 'WEBGL_debug_renderer_info') {
return null; // 返回 null，阻止获取真实 GPU 信息
}
return originalGetExtension.call(this, name);
};
现代浏览器开始减少 User Agent 的熵值：
// 过去的 User Agent（信息丰富）
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
// (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.0
// 未来的 User Agent（精简版）
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
// (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.0
// 版本号将简化为主要版本
Tor Browser 采取了最激进的反指纹措施：
代价是：网站兼容性极差，很多现代 Web 应用无法在 Tor Browser 中正常运行。
npm install @fingerprintjs/fingerprintjs
import FingerprintJS from '@fingerprintjs/fingerprintjs';
async function getVisitorId() {
// 加载指纹库
const fp = await FingerprintJS.load();
// 获取指纹结果
const result = await fp.get();
// 输出访客 ID（稳定标识符）
console.log('Visitor ID:', result.visitorId);
// 查看各个组件
console.log('Components:', result.components);
return result;
}
// 实际项目中的使用场景（如 Grafana）
class BackendService {
async initDeviceID() {
try {
const fp = await FingerprintJS.load();
const result = await fp.get();
this.deviceID = result.visitorId;
} catch (error) {
console.error('Fingerprint failed:', error);
}
}
}
npm install guardian-js-free
import { load } from 'guardian-js-free';
async function getGuardianFingerprint() {
const guardian = await load();
const visitorId = await guardian.getVisitorId();
console.log('Guardian ID:', visitorId);
return visitorId;
}
如果你想自己实现（用于学习）：
class BrowserFingerprinter {
async getFingerprint() {
const components = await Promise.all([
this.getCanvasFingerprint(),
this.getWebGLFingerprint(),
this.getAudioFingerprint(),
this.getFontFingerprint(),
this.getHardwareInfo(),
this.getTimezoneInfo(),
]);
// 组合所有组件并哈希
const combined = components.join('::');
return this.hash(combined);
}
// ... 实现各个指纹方法
}
// 使用
const fingerprinter = new BrowserFingerprinter();
const id = await fingerprinter.getFingerprint();
console.log('Your fingerprint:', id);
如果你需要实现设备识别：
如果你想保护用户隐私：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online