跳舞的线岩石摇滚最新版
57.66M · 2025-09-13
点赞 + 收藏 === 学会???
浏览器指纹，是用来唯一标识你浏览器的一组“特征值”。它不是我们理解中的那种真实指纹，而是通过收集浏览器、操作系统、设备分辨率、字体、插件等信息，组合成的一个独特 ID。
和传统的 Cookie 不同，浏览器指纹不需要在用户设备上存储任何东西，完全是“读取现有信息”来识别用户。
在最近的项目中，有个小需求：想用用户的设备作为唯一凭证，来验证身份。
一开始我想着简单粗暴点，用 JS 获取手机的 IMEI 或 PC 的序列号。但查了下资料后才发现，这根本行不通——JS 根本没权限访问这些底层硬件信息，安全机制早就把这条路堵死了。
后来才反应过来，我真正想要的，是一个“设备唯一标识”，也就是——浏览器指纹。
查阅了一些资料之后，目前比较常见的几种浏览器指纹方案如下：
当然，单一方案识别率可能不高，但多种信息结合后，指纹的唯一性就会明显提升。
Navigator 是前端获取浏览器和部分设备环境信息的重要接口。
下面是一些常用的属性和方法（跨浏览器兼容性较好的为主）：
偷个懒，让Tare直接帮我写个Navigator 指纹示例吧。
<!DOCTYPE html><html><head> <title>Navigator 指纹示例</title></head><body> <h2>Navigator 指纹示例</h2> <pre id="output"></pre> <script> async function getNavigatorFingerprint() { // 收集 navigator 相关信息 const data = { userAgent: navigator.userAgent, platform: navigator.platform, language: navigator.language, languages: navigator.languages, cookieEnabled: navigator.cookieEnabled, hardwareConcurrency: navigator.hardwareConcurrency || 'N/A', deviceMemory: navigator.deviceMemory || 'N/A', webdriver: navigator.webdriver || false, }; // 将数据转成字符串 const dataString = JSON.stringify(data); // 计算 SHA-256 哈希 const hashBuffer = await crypto.subtle.digest( "SHA-256", new TextEncoder().encode(dataString) ); // 转成十六进制字符串 const hashArray = Array.from(new Uint8Array(hashBuffer)); const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); return { data, fingerprint: hashHex }; } getNavigatorFingerprint().then(result => { const output = document.getElementById('output'); output.textContent = "采集到的 Navigator 信息:n" + JSON.stringify(result.data, null, 2) + "nn生成的指纹（SHA-256）:n" + result.fingerprint; }); </script></body></html>代码生成完毕，点击应用直接预览：
经过测试，在同一个电脑上，这个指纹是稳定的，多次执行，这个值不会变。
但这这个指纹明显有缺陷，我系统语言或者浏览器升级后，这个指纹肯定会改变。
由于不同设备（包括操作系统、显卡、驱动、字体渲染引擎等）在绘制同一段 Canvas 内容时会存在细微差异，最终得到的图像数据（通常是像素或转成 base64）在不同设备上往往是不同的。
这些细微差异生成的哈希值就是“指纹”，由于只与设备性能有关，指纹稳定性显然比Navigator 指纹高一些。
<!DOCTYPE html><html><head> <title>简单Canvas指纹示例</title></head><body> <h2>简单Canvas指纹示例</h2> <p>请打开控制台(F12)查看结果</p> <script> // 创建一个简单的Canvas指纹生成函数 function generateCanvasFingerprint() { // 创建canvas元素 const canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 100; // 获取绘图上下文 const ctx = canvas.getContext('2d'); // 填充背景 ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制一些图形和文字 // 绘制红色矩形 ctx.fillStyle = 'red'; ctx.fillRect(20, 20, 50, 50); // 绘制蓝色圆形 ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(120, 45, 25, 0, Math.PI * 2); ctx.fill(); // 绘制文本 ctx.fillStyle = 'black'; ctx.font = '16px Arial'; ctx.fillText('Canvas指纹', 60, 80); // 获取canvas数据URL const dataURL = canvas.toDataURL(); // 简单哈希函数 function simpleHash(str) { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; // 转换为32位整数 } return hash.toString(16); // 转换为16进制 } // 计算指纹 const fingerprint = simpleHash(dataURL); return { fingerprint: fingerprint, dataURL: dataURL }; } // 生成并输出指纹 const result = generateCanvasFingerprint(); console.log('Canvas指纹:', result.fingerprint); console.log('Canvas数据URL前100个字符:', result.dataURL.substring(0, 100) + '...'); // 如果浏览器支持更安全的哈希算法，也可以使用它 if (window.crypto && window.crypto.subtle) { const encoder = new TextEncoder(); const data = encoder.encode(result.dataURL); window.crypto.subtle.digest('SHA-256', data) .then(hashBuffer => { // 将哈希缓冲区转换为十六进制字符串 const hashArray = Array.from(new Uint8Array(hashBuffer)); const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); console.log('Canvas指纹(SHA-256):', hashHex); }); } </script></body></html>
其他几种方式生成浏览器指纹都大同小异，这里就不介绍了。
2025-09-13
微软 Win11 预览版 26x20.6682 扩展 Xbox 手柄交互：长按进入任务视图
2025-09-13
微软 Visual Studio 2026 推荐 64GB 内存和 16 核 CPU 引热议，架构师解释称方便程序员申请更好的电脑
