【浏览器指纹】fingerprintjs2使用fingerprintjs生成浏览器唯一标识(浏览器指纹)

目录

• 什么是浏览器指纹？
• fingerprintjs2
• • fingerprintjs2简介
  • 技术分析
• 如何使用fingerprintjs2？
• 参考文章
• 🚀写在最后

什么是浏览器指纹？

浏览器指纹我们可以理解成是一个用户设备的浏览器的唯一id（有点类似手机设备的IMEI），通过浏览器指纹，我们可以做一些埋点操作或者是鉴权，辨别是否是同一用户，其是否有更换设备（更换浏览器）等。

fingerprintjs2

fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件，FingerprintJS是一种用于创建浏览器指纹的开源库，广泛用于在线安全和欺诈检测。以下是FingerprintJS如何工作：

1. 信息收集：FingerprintJS会收集用户浏览器和设备的各种信息，包括硬件特性、浏览器设置、插件、字体、屏幕分辨率等。
2. 指纹生成：通过对收集到的信息进行加密哈希处理，生成一个独特的浏览器指纹。
3. 应用实例：在线支付平台和电商网站使用FingerprintJS来检测异常活动和防止欺诈。例如，当同一个账户在短时间内从不同的设备或浏览器指纹登录时，系统会标记为可疑活动，触发安全警报。

fingerprintjs2简介

Fingerprint.js的核心理念是在用户不知情且不侵犯其隐私的情况下，收集一些浏览器的基本信息，如屏幕分辨率、时区、已安装字体、插件等，并将这些数据转化为一个哈希值，即所谓的"设备指纹"。这种指纹可以作为识别用户的一种方式，即使他们清除cookies或者更换设备，只要浏览器配置保持不变，就能被识别出来。

技术分析

Fingerprint.js使用了一系列的技术来生成设备指纹：

1、浏览器特性检测：它获取了用户的浏览器类型、版本、语言、是否支持特定API等。
2、硬件特征：包括屏幕尺寸、颜色深度、时间戳偏移等。
3、字体检测：通过对一系列随机字符串进行渲染并测量宽度，识别出已安装的字体集。
4、 WebGL指纹：利用WebGL的渲染信息，这通常包含GPU信息，是设备独一无二的标志之一。
5、 所有收集的数据最后通过一个哈希函数（SHA-1）处理，生成唯一指纹。

该库具有良好的兼容性，可以在多种现代浏览器中运行，并且提供了简单易用的API，使得集成到任何项目中变得容易。

如何使用fingerprintjs2？

安装

npm install @fingerprintjs/fingerprintjs  或者  yarn add @fingerprintjs/fingerprintjs

引用

import FingerprintJS from '@fingerprintjs/fingerprintjs';

methods: {
    async getFingerprint() {
      // 初始化FingerprintJS
      const fp = await FingerprintJS.load()
      // 获取访问者的指纹
      const result = await fp.get()
      // 配置
      const {
        osCpu,
        webGlBasics,
        languages,
        audioBaseLatency,
        reducedTransparency,
        vendor,
        vendorFlavors,
        fonts,
        fontPreferences,
        plugins,
        forcedColors,
        domBlockers,
        pdfViewerEnabled,
        audio,
        canvas,
        webGlExtensions,
        math,
        ...components
      } = result.components
      const extendedComponents = {
        ...components
      }
      const fingerprintId = FingerprintJS.hashComponents(extendedComponents)
      console.log('extendedComponents*-*-*-*-*-*-*-         ', extendedComponents)
      console.log('fingerprintId*-*-*-*-*-*-*-         ', fingerprintId)
      // this.deviceNo = fingerprintId
    },

配置项解析：

Excludes为{}时将包含即不会排除以下组件（源码）

var components = [
{key: ‘userAgent’, getData: UserAgent},//用户代理
{key: ‘webdriver’, getData: webdriver },//网页内驱动软件
{key: ‘language’, getData: languageKey},//语言种类
{key: ‘colorDepth’, getData: colorDepthKey}, //目标设备或缓冲器上的调色板的比特深度
{key: ‘deviceMemory’, getData: deviceMemoryKey},//设备内存
{key: ‘pixelRatio’, getData: pixelRatioKey},//设备像素比
{key: ‘hardwareConcurrency’, getData: hardwareConcurrencyKey},//可用于运行在用户的计算机上的线程的逻辑处理器的数量。
{key: ‘screenResolution’, getData: screenResolutionKey}, //当前屏幕分辨率
{key: ‘availableScreenResolution’, getData: availableScreenResolutionKey},//屏幕宽高（空白空间）
{key: ‘timezoneOffset’, getData: timezoneOffset},//本地时间与 GMT 时间之间的时间差，以分钟为单位
{key: ‘timezone’, getData: timezone},//时区
{key: ‘sessionStorage’, getData: sessionStorageKey},//是否会话存储
{key: ‘localStorage’, getData: localStorageKey},//是否具有本地存储
{key: ‘indexedDb’, getData: indexedDbKey},//是否具有索引DB
{key: ‘addBehavior’, getData: addBehaviorKey},//IE是否指定AddBehavior
{key: ‘openDatabase’, getData: openDatabaseKey},//是否有打开的DB
{key: ‘cpuClass’, getData: cpuClassKey},//浏览器系统的CPU等级
{key: ‘platform’, getData: platformKey},//运行浏览器的操作系统和(或)硬件平台
{key: ‘doNotTrack’, getData: doNotTrackKey},//do-not-track设置
{key: ‘plugins’, getData: pluginsComponent},//浏览器的插件信息
{key: ‘canvas’, getData: canvasKey},//使用 Canvas 绘图
{key: ‘webgl’, getData: webglKey},//WebGL指纹信息
{key: ‘webglVendorAndRenderer’, getData: webglVendorAndRendererKey},//具有大量熵的WebGL指纹的子集
{key: ‘adBlock’, getData: adBlockKey},//是否安装AdBlock
{key: ‘hasLiedLanguages’, getData: hasLiedLanguagesKey},//用户是否篡改了语言
{key: ‘hasLiedResolution’, getData: hasLiedResolutionKey},//用户是否篡改了屏幕分辨率
{key: ‘hasLiedOs’, getData: hasLiedOsKey}, //用户是否篡改了操作系统
{key: ‘hasLiedBrowser’, getData: hasLiedBrowserKey}, //用户是否篡改了浏览器
{key: ‘touchSupport’, getData: touchSupportKey},//触摸屏检测和能力
{key: ‘fonts’, getData: jsFontsKey, pauseBefore: true}, //使用JS/CSS检测到的字体列表
{key: ‘fontsFlash’, getData: flashFontsKey, pauseBefore: true}, //已安装的Flash字体列表
{key: ‘audio’, getData: audioKey},//音频处理
{key: ‘enumerateDevices’, getData: enumerateDevicesKey} //可用的多媒体输入和输出设备的信息。
]

注释

项目地址:https://gitcode.com/fingerprintjs/fingerprintjs

参考文章

FingerprintJS生成浏览器指纹
fingerprintjs2官方文档
浏览器：浏览器指纹
前端使用fingerprintjs2获取浏览器指纹
关于FingerprintJS生成浏览器指纹UUID，同一浏览器多开下UUID不同造成的问题
Fingerprintjs2 浏览器 设备指纹 改源码

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~