深入浏览器指纹：Canvas、WebGL、Audio是如何暴露你的身份的？

优质文章学习记录

— 13 min read
你以为清除了Cookie就安全了？2025年约翰霍普金斯大学的研究首次证实：浏览器指纹追踪比你想象的更普遍，而且你几乎无法阻止它。

📋 目录

背景：Cookie时代的终结

还记得那些年困扰我们的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浏览器版本、操作系统中等
屏幕信息分辨率、颜色深度、可用分辨率低
时区语言时区偏移、首选语言低
字体列表已安装字体极高
插件信息浏览器插件列表中等
Canvas2D渲染像素差异极高
WebGLGPU型号、渲染器信息极高
Audio音频处理特征高
Hardware内存、CPU核心数中等

根据EFF的Panopticlick研究，在100万个样本中，94.2%的浏览器指纹都是唯一的。

打个比方：如果把User Agent比作你的名字，Canvas指纹就是你的笔迹，WebGL指纹是你的DNA——前者很容易伪造，后者几乎无法复制。

Canvas指纹：像素的秘密

原理剖析

Canvas指纹是浏览器指纹中最成熟、最稳定的技术之一。它的核心思想非常简单：让浏览器在Canvas上绘制特定内容，然后读取像素数据，不同浏览器/设备产生的像素差异就是指纹。

为什么会产生差异？主要原因包括：

  1. 显卡驱动差异：不同GPU渲染相同的图形会有细微差异
  2. 操作系统差异：Windows、macOS、Linux的字体渲染引擎不同
  3. 浏览器差异：Chrome、Firefox、Safari的Canvas实现有差异
  4. 抗锯齿算法：不同浏览器使用不同的抗锯齿策略

实战代码

functiongetCanvasFingerprint(){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');returnhashString(data);// 生成哈希值作为指纹}

真实案例

fingerprintjs（GitHub 26.4k stars）的Canvas实现更加复杂：

// 来自 fingerprintjs/src/sources/canvas.tsfunctionrenderTextImage(canvas, context){// 绘制多行文字，使用多种字体和emojiconst 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（噪声注入）functionisCanvasStable(canvas){const img1 = canvas.toDataURL();const img2 = canvas.toDataURL();return img1 === img2;// Brave等浏览器会注入噪声，两次读取结果不同}

为什么难以防御？

Canvas指纹的可怕之处在于它利用了合法的Web API。网站可以说"我只是想画个图表"，实际上却在偷取你的指纹。你无法完全禁用Canvas，否则大量网站（包括图表库、游戏、视频编辑）都会失效。

WebGL指纹：GPU的指纹

如果说Canvas指纹是"笔迹"，那WebGL指纹就是"DNA检测"——它直接读取你的显卡型号和驱动信息。

原理剖析

WebGL（Web Graphics Library）是浏览器中的3D图形API。它的指纹信息主要来源：

  1. GPU型号：通过WEBGL_debug_renderer_info扩展获取真实的显卡型号
  2. 渲染管道差异：不同GPU执行相同的着色器程序会产生细微差异
  3. 扩展支持：不同的GPU支持不同的WebGL扩展
  4. 参数限制：MAX_TEXTURE_SIZE、MAX_VIEWPORT_DIMS等参数

实战代码

functiongetWebGLFingerprint(){const canvas = document.createElement('canvas');const gl = canvas.getContext('webgl')|| canvas.getContext('experimental-webgl');if(!gl)returnnull;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('|');}

高级技术：WebGL渲染指纹

除了基础参数，还可以通过实际渲染来生成指纹：

// 来自beefproject/beef的WebGL指纹实现functiongetAdvancedWebGLFingerprint(){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 =newUint8Array(4); gl.readPixels(0,0,1,1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);return pixels.join(',');}

为什么WebGL指纹如此强大？

1. 唯一性极高：GPU型号+驱动版本的组合几乎是唯一的
2. 难以伪造：除非使用虚拟机或模拟器，否则无法欺骗真实的GPU
3. 跨会话稳定：除非更换显卡或驱动，否则指纹基本不变

但有个致命弱点：某些浏览器（如Tor Browser）完全禁用WebGL，或者某些隐私插件会拦截WEBGL_debug_renderer_info扩展。

Audio指纹：声音里的身份

如果说Canvas和WebGL是"视觉指纹"，那Audio指纹就是"听觉指纹"——通过音频处理管道的微小差异来识别设备。

原理剖析

Audio指纹的原理是利用AudioContext API：

  1. 创建一个离线的AudioContext
  2. 生成一个特定的音频信号（通常是正弦波或压缩信号）
  3. 通过音频处理节点（如DynamicsCompressorNode）
  4. 读取处理后的音频样本
  5. 不同设备的音频处理硬件和软件会导致微小的差异

为什么会产生差异？

  • 采样率转换：不同系统使用不同的重采样算法
  • 浮点精度：CPU处理浮点运算的精度差异
  • 音频驱动：操作系统音频驱动层的实现差异

实战代码

asyncfunctiongetAudioFingerprint(){try{const AudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;if(!AudioContext)returnnull;// 创建离线音频上下文const context =newAudioContext(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));}returnhashString(samples.join(','));}catch(e){returnnull;}}

Audio指纹的稳定性

Audio指纹的优势在于它不太受软件版本影响，更多取决于硬件（声卡/音频芯片）。这意味着：

  • ✅ 跨浏览器稳定：Chrome和Firefox在同一个设备上会产生相似的音频指纹
  • ✅ 难以软件欺骗：单纯的浏览器插件难以模拟硬件级音频特征
  • ⚠️ 但不够唯一：相比Canvas和WebGL，Audio指纹的区分度稍低，通常作为辅助指纹使用

其他指纹维度

除了三大核心指纹技术，还有很多"小而美"的指纹维度：

1. 字体指纹

检测已安装的字体列表：

functiongetFontFingerprint(){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(',');}

2. 硬件信息

functiongetHardwareFingerprint(){return{deviceMemory: navigator.deviceMemory,// RAM（GB）hardwareConcurrency: navigator.hardwareConcurrency,// CPU核心数maxTouchPoints: navigator.maxTouchPoints,// 触摸点数platform: navigator.platform,};}

3. 时区和语言

functiongetTimezoneFingerprint(){return{timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,timezoneOffset:newDate().getTimezoneOffset(),languages: navigator.languages,language: navigator.language,};}

反指纹技术：现代浏览器的防御

既然指纹技术如此强大，有没有办法防御呢？答案是——有，但不完美。

1. Canvas Farbling（随机化噪声）

这是Brave浏览器首创的技术，后来被Firefox采用。

原理：在Canvas读取像素数据时，向某些像素注入微小的随机噪声（通常是RGB值的±1）。人眼无法察觉，但会破坏指纹哈希的稳定性。

// Brave的Farbling原理示意const originalToDataURL =HTMLCanvasElement.prototype.toDataURL;HTMLCanvasElement.prototype.toDataURL=function(...args){const data =originalToDataURL.apply(this, args);// 注入基于会话的伪随机噪声returnaddFarblingNoise(data,getSessionSeed());};

检测Farbling的方法（来自fingerprintjs）：

functiondetectCanvasFarbling(){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}

2. WebGL扩展拦截

隐私插件（如ScriptSafe）会拦截对WEBGL_debug_renderer_info的访问：

// 防追踪脚本的典型做法const originalGetExtension =WebGLRenderingContext.prototype.getExtension;WebGLRenderingContext.prototype.getExtension=function(name){if(name ==='WEBGL_debug_renderer_info'){returnnull;// 返回null，阻止获取真实GPU信息}returnoriginalGetExtension.call(this, name);};

3. User Agent标准化

现代浏览器开始减少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// 版本号将简化为主要版本

4. Tor Browser的极端策略

Tor Browser采取了最激进的反指纹措施：

  • 完全禁用WebGL
  • 统一所有用户的User Agent（都显示为Windows 7 + Firefox ESR）
  • 标准化屏幕分辨率（仅报告几种常见尺寸）
  • 禁用Canvas读取（或返回空白数据）
  • 禁用所有时区检测（统一使用UTC）

代价是：网站兼容性极差，很多现代Web应用无法在Tor Browser中正常运行。

实战：用开源库生成你的指纹

方案1：FingerprintJS（最流行）

npminstall @fingerprintjs/fingerprintjs 
import FingerprintJS from'@fingerprintjs/fingerprintjs';asyncfunctiongetVisitorId(){// 加载指纹库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）classBackendService{asyncinitDeviceID(){try{const fp =await FingerprintJS.load();const result =await fp.get();this.deviceID = result.visitorId;}catch(error){ console.error('Fingerprint failed:', error);}}}

方案2：GuardianJS（免费开源）

npminstall guardian-js-free 
import{ load }from'guardian-js-free';asyncfunctiongetGuardianFingerprint(){const guardian =awaitload();const visitorId =await guardian.getVisitorId(); console.log('Guardian ID:', visitorId);return visitorId;}

方案3：纯浏览器API实现

如果你想自己实现（用于学习）：

classBrowserFingerprinter{asyncgetFingerprint(){const components =await Promise.all([this.getCanvasFingerprint(),this.getWebGLFingerprint(),this.getAudioFingerprint(),this.getFontFingerprint(),this.getHardwareInfo(),this.getTimezoneInfo(),]);// 组合所有组件并哈希const combined = components.join('::');returnthis.hash(combined);}// ... 实现各个指纹方法}// 使用const fingerprinter =newBrowserFingerprinter();const id =await fingerprinter.getFingerprint(); console.log('Your fingerprint:', id);

总结与思考

核心要点回顾

  1. 浏览器指纹利用了Web的开放性：它不需要Cookie，不违反任何协议，只是"读取浏览器本来就公开的信息"。
  2. 三大核心技术：
    • Canvas指纹：2D渲染差异，利用显卡驱动和字体渲染的不同
    • WebGL指纹：GPU型号和渲染管道特征，几乎无法伪造
    • Audio指纹：音频处理差异，硬件级特征
  3. 2025年的新趋势：
    • 学术研究首次实证指纹用于广告追踪
    • Google政策转向，Privacy Sandbox拥抱指纹技术
    • 浏览器厂商加大反指纹力度（Farbling成为标准）

给开发者的建议

如果你需要实现设备识别：

  • 优先考虑服务器端Session + 登录态
  • 如果需要客户端识别，可以使用FingerprintJS等成熟库
  • 永远不要将指纹用于违法追踪或侵犯隐私

如果你想保护用户隐私：

  • 教育用户使用Brave、Firefox等注重隐私的浏览器
  • 安装Privacy Badger、uBlock Origin等扩展
  • 对于高安全需求，考虑使用Tor Browser

给普通用户的建议

  1. 不要迷信"无痕模式"：它只清除本地数据，无法阻止指纹追踪
  2. 安装隐私扩展：uBlock Origin、Privacy Badger能有效阻止大部分追踪
  3. 使用隐私浏览器：Brave的Farbling是目前最有效的反指纹手段
  4. 接受现实：完全的匿名在当前Web技术下几乎不可能，除非你准备好牺牲便利性

参考链接

Read more

【前端】Vue3+elementui+ts，TypeScript Promise＜string＞转string错误解析，习惯性请出DeepSeek来解答

【前端】Vue3+elementui+ts，TypeScript Promise＜string＞转string错误解析，习惯性请出DeepSeek来解答

🌹欢迎来到《小5讲堂》🌹 🌹这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹 目录 * 前言 * 报错信息 * DeepSeek解答 * 问题原因 * 解决方案 * 最佳实践 * 异步和同步 * 1. 同步（Synchronous）操作 * 示例：同步数据更新 * 2. 异步（Asynchronous）操作 * 示例 1：`setTimeout` * 示例 2：`async/await` * 3. Vue 3 的异步更新机制 * 如何等待 DOM 更新？ * 4. 生命周期钩子中的异步 * 5. 总结 * 最佳实践 * 文章推荐 前言 好久没有写前端，

【web小工具】dirsearch 安装，用法，例题

原文链接：21.dirsearch：Web 路径扫描工具-ZEEKLOG博客 有错误请各位大佬多多指教~~~ 一、项目介绍 dirsearch 是一款高效、多线程的 Web 路径扫描工具，专为渗透测试人员和网络安全研究人员设计，用于发现目标网站的隐藏目录、敏感文件及未授权接口。其支持自定义字典、代理配置、请求头伪装等功能，适用于红队渗透、漏洞挖掘及资产测绘等场景。 1.1 核心功能 多线程扫描：默认 20 线程，可自定义调整以提高效率。 智能错误处理：自动过滤重复状态码（如 404），降低误报率。 灵活扩展支持： 支持自定义字典（如 -w 指定字典文件）。 支持多种扩展名扫描（如 -e php,asp,aspx）。 结果输出：生成可读性强的报告（TXT/JSON/CSV）

前端安全：别让你的网站成为黑客的游乐场

前端安全：别让你的网站成为黑客的游乐场 毒舌时刻 前端安全？这不是后端的事吗？ "我只是个前端，安全关我什么事？"——结果网站被XSS攻击，用户信息泄露， "我用了框架，应该很安全吧？"——结果框架有漏洞，被人轻松突破， "我的网站小，没人会攻击的"——结果被黑客当作练手的靶子。 醒醒吧，前端安全不是可有可无的，而是必须重视的！ 为什么你需要这个？ * 保护用户数据：防止用户信息被窃取 * 维护网站声誉：避免安全事件影响品牌形象 * 遵守法律法规：如GDPR、CCPA等数据保护法规 * 防止业务损失：避免因安全问题导致的经济损失 反面教材 // 反面教材：直接拼接HTML字符串 function renderUserInput() { const userInput = document.getElementById('user-input').value; // 危险！直接将用户输入插入到DOM中