未登录也能知道你是谁？浏览器指纹了解一下！
引言
大多数人都遇到过这种场景，我在某个网站上浏览过的信息，但我并未登录，可是到了另一个网站发现被推送了类似的广告，这是为什么呢？
本文将介绍一种浏览器指纹的概念，以及如何利用它来判断浏览者身份。
浏览器指纹
浏览器指纹是指通过浏览器的特征来唯一标识用户身份的一种技术。
它通过记录用户浏览器的一些基本信息，包括操作系统、浏览器类型、浏览器版本、屏幕分辨率、字体、颜色深度、插件、时间戳等，通过这些信息，可以唯一标识用户身份。
应用场景
其实浏览器指纹这类的技术已经被运用的很广泛了，通常都是用在一些网站用途上，比如：
- 资讯等网站：精准推送一些你感兴趣的资讯给你看
- 购物网站: 精确推送一些你近期浏览量比较多的商品展示给你看
- 广告投放: 有一些网站是会有根据你的喜好，去投放不同的广告给你看的，大家在一些网站上经常会看到广告投放吧？
- 网站防刷: 有了浏览器指纹，就可以防止一些恶意用户的恶意刷浏览量，因为后端可以通过浏览器指纹认得这些恶意用户，所以可以防止这些用户的恶意行为
- 网站统计: 通过浏览器指纹，网站可以统计用户的访问信息，比如用户的地理位置、访问时间、访问频率等，从而更好的为用户提供服务
如何获取浏览器指纹
指纹算法有很多，这里介绍一个网站 https://browserleaks.com/ 上面介绍了很多种指纹，可以根据自己的需要选择。
这里我们看一看canvas，可以看到光靠一个canvas的信息区分，就可以做到15万用户只有7个是重复的，如果结合其他信息，那么就可以做到更精准的识别。
canvas指纹
canvas指纹的原理就是通过 canvas 生成一张图片，然后将图片的像素点信息记录下来，作为指纹信息。
不同的浏览器、操作系统、cpu、显卡等等，画出来的 canvas 是不一样的，甚至可能是唯一的。
具体步骤如下：
- 用canvas 绘制一个图像，在画布上渲染图像的方式可能因web浏览器、操作系统、图形卡和其他因素而异，从而生成可用于创建指纹的唯一图像。在画布上呈现文本的方式也可能因不同web浏览器和操作系统使用的字体渲染设置和抗锯齿算法而异。
- 要从画布生成签名，我们需要通过调用
toDataURL()函数从应用程序的内存中提取像素。此函数返回表示二进制图像文件的base64编码字符串。然后，我们可以计算该字符串的MD5哈希来获得画布指纹。或者，我们可以从IDAT块中提取CRC校验和，IDAT块位于每个PNG文件末尾的16到12个字节处，并将其用作画布指纹。
我们来看看结果，可以知道，无论是否在无痕模式下，都可以生成相同的 canvas 指纹。
换台设备试试
其他浏览器指纹
除了canvas，还有很多其他的浏览器指纹，比如：
WebGL 指纹
WebGL（Web图形库）是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。
WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 元素中使用。
这种一致性使 API 可以利用用户设备提供的硬件图形加速。
网站可以利用 WebGL 来识别设备指纹，一般可以用两种方式来做到指纹生产：
WebGL 报告——完整的 WebGL 浏览器报告表是可获取、可被检测的。在一些情况下，它会被转换成为哈希值以便更快地进行分析。
WebGL 图像 ——渲染和转换为哈希值的隐藏 3D 图像。由于最终结果取决于进行计算的硬件设备，因此此方法会为设备及其驱动程序的不同组合生成唯一值。这种方式为不同的设备组合和驱动程序生成了唯一值。
可以通过 Browserleaks test 检测网站来查看网站可以通过该 API 获取哪些信息。
产生 WebGL 指纹原理是首先需要用着色器（shaders）绘制一个梯度对象，并将这个图片转换为Base64 字符串。
然后枚举 WebGL 所有的拓展和功能，并将他们添加到 Base64 字符串上，从而产生一个巨大的字符串，这个字符串在每台设备上可能是非常独特的。
例如 fingerprint2js 库的 WebGL 指纹生产方式：
HTTP标头
每当浏览器向服务器发送请求时，它会附带一个HTTP标头，其中包含了诸如浏览器类型、操作系统、语言偏好等信息。
这些信息可以帮助网站优化用户体验，但同时也能用来识别和追踪用户。
屏幕分辨率
屏幕分辨率指的是浏览器窗口的大小和设备屏幕的能力，这个参数因用户设备的不同而有所差异，为浏览器指纹提供了又一个独特的数据点。
时区
用户设备的本地时间和日期设置可以透露其地理位置信息，这对于需要提供地区特定内容的服务来说是很有价值的。
浏览器插件
用户安装的插件列表是非常独特的，可以帮助形成识别个体的浏览器指纹。
音频和视频指纹
通过分析浏览器处理音频和视频的方式，网站可以获取关于用户设备音频和视频硬件的信息，这也可以用来构建用户的浏览器指纹。
那么如何防止浏览器指纹呢？
先讲结论，成本比较高，一般人不会使用。
现在开始实践，根据上述的原理，我们知道了如何生成一个浏览器指纹，我们只需要它在获取toDataURL时，修改其中的内容，那么结果就回产生差异，从而无法通过浏览器指纹进行识别。
那么，我们如何修改toDataURL的内容呢？
我们不知道它会在哪里调用，所以我们只能通过修改它的原型链来修改。
又或者使用专门的指纹浏览，该浏览器可以随意切换js版本等信息来造成无序的随机值。
修改 toDataURL
第三方指纹库
FingerprintJS
FingerprintJS是一个源代码可用的客户端浏览器指纹库，用于查询浏览器属性并从中计算散列访问者标识符。
与cookie和本地存储不同，指纹在匿名/私人模式下保持不变，即使浏览器数据被清除。
ClientJS Library
ClientJS 是另一个常用的JavaScript库，它通过检测浏览器的多个属性来生成指纹。
该库提供了易于使用的接口，适用于多种浏览器指纹应用场景。
来源：juejin.cn/post/7382344353069088803
