第一部分 概述

正如手指指纹一样，当我们浏览网页，访问网站的时候，也会留下自己的独特的个人信息。浏览器指纹识别是指网站用于收集信息的跟踪技术。

网站通过该技术收集信息，如操作系统、浏览器版本、浏览器使用的语言、所在的时区、屏幕分辨率、电脑安装的字体等等。然后再将这些信息拼接、整合在一起，就可以形成独特的在线指纹，也叫浏览器指纹。每个用户的浏览器指纹都是与众不同的，在互联网上几乎不可能找到一样的浏览器指纹。

正是由于浏览器指纹的唯一性，即使在数十亿的庞大的互联网人群中，网站也可以精准地识别出来。目前，浏览器指纹识别技术的识别准确率在90%以上，有的甚至能达到99%。

尽管很多人可能认为匿名浏览或清除cookie就能够避免浏览器指纹的影响，但实际上这并不能彻底解决问题。因为浏览器指纹技术是基于前端技术实现的，不是我们随随便便就能“绕过”的，需要更专业的技术才能解决问题。

1.1 什么是浏览器指纹？

浏览器指纹，顾名思义，是指通过收集和整合用户在浏览器使用过程中产生的多种信息，并结合这些信息的微小差异，生成一个独一无二的标识字符串，以此来识别和跟踪用户的在线行为。就像人类的指纹一样，浏览器指纹依靠多个细微的特征进行建模，创造出一个极其精准的标识符，可以区分不同的设备和用户身份。

1.2 指纹识别的应用

浏览器指纹技术应用在许多领域，例如：

• 数字营销：电商网站、旅游网站、售票网站会不定期或定期的举行促销活动，当网站知道用户所在的地区，过往的浏览行为后，会为用户推荐不同的折扣活动，显示不同的价格等。其次，广告技术公司会利用浏览器指纹技术，在推送广告的时候，可以做到“千人千面”：喜欢游戏机的用户会经常看到游戏机相关的广告，喜欢化妆品的用户则会看到化妆品相关的广告。
• 提供定制的内容：由于浏览器指纹包含用户的操作系统、浏览器版本、使用设备、屏幕分辨率等信息。网站为了给用户提供最佳的浏览体验，会利用这些信息为用户展示不同的内容。例如您用手机访问网站的时候，会跟电脑的界面不一样，布局、字体都有相应的调整，界面不会显示得很拥挤；推送的内容会与PC端有差异。
• 账户安全：浏览器指纹技术最初的应用领域就是网络安全。当用户的账号在异常的设备上登录，或者有可疑的登录行为时，网站会要求用户进行身份验证，或者阻止用户在新的设备上登录。例如，金融机构的安全系统通过分析账户的指纹特征，判断账户是否在短时间内从多个不同的位置，在不同的设备上登录。如果有可疑的迹象，安全系统可能会阻止账户的操作或则预防性的冻结账户，从而保护账户的安全。
• 账户关联：当多个账户的指纹相似或者一致时，为了防止不公平或欺诈的出现，网站会将这些账户标记为关联账户，并将一些账户封禁。大多数电商网站、社交网站都不允许一个人拥有多个账号，这也是为了网站与用户的共同利益。
• 机器人检测：网站会使用浏览器指纹技术区别流量请求是来自于正常用户还是机器人用户。如果通过指纹识别技术检测到请求是网络爬虫，那么网站会阻止爬虫的访问。同时，网站会收集各种符合机器人特征的指纹（如浏览器HTTP请求头、请求数量、频率、异常的浏览行为等），从而采取反爬虫的措施，保障正常用户的浏览体验。

1.3 浏览器指纹有哪些信息

当用户访问网站的时候，用户的设备会向网站发送连接请求以显示网站的内容。目标网站可以访问和收集用户浏览器发送的相关的信息，其中就包括大量的设备信息。以下是一些常见的指纹信息：

• IP地址
• 用户所在时区
• UserAgent字符串
• 设备安装的字体
• 屏幕分辨率
• 浏览器及其版本
• 浏览器窗口大小
• 浏览器语言设置
• 浏览器扩展
• 操作系统及其版本
• HTTP请求头属性
• 音视频设备信息
• Canvas渲染数据
• WebGL渲染数据
• CPU、GPU信息

第二部分 浏览器指纹实现

2.1 Canvas指纹

2.1.1 什么是Canvas指纹识别？

Canvas指纹，是一种基于网页的HTML5 Canvas元素来进行用户跟踪的技术。它通过分析用户设备上Canvas元素渲染图形的独特方式，生成一个与众不同的标识符，从而实现对用户的识别和追踪。

HTML5 Canvas是网页中用于绘制图形的一个元素，它可以显示各种视觉内容，包括文本、图形和动画。不同设备的浏览器在渲染Canvas时，会因硬件和软件配置的差异而产生细微不同的结果，如文本的字体大小、线条粗细、图形的阴影效果等，Canvas指纹便是借此跟踪用户。

2012年，加州大学的研究人员Hovav Shacham和Keaton Mowery首次提出了Canvas指纹识别技术。他们发表的论文Pixel Perfect: Fingerprinting Canvas in HTML5详细阐述了如何通过HTML5的Canvas特性来识别和跟踪互联网用户。从那时起，Canvas指纹识别技术开始被广泛关注，并在随后的几年中，被越来越多的网站和网络服务提供商采用。

与传统的cookie跟踪或IP地址跟踪不同，Canvas指纹技术的独特之处在于它的隐蔽性和准确度。这一技术不依赖于用户设备上存储的任何信息，即使用户禁用了cookie或者使用了IP匿名化工具，Canvas指纹技术仍然可以有效地追踪用户的活动。它通过收集如下信息来形成用户的“指纹”：

• 设备型号
• 浏览器类型和版本
• 操作系统
• 屏幕分辨率
• 时区
• 用户代理字符串（User Agent）
• 语言设置
• 插件
• 扩展程序

这些收集到的数据被聚合在一起，形成了一个用户的“指纹”。由于两个用户的浏览器数据几乎不可能完全相同，因此这种技术在识别用户方面的准确率高达99%。

2.1.2 Canvas指纹识别的工作原理

Canvas指纹识别技术通过HTML5的Canvas API来实现，该API允许网页通过JavaScript在网页上绘制图像和文字。当用户访问植入了Canvas指纹脚本的网站时，该脚本会在用户的浏览器上绘制带有随机字体和大小的文本，以及随机背景。然后，这些Canvas像素数据会被转换成Base64编码格式，再通过哈希函数转换成一个独特的指纹。

不同的计算机基于各自的图像处理引擎、图像导出选项、浏览器压缩级别等因素，在图像格式层面上渲染相同的Canvas图像时会有所不同。在系统层面上，不同的操作系统可能因为使用了不同的字体、子像素渲染算法和抗锯齿设置，而渲染出不同的结果。

Canvas指纹依赖的数据包括：

• 操作系统
• 浏览器
• 显卡
• 显卡驱动程序
• 客户端安装的字体

2.1.3 Canvas指纹识别的具体步骤

1. 网站通过JavaScript代码请求浏览器渲染一个Canvas对象。
2. JavaScript代码指定了一系列绘制任务，如绘制线条、不同颜色的几何图形以及扭曲的背景。
3. Canvas对象根据脚本指令在网页上绘制图形，这个过程遵循数学公式，例如使用坐标点和半径绘制圆形。
4. 不同的计算机将根据自身的系统和浏览器特性，渲染出略有差异的图形。
5. 这些Canvas像素数据被编码并哈希处理，形成了一个几乎独一无二的标识符——Canvas指纹。

这种技术的一大优势在于，它不会在用户系统中加载任何内容，而是利用已有的资源。为了有效工作，Canvas指纹识别需要一个数据库来存储指纹信息。当用户再次访问网站时，系统会生成一个哈希值，并将其与数据库中的指纹库进行比对，以识别回访者或新用户。

2.1.4 Canvas指纹识别的优缺点

Canvas指纹识别对于互联网用户和网站所有者都具有至关重要的作用。然而，它也有一些缺点，下面我们将探讨其中的一些。

优点

• 唯一性：Canvas指纹识别依据的是每台计算机渲染图形时的细微差异，这些差异由硬件配置、驱动程序、浏览器版本等因素引起，如不同的计算机对字体抗锯齿和字体提示（Hinting）的处理方式不同，这使得每台计算机生成的Canvas指纹具有高度的唯一性。
• 跨越传统跟踪防御：许多用户使用VPN、广告拦截器、代理服务器等隐私工具来防止在线跟踪，然而，Canvas指纹识别能够绕过这些常规的隐私保护工具，为网站提供了一种更为精细的用户识别手段。

缺点

• 准确性问题：虽然Canvas指纹识别的精确度高达99.99%，但在用户众多的移动设备环境下，它的效果就不太理想了。由于移动设备普遍采用标准化的硬件和软件，因此Canvas指纹难以对每个用户形成唯一标识，这在访问量大的网站中可能导致配置相似的用户共享相同的指纹，使数据分析变得更为复杂。
• 合法性问题：关于浏览器指纹技术的合法性，目前还没有具体的法律条文对其使用作出明确规定。虽然欧盟的通用数据保护条例（GDPR）在使用此类系统时要求必须获得用户的明确同意，但该条例并没有直接针对浏览器指纹技术提出专门的规定。因此，在某些特定场景下，例如提供视频播放服务的电子通讯领域内使用Canvas指纹技术，可能会处于法律的灰色地带。
• 隐私问题：随着各种数据收集技术的广泛应用，公众对个人隐私的关注也随之上升。网站在未征得用户同意的情况下收集数据一直是一个备受关注的问题。虽然Canvas指纹识别仅采集了用户的浏览器和操作系统信息，但这些信息的私密性已足够引起隐私担忧。

2.2 字体指纹

字体可以成为浏览器指纹的一部分。当设备安装了特定的字体，或者没有安装某些字体，这些信息可以被用来生成设备的唯一指纹。这是因为每个人的设备上安装的字体组合可能是独特的，特别是对于安装了大量非标准字体的用户来说。因此，字体可以帮助形成一个相当独特和详细的浏览器指纹。

字体指纹主要是通过浏览器的JavaScript API来实现的。这种技术的主要原理是，浏览器可以获取并报告用户设备上可用的字体列表。这些字体列表，结合其他浏览器和设备的信息，可以形成一个相当独特的浏览器指纹。

以下是一些常用的字体指纹技术：

• 字体枚举：这是最直接的方法，就像查看设备上安装了哪些应用一样，网站可以查看设备上安装了哪些字体。这是通过浏览器提供的一种功能来实现的，它会返回一个包含了所有已安装字体的列表。

• 字体检测：这是一种更微妙的方法。网站可以让浏览器显示一段使用特定字体的文本，然后测量这段文本的大小。如果这个字体已经安装，那么这段文本的大小会有所变化，通过这种方式，网站就可以知道这个字体是否已经安装。这就像是一个试错的过程，网站尝试使用一个字体，然后看看浏览器的反应。

• 画布指纹：这是一种更复杂的方法。网站可以在一个虚拟的画布上绘制一段文本，然后看看这段文本的像素是如何排列的。由于不同的字体会导致像素的排列方式不同，所以网站可以通过比较这段文本的像素排列来判断您的设备上是否安装了这个字体。这就像是在一个黑板上写下一段文字，然后通过研究这段文字的笔迹来判断您使用的是什么笔。

2.3 WebGL指纹

2.3.1 WebGL是什么？

WebGL（Web Graphics Library）是一项强大的JavaScript API，专为在浏览器中实现交互式3D和2D图形而设计。它建立在OpenGL ES（OpenGL for Embedded Systems）标准之上，利用计算机的图形处理单元（GPU）在浏览器中创造高性能的图形和视觉效果。

WebGL的独特之处在于其跨平台性，支持多种操作系统和浏览器，确保图形应用程序在各类设备上无缝运行。通过硬件加速，WebGL实现了更高效的图形渲染，使得复杂的图形和动画在浏览器中表现得更为流畅。这项技术的实时渲染能力使其在游戏开发和虚拟现实等领域广受欢迎，开发者可以创造出生动且具有交互性的图形体验。

同时，WebGL不仅用于图形渲染，还能巧妙地融合图形与数据，例如在数据可视化领域创造动态而富有交互性的图表。作为一个开放标准，WebGL得到了广泛支持和社区参与，为开发者提供了丰富的资源和文档，使其能够更好地学习和改进WebGL项目。

2.3.2 WebGL与Canvas之间的联系

WebGL和Canvas是两种用于在Web浏览器中呈现图形的技术，它们之间有一些本质的区别。我们会用更通俗的语言帮你理解WebGL与Canvas之间的关系：

想象一下你在画板上画画。Canvas就像是这个画板，它提供了一个简单的方式，让你可以在上面画各种形状、颜色，做出漂亮的图案。这是一个二维的画板，就像平面上的纸一样。

现在，如果你想要在这个画板上创造更加立体、有深度感的图形，就需要WebGL登场了。WebGL就像是给你的画板添加了一个魔法，让你可以在上面创建美丽的三维效果，就像是画了一个立体的小雕塑一样。

所以，Canvas和WebGL都是用来在网页上创造各种图形的工具，只不过Canvas更适合简单的、二维的需求，而WebGL更适合复杂的、有立体感的三维图形。就好比Canvas是你的平面画板，而WebGL是能够让画面更有层次感的魔法。

2.3.3 网站如何用WebGL获取指纹

• 步骤1 请求WebGL上下文：当访问一个使用WebGL的网站时，浏览器会尝试获取WebGL上下文。简单来说，WebGL上下文是一个与GPU通信的环境，它是连接JavaScript代码与底层图形硬件（GPU）的桥梁，使得浏览器能够在用户设备上执行复杂的图形渲染任务。有了这个桥梁，才有后面的图形渲染。这个时候，网站并没有获取到用户的设备信息。
• 步骤2 图形绘制：一旦有了渲染图形的基础，接下来网站就可以执行各种图形操作，比如创建图形，创建着色器。在执行图形操作的时候，WebGL就可以获取一些硬件信息，例如GPU信号、驱动版本。这样做的目的是为了优化图形渲染的性能和效果。通过了解用户设备的硬件特性，WebGL可以进行更精细的图形处理，以提供更流畅、更高质量的用户体验。例如：
  • 硬件加速： WebGL利用用户设备上的图形处理单元（GPU）进行硬件加速，以加快图形渲染速度。通过获取GPU的相关信息，WebGL可以优化图形任务，充分发挥硬件加速的优势。
  • 兼容性和适应性： 不同的GPU可能有不同的性能和功能支持。通过获取硬件信息，WebGL可以适应用户设备的特性，确保图形渲染在各种硬件上都能正常运行，并提供最佳的视觉效果。
  • 高级特性利用： 了解GPU的性能和支持的特性，WebGL可以选择使用一些高级的图形特效和技术，提升图形渲染的质量和真实感。
• 步骤3 创建指纹：由于用户采用不同的设备、使用不同型号的GPU（即便是相同型号的GPU，由于生产批次和硬件差异，也可能存在微小的差异）、不同版本的驱动，结合一些特定的绘图操作，那么就可以形成一个独特的标识。这就像是网站在画一幅独特的画，但这幅画的特殊之处在于它考虑了设备的硬件（比如GPU类型和版本）以及驱动程序的情况。就好比和朋友都买了同一品牌的画笔，但由于制造批次和细微差异，每支画笔可能会略有不同。再加上使用的颜料（驱动程序）有些微差异，最终画出的画可能会有些许不同。WebGL通过执行这些特殊的绘图操作，就像是在画布上创作一幅抽象画一样，最终形成了一个独特的标识，即所谓的WebGL指纹（WebGL相关的哈希值）。虽然不是百分之百独一无二，但在考虑到硬件、驱动和绘图的微小变化时，足以使每个用户的WebGL指纹在某种程度上成为一个独特的身份标识。
• 步骤4 存储指纹：生成的WebGL指纹通常会被网站存储在服务器上。这样，当用户再次访问该网站时，可以通过比对新的指纹与之前存储的指纹来辨认用户。

第三部分 参考

• https://browserleaks.com/
• https://www.browserscan.net/zh
• https://fingerprint.com/github/
• https://github.com/Song-Li/cross_browser