BOM如何实现页面指纹识别？

一分耕耘，一分收获！既然打开了这篇文章《BOM如何实现页面指纹识别？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

BOM不能独立实现高精度页面指纹识别，但可作为特征点之一。1. BOM提供浏览器环境属性，如userAgent、platform、screen信息等，用于构建用户指纹片段；2. 实际中需将这些数据组合并计算哈希值，形成初步指纹；3. 单独使用BOM存在局限，包括熵值低、易伪造、动态性强；4. 提升精度需结合Canvas、WebGL、AudioContext等高熵技术，形成综合指纹；5. 开发者应权衡安全与隐私，遵循透明化、最小化、合规化原则。

用BOM（Browser Object Model）直接实现“页面指纹识别”这个说法，其实有点过于简化了。更准确地说，BOM提供了一系列浏览器环境的属性和方法，这些数据可以作为构建用户指纹的“特征点”之一，但它本身并不能独立完成一个高精度的、独一无二的指纹识别。指纹识别的目的是尽可能地识别出同一用户或同一设备，即使他们清除Cookie或使用无痕模式。BOM能提供的信息有限，但作为拼图的一部分，它确实有其作用。

解决方案

要利用BOM的数据来辅助页面指纹识别，我们主要关注window、navigator、screen、history、location等对象提供的属性。这些属性组合起来，可以在一定程度上描绘出用户所使用的浏览器和设备环境。

具体来说，我们可以收集以下信息：

1. navigator 对象：

   
   • navigator.userAgent: 包含浏览器类型、版本、操作系统等信息。虽然容易被修改，但仍是基础信息。
   • navigator.platform: 操作系统平台，如 "Win32", "MacIntel", "Linux x86_64"。
   • navigator.language 或 navigator.languages: 浏览器首选语言设置。
   • navigator.hardwareConcurrency: CPU核心数，能反映设备性能。
   • navigator.cookieEnabled: 是否启用Cookie。
   • navigator.doNotTrack: 用户是否设置了“请勿追踪”。
   • navigator.maxTouchPoints: 触摸屏支持的点数，对移动设备有意义。
   • navigator.vendor: 浏览器厂商信息，如 "Google Inc."。
   • navigator.productSub / navigator.appCodeName / navigator.appName / navigator.product / navigator.appVersion: 这些是传统但现在用处较小的属性，因为它们的值趋于一致或不准确。

2. screen 对象：

   • screen.width / screen.height: 屏幕的物理分辨率。
   • screen.availWidth / screen.availHeight: 屏幕可用区域（不包括系统任务栏等）。
   • screen.colorDepth / screen.pixelDepth: 屏幕颜色深度，通常是24或32位。
   • screen.orientation.type: 屏幕方向（横屏/竖屏），以及角度。

3. window 对象：

   • window.innerWidth / window.innerHeight: 浏览器视口宽度和高度。用户调整窗口大小会改变，但初始值仍有参考价值。
   • window.outerWidth / window.outerHeight: 浏览器窗口整体宽度和高度。
   • window.devicePixelRatio: 设备像素比，高DPI屏幕会是2或3。

4. history 和 location 对象：

   • history.length: 浏览器历史记录的条目数，虽然不直接用于指纹，但有时会被结合分析用户行为。
   • location.hostname / location.protocol: 当前页面的域名和协议，这更多是上下文信息，而非指纹本身。

将这些BOM属性值收集起来，形成一个数据对象，然后计算其哈希值。这个哈希值就可以作为这个浏览器环境的一个“指纹片段”。例如：

const getBOMFingerprint = () => {
  const data = {
    userAgent: navigator.userAgent,
    platform: navigator.platform,
    language: navigator.language,
    hardwareConcurrency: navigator.hardwareConcurrency,
    cookieEnabled: navigator.cookieEnabled,
    doNotTrack: navigator.doNotTrack,
    maxTouchPoints: navigator.maxTouchPoints,
    vendor: navigator.vendor,
    screenWidth: screen.width,
    screenHeight: screen.height,
    screenAvailWidth: screen.availWidth,
    screenAvailHeight: screen.availHeight,
    colorDepth: screen.colorDepth,
    pixelDepth: screen.pixelDepth,
    orientationType: screen.orientation ? screen.orientation.type : 'N/A',
    innerWidth: window.innerWidth,
    innerHeight: window.innerHeight,
    outerWidth: window.outerWidth,
    outerHeight: window.outerHeight,
    devicePixelRatio: window.devicePixelRatio,
    historyLength: history.length
  };
  // 简单地将对象转换为字符串，然后计算哈希
  // 实际应用中会用更稳定的哈希算法，并处理数据类型不一致等问题
  return JSON.stringify(data); // 这是一个非常简化的示例
};

// console.log(getBOMFingerprint());

这段代码展示了如何收集这些信息。实际的指纹识别系统会使用更复杂的哈希算法，并且会把这些数据与其他更高熵的信息结合起来。

BOM指纹识别的局限性有哪些？

说实话，单独依靠BOM数据来做指纹识别，效果并不理想。它有非常明显的局限性，导致其“指纹”的独特性和稳定性都不高。

一个核心问题是熵值太低。很多用户的BOM属性值都是一样的。比如，大量的Windows 10用户使用Chrome浏览器，他们的userAgent、platform、screen.width/height等可能完全相同。你很难区分出这些用户。这就好比你只知道一个人的性别和大致年龄，很难准确识别出具体是谁。

再者，这些信息很容易被伪造或修改。User-Agent字符串可以通过浏览器插件或开发者工具轻易更改。屏幕分辨率也可以通过调整显示设置或浏览器缩放来改变。甚至一些隐私保护工具会随机化或提供虚假的BOM属性值，这进一步降低了其识别的可靠性。

还有就是动态性。像window.innerWidth和window.innerHeight这样的视口尺寸，会随着用户调整浏览器窗口大小而变化。这意味着同一个用户在不同时间、不同窗口状态下，其BOM指纹会发生变化，这给追踪带来了麻烦，也使得基于这些变化的指纹变得不稳定。

最后，BOM数据缺乏高熵的唯一性特征。真正的“指纹”需要利用那些细微的、难以伪造且在不同设备上表现各异的特征。BOM更多地提供了“设备类型”和“浏览器类型”的信息，而非“特定设备实例”的唯一标识。

如何结合其他技术提升指纹识别的精度？

既然BOM数据本身不够强力，那么提升指纹识别精度，就必须引入更多、更高熵的浏览器特性。这才是真正构建有效指纹的关键。

最常用且有效的方法是结合Canvas指纹。浏览器在渲染HTML Canvas元素时，由于操作系统、显卡、驱动、字体渲染、浏览器版本等多种因素的差异，即使是相同的绘图指令，最终生成的像素数据也会有微小的不同。通过在Canvas上绘制特定的图形（如文字、几何图形），然后提取其像素数据并计算哈希值，可以得到一个相当独特的指纹。这是目前应用最广泛的指纹技术之一。

类似地，WebGL指纹也是一个高熵的来源。WebGL是用于在浏览器中渲染3D图形的API，它依赖于显卡和驱动程序。通过查询WebGL上下文的参数（如供应商、渲染器、着色器精度等）和渲染一个特定的3D场景并读取其像素数据，也能生成一个独特的指纹。

AudioContext指纹利用了浏览器音频栈的差异。即使是相同的音频数据，在不同的硬件和软件环境下，其处理和渲染结果也会有细微的浮点数差异。通过生成一个音频信号，然后对其进行处理（如应用滤波器、混响），并读取处理后的数据，可以得到另一个独特的指纹。

此外，还有字体指纹，通过检测用户系统上安装了哪些字体来生成指纹。这通常通过尝试加载一系列常见和不常见的字体，然后检查它们是否成功渲染来判断。

插件列表（虽然现代浏览器中插件的概念已弱化，但某些MIME类型或旧版ActiveX/Java插件仍可能泄露信息）和WebRTC的本地IP地址泄露（如果未正确配置VPN或浏览器保护）也曾被用于指纹识别，但随着浏览器安全性的提升，这些方法的有效性正在降低。

将这些不同来源的指纹特征（BOM数据、Canvas、WebGL、AudioContext、字体等）收集起来，进行交叉比对和组合，通过加权、机器学习等方式，可以构建一个更稳定、更独特的综合指纹。这就像拼图一样，BOM提供了一些边缘信息，而Canvas、WebGL等则提供了核心的、难以伪造的图像。

作为开发者，我们应如何看待指纹识别技术？

从一个开发者的角度来看，指纹识别技术是一个双刃剑，充满了技术挑战和伦理考量。

一方面，它在某些场景下确实有其合理且重要的用途。比如，安全领域。网站可以使用指纹识别来检测异常登录、防止账户盗用，或者识别恶意爬虫和自动化脚本。在金融和电商领域，它可以作为风控系统的一部分，帮助识别欺诈行为。对于内容提供商，指纹识别可以用于防止盗版和未授权的内容抓取。这些都是为了维护系统安全和业务正常运行的必要手段。

然而，指纹识别最受争议的一面是用户隐私。它允许网站在用户不知情或未经同意的情况下，跨会话、跨网站地追踪用户的行为，即使他们清除了Cookie或使用了隐私模式。这种持续的、隐蔽的追踪行为，严重侵犯了用户的隐私权和选择权。作为开发者，我们有责任思考我们的技术如何影响用户，并尽可能地尊重他们的隐私。

浏览器厂商也一直在与指纹识别技术进行“猫鼠游戏”。他们不断更新API，引入隐私保护措施，例如随机化某些高熵的API返回值、限制对某些敏感API的访问、或者提供更细粒度的权限控制。这使得指纹识别的难度越来越大，也促使开发者不断寻找新的、更隐蔽的特征。这种对抗是技术发展和隐私保护之间永恒的张力。

所以，作为开发者，我们应该保持一种审慎的态度。在确实需要指纹识别来解决实际安全或业务问题时，我们应该：

• 透明化：尽可能地告知用户我们正在收集哪些信息以及为什么收集。
• 最小化：只收集完成任务所必需的信息，避免过度收集。
• 安全存储：妥善保护收集到的数据，防止泄露。
• 遵守法规：确保我们的实践符合GDPR、CCPA等数据隐私法规。
• 探索替代方案：在可能的情况下，优先考虑使用更尊重隐私的解决方案，例如基于用户明确同意的身份验证机制，而不是隐蔽的指纹追踪。

理解这项技术的原理、能力和局限性，同时对其潜在的社会影响保持警觉，是我们作为负责任的开发者应有的姿态。

终于介绍完啦！小伙伴们，这篇关于《BOM如何实现页面指纹识别？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！