JavaScript浏览器指纹识别实现方法

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JavaScript实现浏览器指纹识别教程》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

浏览器指纹识别依赖JS采集稳定特征生成哈希，主流浏览器中仍可用的包括navigator.platform、screen尺寸、colorDepth、availWidth/availHeight、timeZone及WebGL参数，但plugins和字体枚举已基本失效。

浏览器指纹识别在现代 Web 开发中主要用于反爬、风控或设备去重，但JavaScript 无法直接“识别”完整指纹——它只能采集可访问的环境特征，拼成一个高区分度的哈希值；且受浏览器策略（如 Safari 的 ITP、Firefox 的 ETP）限制，很多传统指标已失效或返回恒定值。

哪些 JS API 能稳定采集指纹特征

不是所有属性都可靠。以下字段在主流浏览器（Chrome 115+、Firefox 110+、Edge 115+）中仍具备一定区分度，且无需权限：

• navigator.userAgent：已弱化（Chrome 101+ 启用 UA-CH 后返回通用字符串），仅作辅助
• navigator.platform、navigator.hardwareConcurrency、screen.width/screen.height、screen.colorDepth：相对稳定，但虚拟机/远程桌面可能统一值
• self.screen.availWidth 和 self.screen.availHeight：比 screen.width 更难被脚本覆盖
• new Date().getTimezoneOffset()：注意时区可能被手动修改
• Intl.DateTimeFormat().resolvedOptions().timeZone：更准确的时区，但部分隐私模式下返回 "undefined"
• canvas.getContext('2d').getImageData(0,0,1,1)：绘制文本后读取像素，可反映 GPU/字体渲染差异；但 Firefox 112+ 默认禁用跨域 canvas 读取，需确保同源

为什么 navigator.plugins 和 fonts 指纹越来越不可靠

这两个曾是强区分项，现在基本失效：

• navigator.plugins：Chrome 110+、Edge 115+ 已返回空数组；Firefox 默认隐藏插件列表（除非用户启用 privacy.resistFingerprinting 为 false）
• 字体枚举（如 document.fonts.check() 或 FontFaceSet.check()）：必须显式加载字体才能检测，且多数现代字体已预装；Safari 完全禁止 JS 查询系统字体
• WebGL 指纹：gl.getParameter(gl.RENDERER) 等仍可用，但需创建上下文，开销大，且 Brave/FF 隐私模式会返回伪造值

如何避免被识别为自动化工具（关键坑点）

采集本身不触发风控，但行为模式会暴露风险：

• 不要在页面加载完成前立即采集：等 DOMContentLoaded 后延时 100ms+，模拟真实用户节奏
• 避免高频重复调用 canvas/WebGL：单页生命周期内最多采集 1–2 次，否则可能被判定为扫描行为
• 不要依赖 document.hidden 为 false 才采集：后台标签页也能正常运行 JS，反而显得异常
• 禁用 fetch 或 XMLHttpRequest 上报指纹：服务端应通过 Referer 或 User-Agent 关联请求，而非前端主动推送
• 注意 localStorage 写入：某些风控 SDK 会监听 storage 变更，建议只读不写

简单指纹哈希示例（仅作理解，勿直接用于生产）

以下代码仅组合几个低干扰字段生成简易 hash，不包含 canvas/WebGL 等高风险操作：

function getBasicFingerprint() {
  const parts = [
    navigator.platform,
    screen.width + 'x' + screen.height,
    screen.colorDepth,
    Intl.DateTimeFormat().resolvedOptions().timeZone || '',
    navigator.hardwareConcurrency || 0,
    self.screen.availWidth + 'x' + self.screen.availHeight
  ];
  return btoa(parts.join('|')).substring(0, 16); // 简单 base64 截断，实际应使用 sha256
}

真正可用的指纹方案必须做特征加权、降噪（如过滤虚拟机共性值）、并定期校验各字段稳定性——这些远超单个 JS 函数能解决的范围。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~