浏览器指纹

浏览器指纹

浏览器指纹是一种用于识别用户的技术，通过收集用户的浏览器信息，如浏览器版本、操作系统、屏幕分辨率、插件、字体等信息，然后通过一定的算法生成一个唯一的标识。

那么它有什么用呢？我们先介绍浏览器的无痕模式。

浏览器无痕模式

浏览器无痕模式是一种隐私保护模式，它不会保存用户的浏览记录、cookie、网页缓存等信息，当用户关闭无痕模式时，浏览器会删除所有的无痕模式下的信息。

因为无痕模式下网站不会保存 cookie、localStorage、sessionStorage 等信息。这意味着我们不能在前端存储信息。同时，如果用户没有登录，后端没有保存用户的身份信息的话，则难于获取用户过去的浏览数据，这对于一些需要用户信息以提供个性化服务的网站来说是个难题。

比如对于一个无需登录的视频网站，如果我第一次进入时浏览了很多原神视频，那么下次进入就应该给我推荐更多原神相关的视频。然而，由于我开启了无痕模式，网站的前后端都无法获取我的身份，它不知道上次我看了什么，自然也就难以推荐。

浏览器无痕模式只是在浏览器端不保存用户信息，但是在网络上，用户的信息还是可以被获取的。你访问的网站、你所在的学校、你的互联网服务提供商等都可能获取你的信息。
不要以为开了无痕模式就可以随意浏览不良网站，这只是一种隐私保护模式，不是绝对的隐私保护。

浏览器指纹获取用户身份

上面谈到无痕模式下获取用户身份的困难，而浏览器指纹可以较好地解决这个问题。

当你初次访问网站时，网站会收集你的浏览器信息，然后生成一个唯一的标识，这个标识可以用来识别你的身份。当你再次访问网站时，网站会再次收集你的浏览器信息，然后与之前的标识进行对比，如果两者相同，则说明你是同一个用户。

浏览器指纹反爬虫

对于一些简单的爬虫，如果它们每次携带固定的浏览器信息，那么我们就可以通过浏览器指纹识别它们并限制它们的访问。

浏览器指纹的采集

浏览器的很多信息都可以用来生成指纹，比如：

• 浏览器版本
• 操作系统
• 屏幕分辨率
• 时区
• 语言
• 插件
• 字体
• 硬件信息
• 网络信息
• …

下面重点介绍 canvas 指纹。

canvas 指纹

canvas 是 HTML5 新增的元素，它可以用来绘制图形、动画、图像等。canvas 指纹是通过浏览器绘制 canvas 时的一些特性来生成的。

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const txt = 'Browser fingerprint'
ctx.textBaseline = 'top'
ctx.font = '14px "Arial"'
ctx.textBaseline = 'alphabetic'
ctx.fillStyle = '#f60'
ctx.fillRect(125, 1, 62, 20)
ctx.fillStyle = '#069'
ctx.fillText(txt, 2, 15)
ctx.fillStyle = 'rgba(102, 204, 0, 0.7)'
ctx.fillText(txt, 4, 17)
const b64 = canvas.toDataURL()
console.log(b64)

将上面的代码放到浏览器的控制台中运行，会得到一个 base64 编码的字符串，这个字符串就是 canvas 指纹。

你可能会觉得奇怪，上面代码不就是使用canvas绘制了一些文字和矩形吗？怎么就能生成不一样的指纹了呢？

这是因为浏览器在绘制 canvas 时，会受到硬件、浏览器版本、操作系统等因素的影响，这些因素会导致 canvas 的绘制结果不一样，从而生成不一样的指纹。

使用 fingerprint 可以生成用户的浏览器指纹，按照官方的说法，它可以识别 99.5% 的回头访客！

浏览器指纹的缺陷

由于浏览器指纹是通过浏览器的一些特性来生成的，因此不同的浏览器、不同的设备、不同的网络环境都会导致不同的指纹，这就导致了浏览器指纹的不稳定性。当你更换设备、更换网络环境、更换浏览器时，你的指纹都可能发生变化。

浏览器指纹带来的隐私安全问题

即便在无痕模式下：

你的大量浏览器信息被收集自不必说，因为即使没有浏览器指纹技术也一样可以收集。借助浏览器指纹，别人可能会推算出你的真实身份，追踪你的行踪，甚至可以进行诈骗。同时，某些网站不允许注册多个账号，当发现你的多个账号的浏览器指纹相同时，可能会封禁你的账号。

可以选择使用隐私浏览器，如 Tor、Brave 等，或者指纹浏览器，如 AdsPower 等保护你的隐私。再加上使用 VPN 也可以隐藏你的真实 IP 地址。

参考

• B站：渡一教育
• 简书：详解浏览器指纹