浏览器指纹你知道吗

写在前面

数字互联网时代，用户的在线活动几乎都会留下痕迹，其中，浏览器指纹就像用户的数字身份证，让网站能够识别和追踪用户。

什么是浏览器指纹

浏览器指纹【Browser Fingerprinting】是一种用于识别和追踪互联网用户的技术，它通过分析用户的浏览器环境和行为，生成一个唯一的指纹（即使他们清除了浏览器缓存或使用了隐身模式）。这个指纹可以用于识别用户、追踪用户活动、防止恶意攻击等，无需依赖传统的 cookie。

浏览器指纹工作原理

1. 信息收集与特征提取

• 用户访问网站时，网站会收集用户设备和浏览器的各种信息，如操作系统版本、浏览器类型、屏幕分辨率、已安装的插件等。
• 这些信息被称为指纹因子，浏览器指纹技术会从中提取具有标识性的特征。

2. 指纹生成

• 通过算法处理提取的特征信息，生成一个具有唯一性的浏览器指纹。
• 这个指纹通常是一个字符串或数字标识符，它可以用于识别用户。

3. 隐私保护与防追踪

• 指纹浏览器通过技术手段改变用户设备的浏览器指纹信息，从而防止被追踪
• 指纹浏览器可以使用代理 IP 来代理用户的访问行为，隐藏用户的真实 IP
• 指纹浏览器能修改的各项信息生成特定的浏览器指纹，防止网站对用户进行识别、追踪

怎么生成浏览器指纹

官网

安装 fingerprintjs 生成浏览器唯一标识(浏览器指纹)，v4 版本需要收费，使用的是 v3.4.2 版本。

npm i @fingerprintjs/fingerprintjs

import FingerprintJS from "@fingerprintjs/fingerprintjs";


getFingerPrintID() {
    const fpPromise = await FingerprintJS.load()
    const result = await fpPromise.get()
    return result.visitorId
}

遇到的问题

电脑外接了两个显示器，生成指纹的是不一样的，但在统计用户的时候是期望一致，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
}

FingerprintJS 使用的组件介绍

1. 分类说明比较清晰的图，转载自参考文章

2. 打印出来的属性文字解释

• architecture 适配器所属的 GPU 家族或类别的名称
• audio 返回音频指纹
• canvas Canvas 指纹
• colorDepth 返回目标设备或缓冲器上的调色板的比特深度，mdn 链接
• colorGamut 色域
• contrast 对比度
• cookiesEnabled 是否启用了 cookie.链接
• cpuClass 浏览器系统的 CPU 等级
• deviceMemory 以千兆字节为单位返回设备内存量,只在 https 中生效.链接
• domBlockers dom 拦截器
• fontPreferences 字体偏好设置
• fonts 返回从 64 种字体种筛选出的可用字体
• forcedColors 强制颜色
• hardwareConcurrency 可用于运行在用户的计算机上的线程的逻辑处理器的数量.链接
• hdr 高动态范围成像
• indexedDB 是否支持 indexedDb
• invertedColors 反转颜色
• languages 语言
• localStorage是否支持 localStorage
• math math 内置对象的函数精度
• monochrome 一个浏览器主题
• openDatabase 是否支持 Web SQL.
• osCpu 标识当前操作系统.链接
• pdfViewerEnabled 于指示浏览器是否支持在导航到 PDF 文件时以内联方式显示它们.链接
• platform 标识用户浏览器所在的平台.链接
• plugins 列出描述应用程序中已安装插件的 Plugin 对象.链接
• reducedMotion 用于检测用户的系统是否被开启了动画减弱功能
• screenFrame 屏幕框
• screenResolution 检测屏幕宽高，并根据屏幕方向矫正返回值[width,height
• sessionStorage 是否支持 sessionStorage
• timezone 时区
• touchSupport 返回最大触摸点数，是否支持 touch，是否支持 ontouchstart 事件
• vendor vendor 属性， 属性的值始终为“Google Inc.”、“Apple Computer, Inc.”、或（在 Firefox 中）空字符串。链接
• vendorFlavors 浏览器供应商
• videoCard 显卡

指纹可能重复

指纹可能重复，因为浏览器指纹是通过浏览器环境和行为生成的，可能会受到用户的各种操作和设置的影响。生成指纹的算法是固定的，在所有的组件指标值都相同时，生成的指纹相同。

使用场景

1. 安全验证：异地或者可疑登录提示，增强账户安全
2. 用户追踪：获取用户浏览习惯等进行数据分析，提升用户体验
3. 防止账号共享：防止账号在不同设备上登录
4. 防止恶意攻击：防止恶意攻击，比如刷票，刷评论，虚假账户注册

参考文章

• 参考文章 1
• 参考文章 2