浏览器指纹是什么？

像人类的指纹一样，浏览器指纹也是用于唯一身份认证的一种标识。

这东东常被广告商用于用户跟踪，比如 A、B 网站都添加了一个广告商，如果用户访问了 A 网站，查看了些商品或文章，然后再访问 B 网站，那么广告商就知道用户对哪些东西感兴趣，就可以在 B 网站中投放一些感兴趣的广告。

浏览器指纹起的作用就是给用户打上唯一标识，用户每次访问网页都会被获取到这个唯一标识符，这样就实现了用户未登录情况下跟踪用户行为，从而绘制用户画像。

所以其实用户所有的操作行为都会被跟踪，虽然说浏览器提供了无痕模式，其实有很多浏览器的指纹特征与是不是无痕模式没太大关系，非无痕模式访问网站获取到的指纹特征是一个值 xxxx，无痕模式再访问获取的指纹还是这个 xxxx。

指纹特征

1、IP 地址

用户发起请求到服务器时，都会携带一个网络IP，这个 IP 一般会固定一段时间（与运营商有关），有些大型商用网络还会购买固定 IP 地址，而请求中的这个 IP 地址，就有可能被用于指纹特征计算。

2、Canvas指纹

利用每个浏览器 Canvas 绘图的不同，也可以生成一个指纹特征。

3、WebGL 与 WebGPU 指纹

与 Canvas 类似，利用 3D 图形渲染差异来生成指纹特征。

4、字体指纹

通过检测浏览器的特定字体大小，判断是否已安装某个字体，从而获得一种指纹特征。

5、Client Rects

由于浏览器渲染 HTML 存在差异性，可通过获取某个元素的上下左右位置及宽度和高度等信息，可生成指纹特征。

6、音频指纹

利用不同浏览器的 AudioContext 在处理音频数据的差异性，可生成一种指纹特征。

7、浏览器语言

浏览器配置的语言信息也可以用作指纹特征算法。

8、屏幕分辨率

浏览器的窗口大小信息，在指纹算法中，也可纳入特征库。

9、时区与当地时间

不同国家的时区与时间都存在差异，也可以通过此特征来获取指纹。

10、User-Agent

浏览器的 UA 信息，每个浏览器都不同，相同浏览器的不同版本也存在差异，完全可以当做一种指纹特征。

11、设备内存

虽然 navigator.deviceMemory 获取到的值不一定是准确的内存值，但此属性用作指纹特征算法是完全可行的。

12、CPU 数量

navigator.hardwareConcurrency 获取 CPU 数量，也可投入到指纹算法中。

13、SpeechSynthesis

利用 SpeechSynthesis 浏览器的语音合成功能，由于语音、发音、口音、语速等差异性，可作为指纹特征算法。

14、地理位置

如果随手点了同意获取地理位置，那浏览器背后就可以开始用地理位置信息来生成指纹特征了，毕竟每个位置信息是有差异性的。

15.媒体设备

利用 MediaDevices API 获取媒体设备信息，如摄像头、麦克风、设备类型、标签名字、链接类型等，这些信息也可用于指纹特征算法。

与地理位置一样需要用户同意，同意后就可以开始搞事情。

FingerprintJS 插件生成指纹

浏览器开源插件 FingerprintJS，截止发文有 24.5k Star，github 地址：https://github.com/fingerprintjs/fingerprintjs

FingerprintJS 3.0 版本可免费使用， 4.0 版本之后商业用途需要付费，测试、个人学习用途无需付费。

浏览器端的 FingerprintJS 准确性仅有 40% - 60%，如果需要更高的准确性，可付费使用 Fingerprint Pro，官网：https://fingerprint.com/github/。

此插件获取了浏览器 41 个特征用于指纹算法：

[
  'fonts', 'domBlockers', 'fontPreferences', 'audio',
  'screenFrame', 'canvas', 'osCpu', 'languages',
  'colorDepth', 'deviceMemory', 'screenResolution',
  'hardwareConcurrency', 'timezone', 'sessionStorage',
  'localStorage', 'indexedDB', 'openDatabase', 'cpuClass',
  'platform', 'plugins', 'touchSupport', 'vendor',
  'vendorFlavors', 'cookiesEnabled', 'colorGamut',
  'invertedColors', 'forcedColors', 'monochrome',
  'contrast', 'reducedMotion', 'reducedTransparency',
  'hdr', 'math', 'pdfViewerEnabled', 'architecture',
  'applePay', 'privateClickMeasurement', 'audioBaseLatency',
  'dateTimeLocale', 'webGlBasics', 'webGlExtensions'
]

参考地址：https://fingerprintjs.github.io/fingerprintjs/

使用方法

方法一：script 引入

<script src="https://openfpcdn.io/fingerprintjs/v3/iife.min.js"></script>
<script>
// 获取标识符
FingerprintJS.load()
  .then(fp => fp.get())
  .then(result => {
    const visitorId = result.visitorId
    console.log(visitorId)
  })
</script>

方法二：npm 安装

npm install --save @fingerprintjs/fingerprintjs
# 安装指定版本 3.4.2
npm install --save @fingerprintjs/fingerprintjs@3.4.2

import FingerprintJS from '@fingerprintjs/fingerprintjs';

// 获取标识符
FingerprintJS.load()
  .then(fp => fp.get())
  .then(result => {
    const visitorId = result.visitorId
    console.log(visitorId)
  })

方法三：模块化引入

<script>
  // 也可使用此地址： https://openfpcdn.io/fingerprintjs/v3/esm.min.js
  const fpPromise = import('https://openfpcdn.io/fingerprintjs/v3')
    .then(FingerprintJS => FingerprintJS.load())

  // 获取标识符
  fpPromise
    .then(fp => fp.get())
    .then(result => console.log(result.visitorId))
</script>

配置项

FingerprintJS.load({
  delayFallback?: number, // 为不支持 requestIdleCallback 的浏览器设置回退时间
  debug?: boolean, // 是否打印调试信息
  monitoring?: boolean, // 是否发送使用统数据到FingerprintJS服务器
}): Promise<Agent>

文档

V3 文档：https://github.com/fingerprintjs/fingerprintjs/blob/v3/docs/api.md
最新版本文档：https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/api.md

写在最后

浏览器指纹可以让网站记住您是谁，也让广告商能实现精准投放广告。互联网不是法外之地，每一次访问，技术上都有办法跟踪，所以说大数据让人毫无隐私~~