一、应用场景：
场景一：在网站上浏览某个商品，了解了相关的商品信息，但并没有下单购买，甚至没有进行登录操作。过两天用同台电脑访问其他网站的时候却发现很多同类商品的广告。
场景二：在未登录视频账号的情况下，去浏览一些二次元的长视频或短视频，通过浏览器指纹将这一行为记录下来，下次登录时的个性化推荐，直接推送用户大概率喜欢的二次元内容，获得用户好感，转变为网站会员。
前提条件：大多数浏览器都启用了 JavaScript 功能，它向外部公开了大量关于你的浏览器的信息。
好坏要辩证的看：
坏处-泄露用户隐私信息 ：我的浏览器在任何地方和时间都能被识别出来吗？
这里有几个网站，比如 AmIUnique 和 Panopticlick，它们会基于数据库内大约 100 万个指纹信息，来确定你的浏览器指纹信息是否唯一。然而，45 天和 2 年的时间足够让你的浏览器指纹发生改变，而这不需要你做任何事情。导致这种变化的可能是浏览器自动更新、调整窗口大小、安装新字体，甚至调整夏令时。所有这些都会让你的浏览器在很长一段时间内很难再次被唯一识别。这些网站将你的指纹与他们的整个数据库进行比较，该数据库包含了至少两到三年（或 Panopticlick 则是 45 天）收集的数据。
好处-完善风控机制
（比如一般情况下只需要通过邮箱和密码就可以登录。如果有一天小偷盗取了你的登录凭证并试图从他的设备上登录，银行或社交网络是可以检测到这种异常行为的，因为浏览器指纹发生了变化。为了防止被诈骗，平台可能会要求你做出进一步的授权，比如短信验证码。）
二、什么是浏览器指纹
就像人的身份证号一样，浏览器指纹就是浏览器唯一不变的身份证明，
概念解释：“浏览器指纹”是一种通过浏览器对网站可见的配置和设置信息来跟踪Web浏览器的方法
通过获取浏览器具有辨识度的信息，进行一些计算得出一个值，那么这个值就是浏览器指纹。辨识度的信息可以是UA、时区、地理位置或者是你使用的语言等等，你所选取的信息决定了浏览器指纹的准确性。
三、浏览器指纹技术发展
1.第一代是状态化的，主要集中在用户的cookie和evercookie上，需要用户登录才可以得到有效的信息。
注：evercookie解释
2.第二代才有了浏览器指纹的概念，通过不断增加浏览器的特征值从而让用户更具有区分度，例如（UA、浏览器插件信息）
3.第三代已经将目光放在人身上了，通过收集用户的行为、习惯来为用户建立特征值甚至模型，可以实现真正的追踪技术，（这部分目前实现比较复杂，依然在探索中。）
四、指纹采集
浏览器指纹也可以进行简单的分为普通指纹和高级指纹，普通指纹可以理解为容易被发现并且容易修改的部分
普通指纹：
例如http header
https://httpbin.org/headers
浏览器的Accept-Language、User-Agent，通过前者可以拿到浏览器的语言信息，这个http头部实体信息可能是通过你当前的操作系统语言，或者浏览器设置的语言信息所生成的。User-Agent包含了浏览器和操作系统的信息
其他的基本信息，例如ip，物理地址、地理位置等也可以拿到：
查看自己的二代指纹
https://fingerprintjs.com/demo，https://www.whatismybrowser.com/
指纹可以包括如下信息：
下图是数个特征值的信息熵、重复概率和具体的值
信息熵（entropy）注释：是接收的每条消息中包含的信息的平均量，熵越高，则能传输越多的信息，熵越低，则意味着传输的信息越少。
https://www.whatismybrowser.com/
将上面的指纹信息综合起来，可以大大降低碰撞率，提高客户端uuid的准确性。指纹的也有权重之分，某些信息熵较大的特征值会有的更大的权重
计算方式：https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy
高级指纹
canvas指纹
Canvas是HTML5中的动态绘图标签，也可以用它生成图片或者处理图片。即便使用Canvas绘制相同的元素，但是由于系统的差别，字体渲染引擎不同，对抗锯齿、次像素渲染等算法也不同，canvas将同样的文字转成图片，得到的结果也是不同的。
function getCanvasFingerprint () {
var canvas = document.getElementById("anchor-uuid");
var context = canvas.getContext("2d");
context.font = "18pt Arial";
context.textBaseline = "top";
context.fillText("Hello, user.", 2, 2);
return canvas.toDataURL("image/jpeg");
}
测试指纹https://browserleaks.com/canvas
AudioContex指纹
AudioContext指纹和Canvas类似也是基于硬件设备或者软件的差别，来产生不同的音频输出，然后计算得到不同的hash来作为标志，当然这里的音频并没有直接在浏览器中播放出来，只需要拿到播放前的处理数据就行，音频指纹测试地址
WebRTC
WebRTC（网页实时通信，Web Real Time Communication），是可以让浏览器有音视频实时通信的能力，它提供了三个主要的API来让JS可以实时获取和交换音视频数据，MediaStream、RTCPeerConnection和RTCDataChannel。当然如果要使用WebRTC获得通信能力，用户的真实ip就得暴露出来（NAT穿透），所以RTCPeerConnection就提供了这样的API，直接使用JS就可以拿到用户的IP地址。
现阶段难点：
跨浏览器指纹
跨浏览器指纹就是即便是在不同浏览器上也可以取得相同或者近似值的稳定浏览器特征。
常规的特征值很难满足在信息量足够的情况下还保持高稳定性。（canvas稳定性8%）
挑选几个表中和硬件有关的特征值Task(a)~Task(r)、List of fonts（JS）、TimeZone和CPU Vritual cores、
Task(a)~Task(r)，它是一种显卡渲染(Rendering Tasks)图片的特征值。例如Task（a）Texture，它是测试常规 片段着色器中的纹理功能，通过渲染一个随机的三基色值的像素，片段着色器需要在纹理中插入点，以便将纹理映射到模型上的每个点，这个插入算法在不同的显卡又是不一致的。如果纹理变化较大，那么差异也就越明显，我们可以通过记录这种差异来为这个显卡作出区分度。
List of fonts（JS），通过js获取页面支持的字体情况。获取页面支持的字体分为两种方式，Flash和JS，现在Flash渐渐退出了舞台就不考虑它了。List of fonts是值通过js拿到页面支持的字体情况以及如何绘制字体，是通过测量不同字体的文本HTML元素的填充尺寸，来和其他设备做区分。
TimeZone，时区，这个比较好理解，既然是同一台设备那么时区应该也是一致的。
CUP Vritual cores即为CPU的内核数量，最简单的方法就是通过一个navigator.hardwareConcurrency来拿到。
尽管在低版本浏览器是不支持这个API的，但也可以通过这个polyfill拿到。实现原理大致为借用Web Worker的能力，监听payload的时间，计算量达到硬件最大并发的时候就可以得到内核的数量（有点硬核）。
UUID的计算
综合以上的指标特征，可以计算出一个属于你自己的唯一的 uuid，这就是你的 "浏览器指纹" 了。
使用 clientjs（https://github.com/jackspirou/clientjs） 可以轻而易举的帮你获取这些指标，并最终获取 uuid
// 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);
五、如何防范浏览器指纹采集
现状：如果你没有足够专业的知识或者非常频繁更换浏览器信息的话，几乎100%可以通过浏览器指纹定位到一个用户
使用浏览器指纹的利弊：
1.泄露的隐私非常片面，只能说泄露了用户部分浏览网页时的行为。
2.价值不够，用户行为并未将实际的账户或者具体的人对应起来，产生的价值有限。
3.有益利用，利用浏览器指纹可以隔离部分黑产用户，防止刷票或者部分恶意行为。
防范措施
1.Do Not Track
在http头部可以声明这样一个标志“DNT”意味“Do Not Track”，如果值为1表示为不要追踪我的网页行为，0则为可以追踪。即便没有cookie也可以通过这个标志符告诉服务器我不想被追踪到，不要记录我的行为。
不好的消息是大多数网站目前并没有遵守这个约定，完全忽略了“Do Not Track”这个信号。
工具Privacy Badger，它是一个浏览器插件形式的广告拦截器，对于那些遵守这个约定的公司会在这个广告拦截器的白名单上，允许显示广告，从而激励更多的公司遵守“Do Not Track”，以便完全展示广告。
2.Tor Browser
通过上述我们对浏览器指纹的了解，不难发现，如果你浏览器的特征越多，越容易被追踪到。相反如果你想要刻意将某些浏览器特征隐藏或者进行魔改，那么恭喜你，你的浏览器可能就拥有了一个独一无二的浏览器指纹，都不需要刻意去计算，直接就可以将你和其他用户区分开。
所以有效的方法是尽量将特征值进行大众化，例如目前市面最广泛的搭配是Window 10 + Chrome，那么你将UA改为这个组合就是一个有效的方法，同时尽量避免网站获取信息熵非常高的特征值，例如canvas指纹。
Tor 浏览器在这上面做了很多工作，以防止它们被用来跟踪Tor用户，为了响应Panopticlick和其他指纹识别实验，Tor浏览器现在包含一些补丁程序，以防止字体指纹（通过限制网站可以使用的字体）和Canvas指纹（通过检测对HTML5 Canvas对象的读取并要求用户批准）来防止，例如上面获取Canvas指纹的代码，在Tor上会弹出如下警告
同时还可以将Tor浏览器配置为主动阻止JavaScript。
3.禁用JS
这是一个比较暴力的方法，直接禁止网站使用JavaScript可以非常有效地防御浏览器指纹追踪，但是这样会导致页面较大部分地功能不可用。
而且非常不幸的是，即便禁止了JS但是还可以通过CSS来采取浏览器的信息，例如：
@media(device-width: 1080px) {
body {
background: url("https://example.org/1080.png");
}
}
可以在服务器中看1080.png图片的请求日志，就可以得知哪些用户的屏幕是1080px的， 在 Mozilla Firefox 中，甚至曾经存在过可以直接查询 Windows 系统版本和 Windows 主题的 CSS 查询。现在这个问题已经被修复了
实验表明，通过提取 3 个基本的浏览器特征，即日期格式、用户代理字符集和屏幕可用大小（屏幕大小减去程序坞、窗口栏等的大小），我们可以实现 14.2 的熵，在某些情况下，这已经足够识别浏览器（以及用户）。