浏览器指纹
AprilTong 9/26/2024 浏览器
# 写在前面
数字互联网时代，用户的在线活动几乎都会留下痕迹，其中，浏览器指纹就像用户的数字身份证，让网站能够识别和追踪用户。
# 什么是浏览器指纹
浏览器指纹【Browser Fingerprinting】是一种用于识别和追踪互联网用户的技术，它通过分析用户的浏览器环境和行为，生成一个唯一的指纹（即使他们清除了浏览器缓存或使用了隐身模式）。这个指纹可以用于识别用户、追踪用户活动、防止恶意攻击等，无需依赖传统的 cookie。
# 浏览器指纹工作原理
- 信息收集与特征提取
- 用户访问网站时，网站会收集用户设备和浏览器的各种信息，如操作系统版本、浏览器类型、屏幕分辨率、已安装的插件等。
- 这些信息被称为指纹因子，浏览器指纹技术会从中提取具有标识性的特征。
- 指纹生成
- 通过算法处理提取的特征信息，生成一个具有唯一性的浏览器指纹。
- 这个指纹通常是一个字符串或数字标识符，它可以用于识别用户。
- 隐私保护与防追踪
- 指纹浏览器通过技术手段改变用户设备的浏览器指纹信息，从而防止被追踪
- 指纹浏览器可以使用代理 IP 来代理用户的访问行为，隐藏用户的真实 IP
- 指纹浏览器能修改的各项信息生成特定的浏览器指纹，防止网站对用户进行识别、追踪
# 怎么生成浏览器指纹
安装 fingerprintjs 生成浏览器唯一标识(浏览器指纹)，v4 版本需要收费，使用的是 v3.4.2 版本。
npm i @fingerprintjs/fingerprintjs
1
import FingerprintJS from "@fingerprintjs/fingerprintjs";
getFingerPrintID() {
const fpPromise = await FingerprintJS.load()
const result = await fpPromise.get()
return result.visitorId
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 遇到的问题
电脑外接了两个显示器，生成指纹的是不一样的，但在统计用户的时候是期望一致，fingerprintjs 可以排除一些组件，降低指纹的唯一性变化。
const getFingerPrintId = async () => {
const fpPromise = await FingerprintJS.load()
const result: any = await fpPromise.get()
// 排除一些屏幕相关等一些组件
const { screenFrame, screenResolution, colorDepth, colorGamut, hdr, ...components } = result.components
const visitorId = FingerprintJS.hashComponents(components)
return visitorId
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# FingerprintJS 使用的组件介绍
分类说明比较清晰的图，转载自参考文章 (opens new window)
打印出来的属性文字解释
- architecture 适配器所属的 GPU 家族或类别的名称
- audio 返回音频指纹
- canvas Canvas 指纹
- colorDepth 返回目标设备或缓冲器上的调色板的比特深度，mdn 链接 (opens new window)
- colorGamut 色域
- contrast 对比度
- cookiesEnabled 是否启用了 cookie.链接 (opens new window)
- cpuClass 浏览器系统的 CPU 等级
- deviceMemory 以千兆字节为单位返回设备内存量,只在 https 中生效.链接 (opens new window)
- domBlockers dom 拦截器
- fontPreferences 字体偏好设置
- fonts 返回从 64 种字体种筛选出的可用字体
- forcedColors 强制颜色
- hardwareConcurrency 可用于运行在用户的计算机上的线程的逻辑处理器的数量.链接 (opens new window)
- hdr 高动态范围成像
- indexedDB 是否支持 indexedDb
- invertedColors 反转颜色
- languages 语言
- localStorage是否支持 localStorage
- math math 内置对象的函数精度
- monochrome 一个浏览器主题
- openDatabase 是否支持 Web SQL.
- osCpu 标识当前操作系统.链接 (opens new window)
- pdfViewerEnabled 于指示浏览器是否支持在导航到 PDF 文件时以内联方式显示它们.链接 (opens new window)
- platform 标识用户浏览器所在的平台.链接 (opens new window)
- plugins 列出描述应用程序中已安装插件的 Plugin 对象.链接 (opens new window)
- reducedMotion 用于检测用户的系统是否被开启了动画减弱功能
- screenFrame 屏幕框
- screenResolution 检测屏幕宽高，并根据屏幕方向矫正返回值[width,height
- sessionStorage 是否支持 sessionStorage
- timezone 时区
- touchSupport 返回最大触摸点数，是否支持 touch，是否支持 ontouchstart 事件
- vendor vendor 属性， 属性的值始终为“Google Inc.”、“Apple Computer, Inc.”、或（在 Firefox 中）空字符串。链接 (opens new window)
- vendorFlavors 浏览器供应商
- videoCard 显卡
# 指纹可能重复
指纹可能重复，因为浏览器指纹是通过浏览器环境和行为生成的，可能会受到用户的各种操作和设置的影响。生成指纹的算法是固定的，在所有的组件指标值都相同时，生成的指纹相同。
# 使用场景
- 安全验证：异地或者可疑登录提示，增强账户安全
- 用户追踪：获取用户浏览习惯等进行数据分析，提升用户体验
- 防止账号共享：防止账号在不同设备上登录
- 防止恶意攻击：防止恶意攻击，比如刷票，刷评论，虚假账户注册