浏览器指纹是什么？14种指纹的技术原理

视频版链接：

浏览器指纹是什么？14种指纹背后的技术原理

浏览器指纹简介

这个网站在我没登录的情况下，就能生成一个用户ID。即使我打开了浏览器的无痕模式，生成出来的ID也是一模一样。这背后的技术就是浏览器指纹。即使用户没有登录，甚至开启了无痕模式，网站通过浏览器指纹，依然能够准确的知道用户身份。

本期视频，我们来看一下什么是浏览器指纹，为什么网站要搜集浏览器指纹，以及这背后的技术实现原理。

浏览器指纹的组成元素

每当我们访问一些网站的时候，这些网站都会悄悄收集着关于浏览器的相关各种细节，比如IP地址、USER AGENT、用户时区、浏览器插件，甚至你电脑上安装的字体。这些看似无关紧要的信息，当汇聚到一起时，就形成了一个浏览器指纹。这个指纹在大多数情况下都是独一无二的，就像现实生活中的指纹一样，它能让网站识别出一个个独立的访客。

即使清除了cookie或者使用了隐私模式，网站也能使用技术手段收集到用户浏览器指纹，精准的识别访客。无痕模式仅仅是清空了cookie，并且不保存cookie，但是并不能阻止网站追踪用户。

Fingerprintjs项目介绍

GitHub - fingerprintjs/fingerprintjs: The most advanced browser fingerprinting library.

fingerprintjs，这是github上面的一个开源项目，可以看到这个仓库有2万多的star数量。这个项目包含了大部分浏览器指纹的相关技术，并且有完整的源代码实现。

我们往下找，找到这里的Demo，点击这个链接，就可以进入视频开头的那个演示网站。这里显示出根据浏览器指纹计算出来的访客ID。除了ID以外，下面还有一系列计算访客ID所需要的特征值。

视频的后半段，我会讲一下这些特征值都是什么，以及背后的实现原理。

网站收集浏览器指纹的目的

浏览器指纹一般会用于广告。我们浏览一些没登录的网站的时候，广告联盟的广告推送服务都会默默地收集这些浏览器指纹，并且与你正在浏览的网页进行一个绑定。这样广告商就能更精准地识别你喜欢什么样的东西，方便广告商更精准地推送广告。

第二个用法是网站防刷。电商网站和社交平台都希望自己的用户是真实的，他们通常不愿意看到一个人掌握着大量的用户。通过浏览器指纹，网站就可以识别出哪些账号是同一个人操作的，从而设置相应的安全政策，保护网站防止被爬虫，防止被刷数据。

IP地址的作用

每个接入互联网中的设备，都需要一个唯一的地址来进行通讯，这个地址称为IP地址。网站可以通过解析网络层的数据报文，就可以得知源IP地址，也就是用户测的IP地址。网站获取到的IP地址，一般是用户的公网IP地址。

爬爬虾之前有一个完整视频，介绍了什么是公网IP，什么是内网IP，还有典型的家庭网络的拓扑结构，感兴趣的观众可以找来看一下。

比如，百度就提供查看自己IP地址的服务。我们在搜索栏搜索IP地址，就可以看到自己的公网IP地址。网站可以通过这个信息来定位用户、定制内容，并且进行安全检查，比如识别异常登录行为或者防止欺诈。网站可以通过IP地址对访问进行过滤，比如屏蔽掉一部分地区的网络请求。

IP地址与地理位置信息

通过IP地址，网站可以了解用户的国家、地区、城市、经纬度等等。有时候甚至可以获得邮政编码或者社区等更具体的地理位置信息。

网上有很多这种通过IP地址来查找地理位置的数据库。这个网站https://ip-api.com就提供了一个IP地址查找地理位置的服务。

我们往下找，这里可以输入一个IP地址，通过这个IP地址就可以查找它对应的地理位置。

我们可以看到，这个IP地址的归属地是安徽，并且右边给出了一个地图，显示出了大概位置。这里还有对应的经纬度，isp也就是运营商的名字，这里显示出的是江苏电信。

时区信息的获取

有了IP地址提供的位置信息，网站也可以推算出用户的时区。这里的timezone显示出了用户的时区，是亚洲上海。

同样的，网站也可以通过用户浏览器的js代码来得知对应的时区。这里我在浏览器上点击F12，我们切换到控制台这里，输入这段代码回车。这里通过js代码获取到了我浏览器本地的时区，还有本地的时间。

console.log(`本地时间: ${new Date().toLocaleString()}`);
console.log(`时区: ${Intl.DateTimeFormat().resolvedOptions().timeZone}`);

这里获取到的时区还有时间，其实就是我操作系统的时区还有时间。一般来说，通过js代码获取出来的时区应该能跟用户IP地址对应出来的时区对应上。如果网站检测到这两个信息的不一致，可能会引起网站的注意，特别是那种带有防欺诈系统的网站，他们可能会寻找到这种不匹配，作为用户异常行为的指标。

Canvas指纹技术

canvas是网页上一个可以让程序绘制图形的区域。

网站可以通过在canvas上绘制复杂的图形跟文字，然后分析这些内容在电脑上的具体显示方式。

因为每台电脑显示这些图形和文字的细节都有微小的不同，比如轮廓、阴影、颜色和像素排列方式都有细微的差异。这些微小的差异反映了电脑上的一系列设置和硬件特性，比如屏幕分辨率、使用的字体、还有显卡等等。

因为每个人电脑上的配置都是独一无二的，这使得canvas绘制出来的图形成为一种特殊的数字指纹。网站可以利用这个指纹来识别和追踪用户。

比如我们可以通过这一段js代码来生成上面这一个小的canvas区域。

这里面是一个gif动画，但是根据统计，调查了总共35个用户，他们电脑上生成出来的图片呈现方式都是不同的，虽然下面的js代码是一样的。

有了图片以后，我们可以调用这个方法toDataURL函数把图片提取出像素，并且返回一个二进制图像文件的base64编码。然后我们可以计算这个编码的MD5哈希值，从而得到canvas的指纹。

这里我通过网站测试了一下，他通过canvas计算生成了一个canvas的签名。

仅仅依靠这一个canvas指纹的区分，就可以做到10万个用户里面仅仅有两个人的指纹是重复的。配合上其他的浏览器指纹，可以非常精准的识别和追踪用户。

WebGL指纹技术

WebGL是一种JavaScript API，它可以在浏览器里面利用显卡绘制3D图形。

这样网站就可以收集用户的显卡详细信息，从而创建独一无二的浏览器指纹。

这个收集用户浏览器指纹的方式跟那个canvas有点像。网站首先绘制这么一个3D图像，然后他分析这个图像细节上的微小不同，生成一个哈希值。这个哈希值就可以精确的反映我电脑显卡的一些硬件特性还有一些细微的硬件设置。

音频指纹技术

Audio Context是浏览器提供的一组工具，它能够生成跟处理音频，让网站能够播放跟修改声音。

每个设备处理声音的细微差异都可以被网站捕捉到，形成一种特殊的声音指纹。它反映了每个人电脑上的不同音频硬件和软件的设置，所以它也就成为了浏览器指纹之一。

我们可以在这个页面测试一下自己的音频指纹。这里有一个可视化的图形，红色部分是标准的音频，可以看到我电脑生成出来的跟标准音频还是有一些细微差异的。通过计算这些细微的差异，最终得到一个哈希值，这个哈希值也就是我电脑上的音频指纹。

User Agent信息

User Agent是一个浏览器发送给网站的字符串，它包含了浏览器的类型、版本、操作系统等信息。我们在浏览器按F12，找到这里的网络选项卡，我们访问任意一个网站，这里我们找到一个网络请求，在网络请求的Header RequestHeader里面，我们往下找，最下面就有一个User Agent。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0

在我电脑上，这个User Agent长这个样子，

首先这里有我操作系统的版本，就是Windows 64。可能有的观众会好奇，爬爬虾我这明明是Edge浏览器，为什么User Agent里面有一堆Mozilla，还有苹果，包括这个Safari的内容呢？

这一大串冗余的字符串都是新诞生的浏览器，为了不被其他老牌浏览器排挤，不得不假扮成其他人，从而留下的历史遗留问题。等以后有机会我会专门出一期视频讲讲这部分的内容。

所以这个User Agent里面真正有价值的只有我操作系统的信息，还有最后这一部分标明我是Edge浏览器，使用的是Chromium内核129。

网站可以利用User Agent提供的信息为用户提供与设备和浏览器兼容的内容和功能。比如网站可以利用操作系统信息来判断提供手机版还是网页版的网站。当然User Agent也是浏览器指纹的重要组成部分，因为这里表明了操作系统还有浏览器版本等重要信息。

浏览器语言设置

浏览器语言通常指的是用户在浏览器里设置的首选语言。这决定了用户在访问多语言网站时看到的默认语言版本。

我们还是从刚才的那个请求里，在Header的RequestHeader里面，这里有一个Accept-Language，里面有这么一串的内容。这里面是许多语言的类型，通常按照用户设置的偏好进行排列。

浏览器语言可以通过浏览器的设置进行更改。我们以这个Edge浏览器举例，这里点击设置，找到设置，在左侧找到语言，这里就可以设置浏览器的偏好语言。用户可以列出多个语言，以便网站从中选择一个最适合的语言来显示内容。当然我这个语言的顺序列表也是浏览器指纹的重要组成部分。

字体信息收集

每台计算机上安装的字体集合可能会因为用户的个人选择、操作系统等等的因素有所不同。比如在我的电脑上，我就安装过思源黑体等等的开源免费字体。我之前有个视频，介绍如何在github上面下载开源免费的字体。

浏览器可以通过一些复杂的JavaScript脚本列出用户设备上所有可用的字体。我们找到视频开头说的这个Fingerprint js这个库，我们在它的源代码里面可以找到这个fonts.ts文件。

fingerprintjs/src/sources/fonts.ts at master · fingerprintjs/fingerprintjs (github.com)

这套代码通过这个span的方式逐个绘制上面字体列表里面的字体，然后通过这个方法来判断这些字体是否绘制成功。如果绘制成功，那代表用户的计算机上安装过这个字体。

即使两个用户使用了相同版本的浏览器和相同版本的操作系统，他们安装过的字体很可能不同。这也成为了使用浏览器指纹区分用户的另外一种重要方式。

屏幕分辨率信息

屏幕分辨率不仅包括物理屏幕的实际像素数，还包括浏览器窗口的当前视图大小，也就是浏览器内部除去工具栏、标签栏、滚动条等等内部实际可用窗口的大小。每个人窗口设置不同，它的可视区域大小也是不同的，所以通过屏幕分辨率的取值也能取得一个相对独特的指纹。

我们来演示一下如何使用js代码获取用户的分辨率。这里点击F12，打开一个新的控制台窗口，切换到控制台，然后我把这段代码粘过来。

const screenWidth = window.screen.width*window.devicePixelRatio;
const screenHeight = window.screen.height*window.devicePixelRatio;
console.log(`屏幕分辨率为: ${screenWidth}x${screenHeight}`);const browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log(`屏幕内部宽度: ${browserWidth*window.devicePixelRatio}`);
const browserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log(`屏幕内部高度: ${browserHeight*window.devicePixelRatio}`);

这段代码获取的是用户屏幕的实际分辨率，可以看到我的屏幕分辨率是2K。下面这段代码可以获取用户浏览器里面实际可用窗口的大小，这里我再回车一下。这里显示的是浏览器内部的实际可用宽度跟高度。

Client Rects布局信息

Client Rects它是一种浏览器的API，它提供了网页元素的布局信息，包括元素的位置跟大小，称之为矩形，也就是RECT。两台设备打开的即使是同一个页面，由于它们的硬件配置、操作系统、浏览器版本、屏幕分辨率等等细微差异，渲染出来的网页元素布局信息可能也会有所不同。这些差异可以被用来组装成一个特殊的字符串，也就是浏览器指纹。

我们来看一下它的实现原理：