一、引子
场景一、绑定用户与浏览器（设备），比如某一个网站的账号给到用户，用户只能在自己的电脑的某浏览器使用。
场景二、精准推送广告。
场景三、公司做营销活动，防止活动奖品被程序薅羊毛。
等等场景我们有什么技术方法实现或避免呢，本文介绍浏览器指纹来实现。
二、浏览器指纹简介：
2.1、简介
我们常说的指纹，指人们手指上的指纹，具有唯一性，可以标识一个人的唯一身份。
浏览器指纹是指仅通过浏览器的各种信息，包括CPU核心数、显卡信息、系统字体、屏幕分辨率、浏览器插件（Flash、Silverlight、Java等）、浏览器扩展、浏览器设置、时区偏移量（浏览器GMT偏移量）和许多其他信息的特征组合成的一个字符串，就能近乎绝对定位一个用户，就算使用浏览器的隐私窗口模式，也无法避免。
2.2、浏览器基本指纹
基本指纹是任何浏览器都具有的特征标识，比如硬件类型（Apple）、操作系统（Mac OS）、用户代理（User agent）、系统字体、语言、屏幕分辨率、浏览器插件 (Flash, Silverlight, Java, etc)、浏览器扩展、浏览器设置 (Do-Not-Track, etc)、时区差（Browser GMT Offset）等众多信息，这些指纹信息“类似”人类的身高、年龄等，有很大的冲突概率，只能作为辅助识别。
硬件指纹通过检测硬件模块来获取信息，这些模块补充了基于软件的指纹。硬件模块包括GPU、摄像头、扬声器/麦克风、运动传感器、GPS、电池、CPU、网络适配器、蓝牙和BOIS等。
2.3、浏览器行为指纹
这里拿电商网站举例，我们浏览任意商品，停留页面的时长，经常购买的品类，商品的尺码大小等等都可以被记录在本地的cookie里作为行为指纹，帮助广告商精准投放广告，也可以帮助电商网站训练推荐模型为你做到精准推荐。所以“大数据可能比你还要了解你自己”可不是说说而已。
2.4、浏览器高级指纹
基本指纹就像人的外貌、身高、体重、性别，很难从肉眼的角度去区分浏览器，那么高级指纹对于浏览器来说，就像DNA一般精准（不要害怕，也是有极限的）本文会介绍到目前广泛使用的三大高级指纹：canvas指纹/WebGL指纹/Audio音频指纹。
三、浏览器指纹的发展：
浏览器指纹技术的发展跟大多数技术一样，并非一蹴而就的，现有的几代浏览器指纹技术是这样的。
第一代是状态化的，主要集中在用户的 cookie 和 evercookie 上，需要用户登录才可以得到有效的信息。
第二代才有了浏览器指纹的概念，通过不断增加浏览器的特征值从而让用户更具有区分度，例如 UA、浏览器插件信息等。
第三代是已经将目光放在人身上了，通过收集用户的行为、习惯来为用户建立特征值甚至模型，可以实现真正的追踪技术。但是目前实现比较复杂，依然在探索中。
目前浏览器指纹的追踪技术可以算是进入 2.5 代，这么说是因为跨浏览器识别指纹的问题仍没有解决。
四、浏览器指纹技术
4.1、Canvas画布指纹
许多网站和跟踪软件使用HTML画布指纹。因为每个浏览器都会生成不同的模式。基本上，每种浏览器都会使用不同的图像处理引擎，不同的导出选项，不同的压缩级别，这样每台电脑绘制的图片都会略有不同，这些图案可以用来为用户设备分配特定数量的指纹，也可以用来识别不同的用户。
function getCanvasFingerprint () {
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.font = "18pt Arial";
context.textBaseline = "top";
context.fillText("Hello, user.", 2, 2);
return canvas.toDataURL("image/jpeg");
}
getCanvasFingerprint()chrome浏览器
联想浏览器
经过对比确实不一样。
4.2、混淆 Canvas 指纹
详解浏览器指纹 - 简书
4.3、混淆其他指纹
与前面混淆canvas指纹混淆的思路是一致的，都是更改被获取对象的原型的方法。
比如混淆时区，就是更改 Date.prototype.getTimezoneOffset 的返回值。
混淆分辨率则是更改documentElement.clientHeight documentElement.clientWidth
混淆 WebGL 则要更改 WebGLbufferData getParameter方法等等。
4.4、AudioContext 音频上下文指纹
如果画布指纹是模式指纹，音频上下文就是声音指纹。
音频API使开发人员能够直接在代码中操作原始音频流数据，生成、操作和以任何他们想要的方式重现这些数据，例如改善音调、改变音调和分割音频。
AudioContext生成音频流（三角波），对其执行FFT变换，计算SHA值作为指纹，并在音频输出到音频设备之前清除音频，而用户不会注意到。
主机或浏览器的硬件或软件的细微差异会导致音频信号处理的差异。同一设备上的同一浏览器产生相同的音频输出，而不同机器或浏览器生成的音频输出可能有所不同。这样就可以作为浏览器指纹的跟踪技术。
javascript - 你的浏览器，独一无二 --解读浏览器指纹 - 烧鱼的前端小记 - SegmentFault 思否
方法5、WebGL 指纹
详解浏览器指纹 - 简书
4.6、综合指纹
生活场景中，同一批次同一型号的电脑，使用相同的浏览器就很有可能产生相同的“高级指纹”，存在一定的重复率，这个时候就需要结合上述的所有指纹，经过分析，计算最终的综合指纹作为判断。这样就可以大大降低碰撞率，极大提高客户端唯一性识别的准确性。
4.7、fingerprintjs2
前端使用fingerprintjs2获取浏览器指纹_Boale_H的博客-CSDN博客_fingerprintjs2
五、如何防止被生成指纹：
方法一、
详解浏览器指纹 - 简书
方法二、
我们也有一些简单的方法来防止被生成用户指纹。例如我们可以通过浏览器的扩展插件（Canvas Blocker、WebGL Fingerprint Defender、Fingerprint Spoofing等），在网页加载前执行一段 JS 代码，更改、重写 JS 的各个函数来阻止网站获取各种信息，或返回一个假的数据，以此来保护我们的隐私信息。
六、过程记录：
记录一、浏览器指纹弥补了通过浏览器不易获取ip的缺陷。
记录二、浏览器指纹作用
对于网站而言，拿到浏览器指纹并没有实际价值，真正有价值的是浏览器指纹对应的用户信息。作为网站站长，收集用户浏览器指纹并记录用户的操作，是一个有价值的行为，特别是针对没有用户身份的场景。
例如一个视频网站，未注册该网站的用户 A 喜欢浏览二次元的视频，通过浏览器指纹记录这个，那么下次可以直接向该浏览器推送二次元的视频。因为现在的上网设备大都是私人的，这样的推送方式很容易获得大部分用户的好感，从而使之成为网站的用户。
记录三、浏览器指纹保护您的权利
现在网络技术越来越发达，很多事情都可以在网络上完成。比如收付，现在你不需要开车去银行用手机或电脑访问你的账户。
然后小偷们改进了他们的方法，他们不是从购物街上的人群中偷银行卡，而是钻研计算机技术，试图在网上窃取你的存款。当他们访问你的帐户和密码时，他们将被阻止登录，这就是浏览器指纹技术发挥作用的地方。
小偷使用的电脑和你登录网银所用的电脑不一样，甚至连网络也不一样。当他从那台电脑登录时，浏览器指纹识别技术会识别出设备的指纹。网络随后意识到这是一个不熟悉的指纹，并谨慎地向您发送提醒，邀请您验证您的帐户。没有收到验证信息的窃贼是拿不到你的钱的。
记录四、浏览器指纹识别安全吗？
浏览器指纹识别是安全的，只要没有人恶意使用它，但现实是，除了好处，它确实给我们带来了一些问题。
在过去，你被窃取的隐私可能是一些具体的东西。说出你的名字，你的银行卡号。但是现在，你的浏览器指纹也是一个非常重要的数据。犯罪分子可以用它来诈骗你，有些企业想从你的行为中赚钱。您可能会产生以下效果：
1） 受到浏览器指纹的监控
获取浏览器指纹对网站没有实际价值，但真正有价值的是浏览器指纹对应的用户信息。作为网站管理员，在没有用户身份的情况下，收集用户的浏览器指纹并记录用户的行为是一项有价值的活动。
例如，如果你喜欢阅读动漫，浏览器指纹会记录下你的兴趣。下次访问此站点时，无需登录即可获取推送的动画信息。这是一种非常通用的分发内容的方法。此外，你的购物偏好也会受到浏览器指纹的监控。
其结果是浏览器指纹能准确地知道你喜欢什么。当别人用你的电脑访问互联网时，网络只识别机器，而不识别使用它的人，所以别人很容易就把你的一些偏好传递给你，并被推到你的一些偏好上。
2） 浏览器指纹识别追踪技术
浏览器指纹识别是商业平台上检查账户关联的重要工具。众所周知，一些电子商务平台非常重视市场秩序，你在打开产品页面时看到过很多产品都有相同的图片，这可能是恶意竞争，也许有人为了占领市场而开了很多商店购买同样的产品。
为了防止此类情况发生，电子商务平台使用浏览器指纹来确定哪些店铺属于同一商家。如果被发现，平台将进行处罚。
因此，最简单、可靠且安全的大批量打开浏览器的方法是运用虚拟浏览配置文件。通过AdsPower指纹浏览器，你只需要在一台电脑上创建多个相当于真实设备的浏览器配置文件。
它们互不干扰，确保指纹之间不会相互泄露。在网络平台看来，这些浏览器的指纹就是真实设备的浏览器指纹，所以不会怀疑你的身份。
AdsPower多开的浏览器设定了独立的指纹，包括时区、默认语言、User Agent、字体、分辨率等。您可以试用系统提供的指纹信息，也能自定义指纹信息。
AdsPower指纹浏览器+代理IP=同设备多账号隔离访问。让您可以在互联网上运营账号和店铺保持安全，而且你还能同时连接到多个社交媒体帐户，不被平台检测到关联，这也就不存在账号被封禁的危险。
记录四、
基本指纹就是容易被发现和修改的部分，如 http 的 header。
{ "headers": {
"A***ept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
"A***ept-Encoding": "gzip, deflate, br",
"A***ept-Language": "zh-***,zh;q=0.9,en;q=0.8",
"Host": "httpbin.org",
"Sec-Fetch-Mode": "navigate",
"Sec-Fetch-Site": "none",
"Sec-Fetch-User": "?1",
"Upgrade-Insecure-Requests": "1",
"User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
}}
除了 http 中拿到的指纹，还可以通过其他方式来获得浏览器的特征信息，例如：
每个浏览器的UA
浏览器发送的 HTTP A***EPT 标头
浏览器中安装的浏览器扩展/插件，例如 Quicktime，Flash，Java 或 Acrobat，以及这些插件的版本
计算机上安装的字体。
浏览器是否执行 JavaScript 脚本
浏览器是否能种下各种 cookie 和 “super cookies”
是否浏览器设置为“Do Not Track”
系统平台（例如 Win32、Linux x86）
系统语言（例如 ***、en-US）
浏览器是否支持触摸屏
拿到这些值后可以进行一些运算，得到浏览器指纹具体的信息熵以及浏览器的 uuid。
这些信息就类似人类的体重、身高、肤色一样，有很大的重复概率，只能作为辅助识别，所以我们需要更精确的指纹来判断唯一性。
七、本文总结自网络，欢迎交流指正，关注我，一起学习。
八、参考链接：
前端使用fingerprintjs2获取浏览器指纹_Boale_H的博客-CSDN博客_fingerprintjs2
javascript - 你的浏览器，独一无二 --解读浏览器指纹 - 烧鱼的前端小记 - SegmentFault 思否
详解浏览器指纹 - 简书
什么是浏览器指纹？一文详解浏览器指纹追踪技术
