Unsplash上的George Prentzas摄影作品
浏览器指纹是一种安全技术，用于许多不同的情况，其中你想要唯一地识别一个用户，无论该用户告诉你他们是谁。
当他们爬取你的网站时，这种情况之一当然是。如果你使用有限的检测技术，例如检查他们的用户代理或他们的IP，他们可以轻松地更改该信息，而你将一无所知。
另一方面，如果你实现了类似浏览器指纹的东西，那么你将使他们的工作更加困难，因为你将使用他们无法伪造的信息。
在本文中，我将介绍一些最常见的创建所谓的“浏览器指纹”的技术，然后我将向你展示如何实现其中之一。
常见的浏览器指纹技术
我知道它听起来像一个花哨的东西，但指纹只是从一定的输入数据创建的哈希。
真正的诀窍在于你如何得到它。
使用Canvas元素
获取该指纹的一种方法是，在用户看不见的情况下绘制一些东西，并检查结果。
你看，每个浏览器在Canvas元素上呈现内容的方式都会有一些变化。它们是微妙的差异，如果你不是在寻找它们，那么它们真的很难被发现。
这种特定的用例利用了几个事实：
- 字体并不在所有系统上都可用，因此在这些情况下必须使用其他备选项。
- 应用的反锯齿并不总是相同的。
- 一些其他的细节基于你的浏览器的实现。
一旦呈现，图像需要转换为哈希（唯一的值），然后你就有了你的指纹。
最好的部分是，Canvas元素可以被隐藏，所以用户并不真正知道你在做什么。
媒体设备列表
另一种指纹你的浏览器的方法是，收集连接到你的系统的媒体设备列表，并基于该信息创建哈希。
你怎么做到的？实际上很容易，所有现代浏览器都有一个Media Device API，允许你列出所有连接的设备。
以下代码列出了你系统上的所有媒体设备：
这段代码是从官方的MDN文档中取出的，如果我在我的Firefox上运行它，我会得到这个输出：
我相信你可以看到这可以用来构造一个单一的哈希值，可以在未来的请求中识别你，即使你改变了你的浏览器配置。
音频波指纹
就像使用Canvas元素技术一样，你可以基于固定源（会给所有系统相同的输入的振荡器）使用Web音频API生成音频剪辑，然后计算输出的哈希。
你看，鉴于Web音频API的复杂性，涉及到很多数学和浮点数学，这意味着每个浏览器的实现都略有不同，这取决于编码它的人和它所针对的操作系统。这些差异加起来会生成一个唯一的值，该值在执行过程中保持一致，用于识别浏览器和操作系统。
这足以用作可靠的指纹，特别是因为即使你在浏览器的无痕模式下使用它，它仍然保持不变。
实现你自己的指纹代码
现在，你已经了解了一些最常见的指纹技术，让我们快速浏览一下如何实现其中之一的示例。
你已经看到了一些媒体设备列表的代码，但我将专注于Canvas元素，因为我认为它比收集许多数据点更有趣。
记住，这种技术要求我们使用Canvas元素绘制一个带有文本的图片，然后将该绘画转换为单个哈希。
我们所要做的就是定义一个画布，绘制一些形状，添加一些文本，然后在其上调用toDataURL方法。默认情况下，它将把我们的图像转换为PNG，然后我们将对其进行迭代，并将其转换为单个哈希值。
特别地，我们的“哈希”将是一个单一的整数，你可以使用自己的哈希方法，我只选择了一个易于编码和快速执行的方法。
原始代码来自这里，并进行了修改。
此代码生成的输出如下所示：
当然，实际的图像非常丑陋，我们现在并不想制作漂亮的东西，我们只关心哈希。请注意，对于Chrome和Chrome的无痕模式，值是相同的，但对于Firefox是不同的。
这是关键，因为它意味着你可以知道你的爬虫/抓取器是否试图通过在其浏览器上使用无痕模式来“愚弄你”。
当然，他们可以更改浏览器，然后你就不会知道，但爬虫/抓取器通常总是使用相同的浏览器，试图将其标识为其他东西（使用用户代理字符串）。
在这种情况下，你甚至可以保护你的网站免受无头浏览器试图爬取/抓取的威胁。只需编写一个脚本，在隐藏的Canvas元素上执行上述代码，获取哈希值，并将其与你自己的“黑名单”值列表进行比较。如果它们在那里，那么你知道该怎么做了！
浏览器指纹可以成为一个很棒的工具，用于保护你的系统不受用户尝试以你不想要的方式与其交互的影响。从试图抓取你的网站的人，到确保用户不愚弄你的付费内容，或者仅有限地访问你的内容。实际上，你的想象力在这里是极限。你可以看到，虽然理论听起来很复杂，但实际实现并不复杂。你可以很快地拥有自己的指纹识别代码。
评论(0)