大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是 FingerprintJS 取消商用免费，新的 99.5%准确度的 Fingerprint 出世。借着这个契机和大家聊聊什么是浏览器指纹识别、什么是 Canvas 指纹识别、什么是 FingerprintJS、如何使用 FingerprintJS 等等。话不多说，直接进入正题！

1.什么是浏览器指纹识别

1.1 什么是浏览器指纹识别

维基百科对浏览器指纹的定义如下：

“设备指纹、机器指纹或浏览器指纹是出于识别目的而收集的有关远程计算设备的信息。 即使 cookie 关闭，指纹也可用于完全或部分识别个人用户或设备。”

这意味着，当用户在笔记本电脑或智能手机上连接到互联网时，设备会将一堆有关访问的网站的特定数据移交给接收服务器。浏览器指纹识别是一种强大的方法，网站可以使用它来收集有关浏览器类型和版本，以及操作系统、活动插件、时区、语言、屏幕分辨率和各种其他活动设置的信息。

这些数据点乍一看可能看起来很通用，而且不一定是为了识别某个特定的人而定制的。 然而，其他用户拥有 100% 匹配的浏览器信息的可能性非常小。 Panopticlick 发现，在 286,777 个其他浏览器中，只有一个会与其他用户共享相同的指纹。

网站使用浏览器提供的信息来识别唯一用户并跟踪他们的在线行为。 因此，这个过程被称为“浏览器指纹识别”。

1.2 Canvas 指纹识别

获取浏览器信息的最新方法称为“Canvas Fingerprinting”。简而言之，网站是用 HTML5 代码编写的，在该代码中，有一小段代码会获取浏览器的指纹。

网站用来获取浏览器指纹的这种新跟踪方法是通过 HTML5 中的新编码功能启用的，HTML5 是用于构建网站的编码语言， 这是每个网站的核心基础。 在 HTML5 编码语言中，有一个称为“canvas”的元素。

最初，HTML <canvas> 元素用于在网页上绘制图形。维基百科对如何利用 HTML5 canvas 元素生成浏览器指纹提供了以下解释：

“当用户访问页面时，指纹识别脚本首先使用其选择的字体和大小绘制文本，并添加背景颜色。 接下来，脚本调用 Canvas API 的 ToDataURL 方法来获取 dataURL 格式的画布像素数据，该数据基本上是二进制像素数据的 Base64 编码表示形式。 最后，脚本获取文本编码像素数据的哈希值，作为指纹。”

简单来说，这意味着 HTML5 canvas 元素会在网站上生成某些数据，例如：访问者浏览器的字体大小和活动背景颜色设置，这些信息作为每个访客的唯一指纹。

与 Cookie 的工作方式相反，Canvas 指纹识别不会将任何内容加载到计算机上，因此无法删除任何数据，因为它不是存储在计算机或设备上，而是存储在其他地方。

2.什么是 FingerprintJS

FingerprintJS 是一个可用的客户端浏览器指纹识别库，它通过查询浏览器属性并从中计算哈希访问者标识符，默认使用 Murmur Hash 算法返回一个 32 位整数。 与 cookie 和本地存储不同，即使浏览器数据被清除，指纹在隐身/私密模式下也保持不变。

从版本 4.0.0 开始，FingerprintJS 根据商业源许可证 1.1 获得许可， BSL 仅允许用于非生产目的，授权变更如下：

• 依然可以出于自己的研究、爱好和测试目的使用 FingerprintJS
• 依然可以使用 FingerprintJS 构建概念验证应用程序
• 使用 FingerprintJS 构建创收应用程序则需要商业授权
• 使用 FingerprintJS 构建作为服务 (SaaS) 提供的软件需要商业授权
• 为任何生产目的分叉 FingerprintJS 也需要授权

目前 FingerprintJS 在 Github 上通过 MIT 协议开源，有超过 19.3k 的 star、2.1k 的 fork、依赖项目数 38k、代码贡献者 80+、NPM 周平均下载量 290k，妥妥的前端优质开源项目。

3.FingerprintJS 的局限性与 Fingerprint 出世

3.1 FingerprintJS 局限性

准确性

由于 FingerprintJS 在浏览器本身内部处理和生成指纹，因此准确性有限 (40% - 60%)。 例如，当两个不同的用户使用相同的（即相同版本、相同供应商、相同平台）浏览器发送请求时，FingerprintJS 将无法区分这两个浏览器，主要是因为这些浏览器的属性是相同的。

安全

由于指纹是在浏览器本身内部处理和生成的，因此它们很容易受到欺骗和逆向工程的攻击。

3.2 Fingerprint 横空出世

Fingerprint 是一款闭源商业设备识别产品，专为欺诈检测、设备识别、营销归因和分析而设计。 该产品是 FingerprintJS 的增强版本，经过全面重新设计，可以解决最具挑战性的识别用例。 它的源代码在此或任何其他公共存储库中均不可用。

Fingerprint 能够达到 99.5% 的准确率，因为它在服务器上处理浏览器属性，并分析大量辅助数据（例如 IP 地址、访问时间模式、URL 更改等）。 由于这些先进的匹配技术，指纹识别能够可靠地对拥有相同设备的不同用户进行重复数据删除。 有关 FingerprintJS 优势的完整列表，请访问指纹识别与 FingerprintJS。

目前 Fingerprint 支持 Web、Android、iOS 等平台，同时计划起价为每月 200 美元，其中包括 10 万次 API 调用。 开发者可以通过注册免费、无义务的 14 天试用版轻松开始。

4.如何使用 FingerprintJS

可以通过下面的代码快速使用 FingerprintJS：

import FingerprintJS from "@fingerprintjs/fingerprintjs";
// Initialize an agent at application startup.
const fpPromise = FingerprintJS.load();
(async () => {
  // Get the visitor identifier when you need it.
  const fp = await fpPromise;
  const result = await fp.get();
  console.log(result.visitorId);
})();

当运行与 NPM 或 Yarn 一起安装的 FingerprintJS 时，该库将向 FingerprintJS 服务器发送 AJAX 请求以收集使用情况统计信息。 当加载函数运行时，有 0.1% 的机会发送请求。 请求每周最多从一个浏览器实例发送一次（除非浏览器缓存已清除）。 请求包含以下信息：

• 库版本
• 客户端发送的 HTTP 标头，包括:库运行的页面的来源和引用者
• 客户端的 IP

开发者可以使用 monitoring 选项关闭这些请求：

const fpPromise = FingerprintJS.load({
  monitoring: false,
});

关于 FingerprintJS 的更多用法本文不再过多展开，可以参考文末的资料。

5.本文总结

本文主要和大家探讨 FingerprintJS 取消商用免费，新的 99.5%准确度的 Fingerprint 出世。借着这个契机和大家聊聊什么是浏览器指纹识别、什么是 Canvas 指纹识别、什么是 FingerprintJS、如何使用 FingerprintJS 等等。相信通过本文的阅读，大家对 FingerprintJS 会有一个初步的了解，同时也会有自己的看法。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/fingerprintjs/fingerprintjs

https://www.npmjs.com/package/@fingerprintjs/fingerprintjs

https://fingerprint.com/blog/fingerprintjs-is-now-fingerprint/

https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/api.md

https://www.cnblogs.com/lhb25/p/browser-fingerprinting-js-library.html

https://smartframe.io/blog/browser-fingerprinting-everything-you-need-to-know/

https://seon.io/resources/dictionary/canvas-fingerprinting/

https://fingerprint.com/blog/browser-fingerprint-php/

https://pixelprivacy.com/resources/browser-fingerprinting/