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

07-04 1131阅读

什么是浏览器指纹？
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 浏览器设备指纹改源码
  
  🚀写在最后
  
  希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
  ❤️原创不易，期待你的关注与支持~
  点赞👍+收藏⭐️+评论✍️
  😊之后我会继续更新前端学习小知识，关注我不迷路~