大家好，今天我们来聊聊浏览器指纹的一种类型——Client Rects。早在2016年，用户就开始讨论这种指纹，因为当时 browserleaks 检测工具中出现了一个简单的方式来检查它。当时，这种指纹看起来似乎很容易修改。但实际上，要自然地修改它并让它无法被检测，比看起来难得多。即使到今天，市面上大多数流行的解决方案都无法高质量地修改这种指纹。
首先，我们用简单的话来解释什么是 Client Rects。Client Rects 是浏览器中的一种技术，它可以提供网页中某些元素的位置和大小信息。
这些元素可以是各种类型的：文本输入框、按钮、下拉菜单、表格或其他 HTML 元素。
大小信息包括元素的宽度和高度，以像素为单位。
位置信息包括元素左上角（left 或 X；top 或 Y）和右下角（right 和 bottom）相对于浏览器视口的位置坐标。
收集到的这些信息就叫做“rects”（矩形）。在下图中，你可以更清晰地看到它们的含义。
现在我们来更详细地分析一下 Client Rects 指纹是如何被收集的，以 browserleaks.com[https://browserleaks.com/] 的检测工具为例：rects。
这个网站使用三个元素（String 1、2、3）来生成指纹。打开页面后，Browserleaks 会收集每个元素的位置（x、y、right、bottom）和大小（宽高）数据。正如你所看到的，这些数据不是整数，而是小数点后精确到16位的高精度浮点数。
当必要数据收集完成后，Browserleaks 会将每个元素的信息处理成哈希值（Hash String 1、2、3），最后组合成一个完整的哈希值（Full Hash）——这就是 Client Rects 指纹。
这是最基础的 Client Rects 指纹生成示例。而像 https://privacycheck.sec.lrz.de/active/fp_gcr/fp_getclientrects.html 这样的检测工具使用了更复杂的方法，涉及更多 HTML 元素。现代的反欺诈系统也会使用更先进的方法收集这个指纹，并与数据库对比，结合其他追踪技术和 IP 地址来识别用户和阻止多账户操作。
反欺诈系统之所以能用这个指纹来识别用户、追踪行为和阻止多账户，主要是因为这些参数在不同设备之间存在细微差异。如果你在两台电脑上打开 Client Rects 检测工具，即使三个元素看起来完全相同，它们的参数值也会略有不同，导致三个哈希值和完整哈希值都不同。即使只是像素差距的万分之一，也足以影响最终指纹。
以下是在两台 Windows 10 设备上使用 Chrome 浏览器生成的 Client Rects 指纹对比截图：
接下来出现一个合乎逻辑的问题：哪些变量会导致两台设备上这些参数的差异？答案很简单——非常多！设备类型、操作系统版本、显卡、显示器、分辨率、系统缩放比例、浏览器类型、浏览器版本、页面缩放级别、字体设置等等，都会影响这些参数和指纹。
举一个在 Chrome 浏览器中的例子：用手机访问是一个指纹，用笔记本电脑是另一个；连接2K屏是一个指纹，换4K屏又是另一个；从Win10换到Win11，指纹会变；将系统缩放从100%改为125%，又会变；用集显运行浏览器是一个，换独显又是一个。可以想象变量之多。
以下是 Chrome 浏览器在 Windows 10 系统下，不同缩放比例下生成的 Client Rects 指纹差异示例：
如果你每个月需要注册几十、几百甚至几千个账户，那每次都换设备、换显卡、换分辨率或把网页缩小到看不见是不可行的。所以，最好的解决方案是使用一个能高质量伪装指纹的高级反检测浏览器。
修改 Client Rects 指纹的方法主要有两种：浏览器插件和反检测浏览器。下面我们分别来看它们的优缺点。
使用插件是最简单的方法，但存在明显缺陷：
- 插件可能被检测。反欺诈系统可以识别浏览器中安装了哪些插件。如果检测到你用了修改指纹的插件，那将是一个显著的红旗信号。
- 指纹伪装质量低。插件通常使用的是粗糙的技术，伪装效果差，容易被识别。
- 不是修改而是阻止。有些插件并不真正修改 Client Rects，而是直接阻止它返回数据，这反而让它更容易被检测出来，而且可能会导致页面显示错误。
插件仅适合做辅助防护，但不推荐在多账户或商业用途中使用。Firefox 上较流行的插件有 CanvasBlocker、Trace、Chameleon；Chrome 上有 ClientRects Fingerprint Defender、Trace 等。
使用反检测浏览器是目前修改 Client Rects 指纹最有效的方式。但不能随便选择，需要找到技术足够成熟的产品。
大多数插件或浏览器通过在 Client Rects 中加入“噪点”（如不可见像素）来让元素尺寸发生微小变化，这种方式很容易被检测出来。
新一代的 Linken Sphere 采用了不同方式——内置缩放机制。这种机制在约80%的会话中可以提供完美的指纹伪装效果。
有时，仅通过对比普通浏览器和反检测浏览器的检测结果，就能判断伪装质量，无需复杂的技术分析。
下图展示了 Chrome、Linken Sphere 2 代和某款其他反检测浏览器在 browserleaks 测试中的表现。元素的畸变程度一目了然。
我们推荐使用 CreepJS 作为检测工具。它不仅能检测指纹是否暴露，还能评估修改质量。在启用伪装后，打开“Browser”标签页，找到“lies”字段。
“lies”的值应为“none”，如左图所示。如果伪装被识别，这个字段会被高亮，并标注出错误数量。点击字段可以查看详细信息。常见的错误包括：Element.getClientRects、Range.getClientRects、DOMRect.height、DOMRectReadOnly.top 等。
下图是 Client Rects 被识别后，检测出的错误示例：
现在我们来比较 CreepJS 在 Linken Sphere 2 和另一款反检测浏览器中的检测结果：
通过这个工具，我们可以清楚地看到伪装是否被识别。而 Linken Sphere 没有暴露这些问题。
公平地说，旧版 Linken Sphere 在 Client Rects 指纹方面并不完美，因此我们曾建议只在必要时使用。
以下是 Linken Sphere 2 和 Linken Sphere 9 在指纹伪装效果上的对比：
总结一下：伪装浏览器指纹的目标不仅是唯一性，更重要的是不能被检测。要达到这个目标，必须使用采用现代化技术的高质量产品。这样你才能事半功倍，取得最佳效果！
