Skip to content
知识库

浏览器指纹

以下介绍仅为原理，生成请使用成熟的包 fingerPrintJs

浏览器指纹：通过浏览的设置信息，网站配置来跟踪 WEB 浏览器（用户）的方法。之所以称之为”指纹”，是因为在常规情况下，期望浏览器指纹是和人的指纹一样，是唯一的

浏览器指纹辨识度可以为：IP 地址，时区，地理位置（经纬度），User-Agent，语言，操作系统…

追踪用户的技术实现

  1. 通过 session 和 cookie 追踪，是基于用户登录
  2. 浏览器指纹
  3. 基于用户的行为（浏览习惯、设置…）、习惯建立特征值、模型

普通指纹

  1. IP
  2. HTTP Headers 中的各种信息
  3. …

高级指纹

  1. Canvas 指纹：利用 Canvas 在每个浏览器，每个机器的渲染参数、抗锯齿等算法不同，生成的图片 DataURI 也不同
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");


context.font = "18px Arial";
ctx.fillText("Hello word", 2, 2);


canvas.toDataURL("image/jpeg");

  1. AudioContext：利用硬件差异，生成的不同的音频输出

  2. WebRTC: 网页实时通信，可以让浏览器音视频或其他任意数据的实时传输，通过 WebRTC 的能力，可以获取用户真实 IP(NAT 穿透)

  3. …

跨浏览器指纹

在以上浏览器指纹中，有一个很大的缺陷，就是用户更换浏览器或更换电脑后，无法追踪，此时可以使用如下参数进行修正

  1. Task(a)~Task(r): 利用显卡渲染图片的功能的特征值
  2. List of fonts（JS）: 获取页面字体支持的情况
  3. TimeZone: 时区
  4. CPU 核心数: 可通过 navigator.hardwareConcurrency，或者其他的 polyfill core-estimator，大致原理是借用 Web Worker 能力，监听 payload 时间，计算硬件达到最大的并发时间，以计算内核数量
  5. …

防范

  1. 禁用 JS
  2. 浏览器插件，例如 Tor Browser 工具
  3. HTTP 头部，DNT 标识，Do Not Track，但大多数网站并没有遵守此约定
  4. …