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)