WebGL 技术在反欺诈系统和用户识别技术中的应用

01.11.24

WebGL（Web 图形库）是一种利用图形处理器（GPU）的强大功能在浏览器中渲染 3D 图形的强大技术。与 Canvas 不同，WebGL 不仅可以处理 2D 图形，还为网络开发人员开辟了 3D 渲染和 GPU 计算的新天地。由于 WebGL 能够生成独一无二的结果，它已在反欺诈系统中得到应用，其功能有助于通过独特的数字指纹跟踪和识别用户的设备。

#### 创建 WebGL 的历史和目的

WebGL 是作为 Canvas 的扩展而开发的，由 Khronos Group 组织于 2011 年首次推出。作为在网页上渲染图形的开放标准，WebGL 使取消 Flash 或 Java 等第三方插件成为可能，从而大大提高了网络应用程序的性能和安全性。

WebGL 通过增加对 3D 渲染的支持和改进 GPU 交互，扩展了 HTML5 和 JavaScript 的功能。这使它不仅适用于游戏、可视化和科学研究，还适用于反欺诈系统，WebGL 可以通过 “图形指纹 ”帮助唯一识别用户的设备。

#### WebGL 的技术能力

WebGL 为开发人员创建复杂图形提供了许多独特的工具：

- 处理 3D 图形。WebGL 支持使用硬件加速绘制复杂的 3D 模型和纹理。这样，您就可以创建具有高性能的逼真视觉对象。

- 访问着色器。WebGL 使用着色器（由 GPU 执行的程序），可以详细渲染对象，创建复杂的纹理效果和更高质量的图形。

- 动画和交互性。借助 WebGL 的功能，您可以构建动态网络应用程序，将科学数据可视化，并创建虚拟世界和交互式模拟等复杂模型。

这些功能使 WebGL 成为各种领域的工具，也是反欺诈系统中提供唯一性和欺诈保护的有用辅助工具。

#### 反欺诈系统中的 WebGL：防范欺诈者

现代反欺诈系统使用 WebGL 图形指纹来识别设备。与 Canvas 不同，WebGL 指纹不仅基于像素渲染，还取决于 GPU 和浏览器支持的功能。这有助于反欺诈系统为每台设备创建独一无二的指纹，并识别可疑活动。

##### WebGL 如何帮助识别用户？

在 WebGL 上渲染对象时，由于 GPU、着色器和驱动程序的硬件特性，不同的设备可能会产生细微的图像差异。影响渲染结果的因素包括

- GPU - 不同型号的 GPU 处理 3D 物体和纹理的方式不同。

- 支持的着色器和扩展 - 支持的着色器集合及其规格和精度因设备而异。

##### 浏览器设置和渲染功能。

反欺诈系统通过检测图形和特征层面的差异（如纹理尺寸和统一变量的最大值），利用这些特征创建独特的指纹。这些参数结合起来就形成了图形指纹，再加上其他数据，就能帮助识别用户。

##### 欺骗指纹的方法 ** WebGL**

欺诈者使用各种方法欺骗 WebGL 图形指纹，绕过反欺诈系统。其中我们可以重点介绍

- 着色器和纹理模仿。攻击者可以在修改着色器和纹理时添加噪点，这有助于修改 WebGL 指纹。

- 实施预先存储的指纹。有些程序能够伪造指纹，生成从其他设备预先录制的结果，使其难以被检测到。

##### 使用 WebGL 的网络资源可从浏览器获取哪些信息？

<div class='d-flex gap-8'><img src='/media/mdeditor/1_20241101125113561093.png' class='mx-0' /></div> WebGL 属性和选项的完整列表。

浏览器的 WebGL 属性和值的完整列表可在测试页面<a href="https://test-webapi.tech/webglfull" target="_blank"> https://test-webapi.tech/webglfull</a>上查看。我们将详细讨论反欺诈系统最重要的参数，但首先让我们来看看噪声叠加在 WebGL 中是如何工作的。我们已经在文a href="https://detect.expert/ru/blog/canvas-technology-in-anti-fraud-systems-and-user-i/" target="_blank">章</a> 中详细介绍了打印时数值是如何形成的，现在让我们进行一个小测试，看看 Chrome 浏览器和 antidetect-browser 在无噪点和有噪点时的 WebGL 打印效果，让我们分别打开它们的页面 <a href="https://browserleaks.com/webgl" target="_blank">https://browserleaks.com/webgl</a>。

Chrome 浏览器：

请注意这些值：

WebGL 报告哈希值：af7f2acd5c7ab718eb78ab2d368860bd

WebGL 图像散列：3151260603d8157a55323d306cc161fb49

未屏蔽的供应商：Google Inc.

未屏蔽渲染器：ANGLE（NVIDIA，NVIDIA GeForce RTX 3060 (0x00002503) Direct3D11 vs_5_0 ps_5_0，D3D11）

无噪音防检测浏览器：

<div class='d-flex gap-8'><img src='/media/mdeditor/3_20241101130334363509.png' class='mx-0' /></div> 无噪音反检测浏览器。

使用噪音的反检测浏览器：

WebGL 报告哈希值：af7f2acd5c7ab718eb78ab2d368860bd

WebGL 图像散列： 3151260603d8157a55323d306cc161fb49

未屏蔽的供应商：Google Inc.

未屏蔽的渲染器：ANGLE（NVIDIA，NVIDIA GeForce RTX 3060 (0x00002503) Direct3D11 vs_5_0 ps_5_0，D3D11）

WebGL 报告哈希值：251d629a393c4f10bfffe3b506696fdd

WebGL 图像散列值：61b18870e8f1400f0058bc5533468c685c

未屏蔽的供应商：Google Inc.

未屏蔽渲染器：ANGLE（NVIDIA，NVIDIA GeForce GTX 1050 Ti (0x00001C8C) Direct3D11 vs_5_0 ps_5_0，D3D11）

从测试结果中我们可以看到，当噪声叠加时，数值发生了变化，因此我们可以得出结论：反检测浏览器成功地欺骗了我们的 WebGL 指纹。

##### 反欺诈系统如何检测 WebGL 指纹欺骗？

反欺诈系统使用以下方法来识别 WebGL 指纹的欺骗行为：

- 偏差检查。系统会将 WebGL 指纹与设备参数（如统一变量的最大数量和支持的扩展）进行分析和比较。如果数值与实际设备规格不符，则可能是伪造的。

- 渲染失真。反欺诈系统可以对设备如何渲染某些对象进行成像和检查。例如，如果设备上的 WebGL 渲染与标准参数不符，这可能是篡改的信号。

- 参数稳定性测试。可能会有一些测试来检查系统中着色器和纹理的稳定性，因为改变这些参数可能会暴露被欺骗的 GPU。

WebGL 反欺诈系统最重要的参数是：设备信息（unmaskedVendor、unmaskedRenderer、vendor、renderer、shadingLanguage、version、shadingLanguage2、version2）、技术规范（maxFragmentUniformVectors、maxTextureSize）和扩展。

反检测浏览器成功地欺骗了设备信息，让我们看看反欺诈系统如何检查技术参数：让我们通过在浏览器中打开测试页面 <a href="test-webapi.tech/webglmaxfr" target="_blank">https://test-webapi.tech/webglmaxfr</a> 来检查 maxFragmentUniformVectors 的真实值，该页面可检查负载下的 maxFragmentUniformVectors。

电脑上的 Chrome 浏览器：

实际值如浏览器属性中所述。

由于桌面设备的 maxFragmentUniformVectors 值通常为 1024，因此让我们在安卓手机的 Chrome 浏览器上打开相同的页面：

在手机浏览器中，从浏览器属性中获得的数据与实际特性完全一致。

现在，让我们尝试在反检测浏览器中用手机数值替代这些数值，并重复测试。

打开测试页面：

替换了 maxFragmentUniformVectors 值的 antidetect 浏览器没有通过测试，这也是合乎逻辑的，因为我们在电脑上运行它时，maxFragmentUniformVectors:1024 值是 1024。

让我们在浏览器中打开测试页面 <a href="test-webapi.tech/webglmaxt" target="_blank">https://test-webapi.tech/webglmaxt</a>，对 maxTextureSize 进行类似测试，检查 Webgl 负载下的最大纹理尺寸。

电脑上的 Chrome 浏览器：

实际值如浏览器属性中所述。

由于桌面设备通常将 maxTextureSize 设置为 16384，因此我们在安卓手机的 Chrome 浏览器上打开相同的页面：

在手机浏览器中，从浏览器属性中获得的数据也与实际情况相同。

现在，让我们尝试在反检测浏览器中用手机值替代这些值，并重复测试

查看 browserleaks.com 网站上的数值

打开测试页面

替换了 maxTextureSize 值的反检测浏览器未能通过测试，我们的测试发现浏览器支持 4097 的纹理大小，这符合逻辑，因为我们在电脑上运行时使用的是 maxTextureSize:16384 值。

##### **扩展** ** WebGL**

让我们看看反欺诈系统如何利用 WebGL 扩展信息来识别用户。扩展列表因设备类型和制造商而异。为了识别用户，反欺诈系统可以使用反欺诈系统检查用户的浏览器是否支持每个已知扩展。让我们来看一个简单的例子：

在该示例中，为简单起见，每个 WebGL 扩展都有两个数字，第一个值表示扩展是否在浏览器属性中声明，第二个数字表示经过测试验证后扩展是否受支持。大量的数值会导致每个用户的哈希值相当独特。

#### **性能测试** ** WebGL**

在测试页面上，让我们创建一个程序来测试设备的性能，并计算程序的执行时间。

桌面设备的结果：

<div class='d-flex gap-8'><img src='/media/mdeditor/13_20241101132227922471.jpg' class='mx-0' /></div> </div

NVIDIA GeForce RTX 3060：2023.6ms

AMD Radeon RX580：1132.0ms

AMD Radeon™：1611.2ms

英特尔 UHD 620：2576.1ms

Vulkan 1.3.0：1364.2ms

移动设备结果

<div class='d-flex gap-8'><img src='/media/mdeditor/14_20241101132333702111.jpg' class='mx-0' /></div> 移动设备结果

Mali-G77：3369.3 毫秒

Mali-G76: 5111.1ms

Adreno™ 642L 4534.0 ms

Adreno™ 642：5763.3 毫秒

Adreno™ 618：9821.0 毫秒

测试结果表明，移动设备处理 WebGL 渲染任务所需的时间要长得多，但只有在复杂任务的测试中才能看到执行时间上的显著差异，而复杂任务很难应用于反欺诈系统，在简单任务的测试中，通过估算 WebGL 图形渲染任务所花费的时间来得出设备性能的结论是很有问题的。

##### 以**WebGL**和**Facebook**为例
让我们以两个网站为例，看看它们使用 WebGL 技术获取了哪些有关用户的数据。

让我们打开亚马逊主页，使用开发人员工具搜索 java 脚本文件中包含 “renderer”、“canvas”、“webgl ”和 “vendor ”的函数，并研究网站从这些函数中获取了哪些数据。

结果，我们会发现亚马逊的主页网站收集了有关 Vendor、Renderer 和 Extensions 属性的信息。

让我们在 Facebook 网站上重复测试。

Facebook 网站的账户登录页面会从用户浏览器中收集 Vendor、Renderer 信息。

我们可以得出这样的结论：在这些网站上创建新账户时，不同账户所检查的 WebGL 属性最好是不同的，而在重新使用/登录时，同一配置文件中的属性不会发生变化。

##### 每秒帧数 (FPS)
该参数用于测量图像更新的频率。

WebGL 允许开发人员直接在浏览器中获取 FPS 数据，这通常用于反欺诈系统。对于普通用户来说，在绝大多数情况下，FPS 值都在 60 或以上，而程序通常会将这一值降至 30，以减少运行时对硬件的负载。反欺诈系统FPS的这种向下变化是使用浏览器自动化的一个重要指标。

#### 结论

许多流行资源上的反欺诈系统利用 WebGL 技术，不仅通过独特的图形指纹识别用户设备，还提供欺诈检测和预防工具。利用欺骗、参数稳定性分析以及与真实设备特征的比较，可以显著提高反欺诈系统的有效性。反检测浏览器在 WebGL 中进行数值替换和使用噪声并不是绕过热门网站保护的神奇方法。

在文章的最后，我们提出了一种检测 WebGL 噪音的可行方法：

利用噪声叠加改变 WebGL 的渲染结果是基于像素颜色值的替换，特别是半透明像素的颜色。所介绍的方法正在测试中，并不涵盖所有可能的替换选项。

让我们继续测试：

在普通 Chrome 浏览器中打开 <a href="test-webapi.tech/webgltamper" target="_blank">https://test-webapi.tech/webgltamper</a> 页面：

在不使用噪声的反检测浏览器中重复：

现在，让我们在带有 WebGL 噪音叠加的反检测浏览器中进行测试：

让我们看看这种方法是如何计算噪声叠加的。首先，我们从 Webgl 缓冲区获取十六进制，然后按照编码的相反顺序对十六进制进行解码，从而得到图像中每个像素的颜色值，这些操作的顺序与反欺诈系统完全相同。下一步，我们比较使用 WebGL 绘制的图形主要部分像素的颜色（红色）和位于白色背景与三角形边界上的半透明像素的颜色，在我们的例子中，我们比较了红色色调 R 和透明度 A 的值，结果我们得到了以百分比为单位的值差异。在正常设备上，两个这样的像素的红色色调和透明度之间的差异应该是相同的（理论上，我们的像素颜色的变化值应该与其透明度的变化值相同），但当通过交换半透明像素的颜色来施加噪点时，两个像素之间的红色色调和透明度差异就会发生变化。

从测试截图中我们可以看到，在没有叠加噪点的情况下，红色色调之间的差异值为 R：50.20%，相同像素的透明度差异值为 A：50.20%： 48.63% 和 A：50.59

在本文中，我们分析了反欺诈系统如何利用 WebGL 技术来识别用户、利用指纹欺骗来检测用户。WebGL 技术可以收集大量用户识别信息，因此经常被用于反欺诈系统。与此同时，在同一显卡制造商的产品线中改变显卡信息（unmaskedVendor、unmaskedRenderer、vendor、renderer、shadingLanguage、version、shadingLanguage2、version2）可以改变指纹，不会引起反欺诈系统的怀疑。

在下一篇文章中，我们将继续分析反欺诈系统中使用的浏览器技术。

_Bannykh M.V._

反欺诈系统中的Canvas技术和用户识别方法。

本文探讨了Web开发中的Canvas技术，其在反欺诈系统中的应用、创建和伪造指纹的方法，以及噪声叠加对用户识别的影响。

Antidetect

26.10.24

Antidetect

反欺诈系统中的 WebGPU 技术和用户识别方法

本文介绍了 WebGPU 技术如何通过利用设备的独特图形指纹来协助反欺诈系统进行用户识别和反欺诈工作。文中讨论了 WebGPU 在创建准确数字指纹和检测伪造企图方面的功能。

_Bannykh M.V._

09.11.24

WebGL 技术在反欺诈系统和用户识别技术中的应用

相关帖子

反欺诈系统中的Canvas技术和用户识别方法。

反欺诈系统中的 WebGPU 技术和用户识别方法