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

本文主要是介绍【浏览器指纹】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() {// 初始化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} //可用的多媒体输入和输出设备的信息。
]

注释
在这里插入图片描述
项目地址:https://gitcode.com/fingerprintjs/fingerprintjs

参考文章

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

🚀写在最后

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

这篇关于【浏览器指纹】fingerprintjs2使用fingerprintjs生成浏览器唯一标识(浏览器指纹)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1054120

相关文章

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客