Canvas — 这是网络开发中最强大的工具之一，提供了在浏览器中处理图形的功能。Canvas 的核心在于通过 JavaScript 绘制和操作图像，这使其成为创建动态网络应用程序的不可或缺的工具。Canvas 不仅用于视觉效果、游戏和动画，还在反欺诈系统中被广泛应用，通过其功能来帮助识别用户的唯一性。 **历史创建和Canvas的用途** Canvas 技术首次出现在 2000 年代初 HTML5 规范中。2004 年，苹果公司在 Safari 浏览器中首次实现了 Canvas。最初的设想是创建一种显示图形的方法，而无需使用诸如 Flash 之类的插件，以改善网页的性能和安全性。2014 年，HTML5 成为正式标准，Canvas 也被确立为网络图形的关键技术。 Canvas 为程序员提供了像素数据操作的能力，这为网页设计、游戏开发和动画开辟了广泛的应用领域。然而，它最意想不到的用途之一是反欺诈系统，通过 Canvas 来创建用户的数字指纹以对抗欺诈。 **Canvas 的技术功能** Canvas 为开发人员提供了丰富的图形操作功能： - 绘制形状和线条。Canvas 支持简单的形状，例如矩形、圆形和线条。 - 处理图像。它允许加载图像、调整大小、叠加并操作每个像素。 - 动画。Canvas 被广泛用于创建互动图形和动态视觉效果。 这些功能使 Canvas 成为网络开发的通用工具，应用于从网站设计到复杂的交互式应用和游戏的各种领域。 ## Canvas 和反欺诈：防止诈骗 反欺诈系统在试图识别用户设备时面临身份和数据伪造的问题。为了更准确地识别，开始使用所谓的 Canvas 指纹来唯一化设备（Canvas fingerprinting）。这可以为每台设备创建一个数字指纹。 **Canvas 如何帮助识别用户？** 当浏览器在 Canvas 上渲染图像时，不同设备的呈现方式略有不同。这受图形处理器、驱动程序、操作系统甚至字体的影响。结果是在不同设备上看起来相同的图像在像素级别上的细微差异可以作为识别特征。 反欺诈系统利用这一特性来创建指纹。Canvas 绘制图像后，通过 JavaScript 分析像素，找出细微差异。结合浏览器版本、操作系统和屏幕分辨率等其他因素，指纹帮助识别用户的设备。 **伪造 Canvas 指纹的方法** 试图绕过反欺诈系统的恶意用户开发了伪造 Canvas 指纹的方法。常见的伪造方法包括： 1. **添加噪声**。一些程序可以在 Canvas 渲染中添加微小的失真，例如改变像素、添加噪声或制造人为偏差。这可以改变指纹，掩盖设备的真实特征。 2. **使用预先准备的结果**。此方法允许伪造 Canvas 指纹，模拟真实设备的工作。程序不再实时计算渲染，而是植入预先保存的数据，这些数据符合真实设备的指纹。该方法使检测伪造变得更加困难，因为反欺诈系统获得的是表面上可靠的数据，但这些数据并不反映设备的真实特性。 **反欺诈系统如何检测 Canvas 指纹伪造** 反欺诈系统使用不同方法来检测 Canvas 指纹伪造，涵盖渲染的静态和动态方面。主要方法包括： 1. **图像噪声分析：** 反欺诈系统通过在多个相似图像上比较结果来检测渲染中的噪声。对比可以发现异常，这可能表明伪造。例如，通过对比结果的部分或使用不同的方法获得相同图像的结果。 2. **使用动态 Canvas：** 动态 Canvas 更难伪造，因为它们需要实时改变数据。这使得伪造结果更加困难，系统可以实时评估设备的表现，将结果与预期进行对比。然而，由于动态 Canvas 的多变性和依赖于多个因素，结果难以互相比较。 因此，通过噪声分析和动态渲染的结合，反欺诈系统可以更有效地识别伪造并判断 Canvas 指纹的真实性。 **Canvas 在反欺诈系统中的应用实例** 让我们来看看 Canvas 指纹获取数据的原理，从一个 9 像素（3x3 px）大小的 Canvas 示例开始。 **Pixel Colors (Hex):** - ff0000 - 00ff00 - 0000ff - ffff00 - ff00ff - 00ffff - ffffff - 000000 - 808080 **Base64 字符串：** iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAACBJREFUGFcVx4EJAAAMgzD9vJ87BhLQIAMMi/f7KZVtHB5jDn4u6zYbAAAAAElFTkSuQmCC **Hex 字符串：** 6956424f5277304b47676f414141414e535568455567414141414d414141414443415941414142574b4c572f4141414141584e535230494172733463365141414143424a52454655474663567834454a4141414d677a4439764a383742684c5149414d4d692f66374b5a56744842356a446e3475367a59624141414141456c46546b5375516d4343 编码为 hex 的过程包括几个步骤：通常先将像素颜色编码为 base64，然后将 base64 字符串转换为十六进制格式（hex），并发送到服务器进行进一步计算。 现在我们已经了解了图像在浏览器中的渲染方式，接下来让我们探讨一下噪声叠加在反检测浏览器中的工作原理。 为了更复杂的渲染任务，我们使用一个来自著名浏览器检测工具的 Canvas 示例，并进行几个测试。我们将比较 Hex 结果的长度，该结果会在渲染和编码后传输到服务器，并在需要时比较值。 **Chrome 浏览器的结果：** - Base64 字符串长度：15452 - Hex 字符串长度：30948 **无噪声的反检测浏览器的结果：** - Base64 字符串长度：15452 - Hex 字符串长度：30948 **带有噪声的反检测浏览器的结果：** - Base64 字符串长度：15936 - Hex 字符串长度：31916 在使用噪声时，Base64 字符串的长度增加了 484 个字符，而 Hex 值在其他情况下保持一致。 在此简单示例中，我们可以看到，使用噪声的 Canvas 反检测浏览器如何改变结果。 **以 Amazon 的 Canvas 指纹为例** 在 Amazon 的注册页面上，Canvas 有三个渲染任务。 第一个和第二个任务相同，仅在结果获取和记录方法上有所不同。 在第一个任务中，通过对像素颜色进行编码来计算 Hex，而在第二个任务中，颜色集先编码为 base64，然后再转换为 hex。 第三个任务略有不同，其中缺少一部分负责渲染 "NOT AVAILABLE" 的任务内容，可以在图像中看到。 值得注意的是，在尝试登录 Amazon 账户时，用户将会看到相同的渲染任务集。 通过这些渲染结果，网站可以确定从多少台设备登录账户，并在从其他设备登录时进行额外验证。此外，通过这些不同方法获得的结果，网站可以高度精确地区分设备，例如，相同的计算机即便配置相同，没有独立显卡的设备仍然会显示不同的结果。 这种高精度设备识别通过多个参数实现：不同系统会以不同方式渲染半透明色调，渲染任务中使用的字体，甚至经常在 Canvas 中遇到的表情符号。 在上面提到的 Canvas 示例中，Amazon 会检查 Arial 字体的渲染效果，图像中的文本使用的正是这种字体。这是因为许多移动设备上没有 Arial 字体，在此类设备上将替换为系统字体或类似 Arial 的字体，渲染结果与桌面设备有显著差异。在包含 Arial 字体的任务中，通常还会包含不存在的字体，用户设备会选择其他系统字体以完成任务，这是为了更精确地识别用户。同样的情况也发生在表情符号上，根据设备和操作系统的不同，表情符号在 Canvas 上的渲染结果也会有所不同。 左图为桌面设备的 Chrome 浏览器中表情符号的渲染效果，右图为 Android 设备上的 Chrome 浏览器中的效果 我们将比较 Base64 和 Hex 结果字符串的长度： **Chrome 浏览器的结果：** - Base64 字符串长度：1480 - Hex 字符串长度：3004 **无噪声的反检测浏览器的结果：** - Base64 字符串长度：1480 - Hex 字符串长度：3004 **带噪声的反检测浏览器的结果：** - Base64 字符串长度：1708 - Hex 字符串长度：3460 **Samsung 的结果：** - Base64 字符串长度：2240 - Hex 字符串长度：4556 **Xiaomi 的结果：** - Base64 字符串长度：1780 - Hex 字符串长度：3604 在 Canvas 表情符号渲染示例中，我们可以看到桌面设备和移动设备之间的结果显著不同。 **验证画布指纹的唯一性** 我们在 Browserleaks 网站上检查了 Canvas 渲染结果的唯一性。 在无噪声的反检测浏览器中，我们获得了以下结果： **我们的 Canvas 指纹与 Browserleaks 数据库中的 142 个设备指纹匹配。指纹大小为 4666 字节。** 接下来我们开启噪声效果并重复测试： 在使用噪声后，我们的指纹在 Browserleaks 上的唯一性达到 100%。指纹大小增加到 4718 字节。 许多大型反欺诈系统会检查 Canvas 指纹的唯一性，并对具有稀有指纹的用户保持警惕。 **测试用户身份识别的准确性** 我们尝试通过 Canvas 指纹测试用户的识别精度。测试使用租用的服务器，配有 Ryzen 5 3600、Ryzen 7 3700X 和 Ryzen 9 5950X 处理器，未配备显卡，浏览器为 131 版本的 Chromium。 **测试结果：** 在 Chromium 131 浏览器中，我们在所有设备上获得了相同的结果。 接下来，我们在其他版本的 Chromium 浏览器中检查 Canvas 指纹： Chromium v130 Chromium v129 Chromium v128 Chromium v126 Chromium v125 Chromium v123 在不同版本的 Chromium 浏览器中检查结果后，发现 Canvas 指纹在各版本之间有所差异。 最后，为了检查不同浏览器中的 Canvas 指纹差异，我们在 Chrome v130 进行测试： 在 Chrome v130 和 Chromium v130-131 中的指纹完全一致。 **如我们所见，Canvas 的检测无法高度精确地识别用户。** ## 结论 通过本次测试，我们可以得出关于在不同浏览器中使用噪声对图像渲染影响的结论。使用不同字体且不支持特定字符的浏览器可能会显示不同的结果。 噪声的使用会显著改变 Hex 字符串，这可能会成为反欺诈系统的检测信号。 Canvas 技术本身在反欺诈系统中的重要性并不显著。只有在与其他反欺诈方法结合使用时，才能实现有效的结果。然而，目前有相当多的欺诈流量使用 Canvas 噪声，通过在用户第一次访问时检测这些流量，可以大大简化反欺诈系统的任务。 我们还探讨了一种噪声检测方法，它计算成本低。这个方法的构想我已经有了很长时间，但在反欺诈系统中尚未见到应用。 此方法的核心思想是比较原始图像与其翻转版本的渲染结果。为防止使用预先准备的值，我们应用动态 Canvas，其中每个新的图像都包含变化的元素。 识别噪声和伪造的过程涉及将原始图像的每个像素与翻转图像的相应像素进行比较。如果渲染正确且没有操控，这两个图像应完全相同。否则，差异可能指向潜在的伪造或数据完整性问题。 **测试结果:** Chrome 浏览器: 无噪声的反检测浏览器: 带有噪声的反检测浏览器: Samsung Chrome: Xiaomi Chrome: 这种方法能够以高精度识别 Canvas 指纹中的噪声使用。 在本文中，我们讨论了反欺诈系统如何利用 Canvas 技术检测欺诈流量。然而，反欺诈系统的目标可能不仅仅是检测噪声，还包括判断 Canvas 指纹是否与声明的浏览器或操作系统相符。 在接下来的文章中，我们将继续探讨反欺诈系统中使用的其他浏览器技术。 *Bannykh M.V.*
