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

本文主要是介绍【浏览器指纹】fingerprintjs2使用fingerprintjs生成浏览器唯一标识(浏览器指纹)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

什么是浏览器指纹？

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

fingerprintjs2

在这里插入图片描述

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

信息收集：FingerprintJS会收集用户浏览器和设备的各种信息，包括硬件特性、浏览器设置、插件、字体、屏幕分辨率等。
指纹生成：通过对收集到的信息进行加密哈希处理，生成一个独特的浏览器指纹。
应用实例：在线支付平台和电商网站使用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() {// 初始化FingerprintJSconst 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.componentsconst 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} //可用的多媒体输入和输出设备的信息。
]