大家好，我是敲里个敲敲，前端野生工程师，本篇主要介绍浏览器指纹的概念及实战应用，学完本篇，可以增加你前端识别设备，前端安全处理，前端个性化服务的了解，根据需求可以完善自己的系统。话不多说，Let’s Go🏄‍♀️🏄‍♂️🏄!

浏览器指纹是什么？

先来一段AI解释：

浏览器指纹是一种通过收集浏览器的多种特征信息来识别和跟踪用户的技术手段。 它综合了诸如浏览器类型（如Chrome、Firefox等）、版本号、操作系统、屏幕分辨率、安装的字体、浏览器插件、Cookie设置等众多元素，为每个用户生成一个类似独一无二“指纹”的标识，即便在用户未登录账号、清除Cookie等情况下，也能在一定程度上识别出是否为同一用户。

不得不说，全面且准确，不知道各位老哥看完什么感觉😼😼😼？别急，让小敲来给你娓娓道来。

举个栗子🌰

先从认人开始，比如，下面给你我的自画像

好的，欣赏完毕！那下次你怎么看到这个人就知道是小敲本人呢？你可以说：帅气逼人、清爽干练、简约有型、衣着得体。。。的就是敲里个敲敲

种种表述构成了一个整体的，唯一的小敲，下次你看到了我可以根据这些词的综合，直接认出我来了。

数学表达为：敲里个敲敲 = 帅气逼人 + 清爽干练 + 简约有型 + 衣着得体+。。。

二次推理

那么同样，我们前端怎么识别一台设备呢？这时你自然会联想到😲，可以根据设备的IP、设备的型号、外界接盘鼠标的型号、位置。。。

Congratulations ! 你已经明白了浏览器指纹的基本原理了。其实说白了就是根据浏览器运行所在设备的各项综合信息来锁定一个设备的。具体有哪些详细细节，感兴趣可以参考这个网站了解学习：https://browserleaks/

数学表达式为： 这个浏览器指纹=IP+地址+设备型号…

浏览器指纹有什么用？

下面四个用处主要为AI生成，我整理了一下，反正用处就这么个用处，大家想怎么用全看心愿🤣

——来自：我爱说实话的敲里个敲敲先生

用处1 ：识别用户身份😜

哇哦！就好像给每个上网的小伙伴都贴上了独一无二的 “网络小标签” 呢。通过浏览器指纹，网站和平台可以在茫茫网海中准确地认出你是谁呀，不管你是在购物、看视频还是玩游戏，它都能一下子知道 “哟，原来是这个小可爱又来啦”，这样就能更好地根据你的喜好和习惯来为你服务啦。

用处2： 提供个性化服务🥳

想象一下，当你打开购物网站，它一下子就给你推送了你一直心仪却还没下手的那些漂亮小裙子、帅气运动鞋；当你打开音乐软件，播放列表里全是符合你口味的超赞歌曲。这可都是浏览器指纹的功劳呀，它把你的喜好摸得透透的，然后给你打造专属的个性化体验，让你每次上网都感觉像是走进了为自己量身定制的小天地呢。

用处3：安全与风险管理😏

嘿呀，浏览器指纹在网络世界里就像是个小小的 “安全卫士” 哦。它可以帮助网站和平台识别出那些可能存在风险的访问行为呢。比如说，如果突然有个 “不速之客” 用着和你很相似的浏览器指纹想要偷偷干点坏事，它就能及时发现并拉响警报，把那些坏家伙挡在外面，保护我们的账号安全、隐私信息啥的，让我们可以在网络上放心大胆地玩耍啦。

用处4：数据分析与统计🤓

这浏览器指纹呀，还能帮着那些网站和平台当一个超厉害的 “数据小侦探” 呢。它可以把大家上网的各种行为、习惯都收集起来，然后进行分析和统计哦。比如说，知道哪个时间段大家最喜欢逛某个网站啦，哪种类型的内容最受欢迎啦等等。这样网站就能根据这些数据不断优化自己，给我们带来更多更好玩、更有用的东西啦，是不是很赞呀？

选用哪个指纹库呢？

这里我进行了详细的分析，分析思路如下：

1. 正常打开，记录一下自己的指纹
2. 隐身模式打开，记录一下指纹
3. 其它浏览器打开，记录一下指纹
4. 删除cookie，缓存等，重新打开，记录一下指纹

如果这四个都一样，当然最好，但理想与现实总有差距，能做到124其实已经相当好了。（思路由沐洒大佬提供全程指导，这里手动艾特沐洒大佬。大家可以搜索掘金和微信公众号 【沐洒】 关注一波🎆🎆🎆）

FingerprintJS

优点：可以实现124，文档全面丰富，兼容性良好

缺点：付费

这一款除了付费没有什么缺点，各种体验都是很舒服，如果是需要稳定的支持的商业化项目，首推还是这一款！

thumbmarkjs

优点：可以实现上述1，2，4。

缺点：文档和功能等可能不如FingerprintJS完善

这个刚刚兴起，是世界第二的指纹库。不信你看：

本来我还不信，但是今天跟阳阳姐核对了，真的。

哈哈哈，开个玩笑，但不得不说，这个东西真的很好用，我刚开始看下载量还不高，短短时间，大家再看下载量：

clientjs

优点：可以实现上述1，2，4

缺点：最近更新为3年前

creepjs

八年前的代码，不推荐

怎么将其加入到自己的系统呢？

下面我将演示一下怎么将thumbmarkjs和clientjs加入自己的系统中使用：

引入：thumbmarkjs

在你的项目中下载thumbmarkjs：

npm install @thumbmarkjs/thumbmarkjs

界面代码内引入

import { getFingerprint } from '@thumbmarkjs/thumbmarkjs'

然后你可以简单的获取到所需要的值并打印：

getFingerprint().then((fp) => { console.log(fp)})

值大概就是：05df2sxs 类似于这样的字符串

引入：clientjs

在你的项目中下载：clientjs

npm install clientjs

界面代码内引入

import { ClientJS } from 'clientjs';

然后使用

// Create a new ClientJS object
const client = new ClientJS();
​
// Get the client's fingerprint id
const fingerprint = client.getFingerprint();
​
// Print the 32bit hash id to the console
console.log(fingerprint);

值大概就是：65ds25ws25a 类似于这样的字符串

看到这里，你可能疑惑我什么不演示一下FingerprintJS呢？

哦豁，我如果都演示完了，你们回去就不实验了，我留一个可以激发你们的学习积极性，所以为什么我不演示FingerprintJS呢？

————因为我善！

结语

终于肝完了，制作不易，记得点赞呀。可以关注我的公众号【敲里个敲敲】，虽然目前功能没做起来，但是它空旷啊！你可以当成一个备忘录，随便往里面写东西☆ : .｡. o(≧▽≦)o .｡.: ☆

关注敲里个敲敲带你领略不一样的风采！