fingerprint2浏览器指纹使用记录

我在uniapp-vue3-H5端使用的,记录一下

抄的这里前端使用fingerprintjs2获取浏览器指纹fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件( - 掘金

 1、安装依赖

npm i fingerprintjs2 -S

2、抽成模块文件,@/utils/Fingerprint2.js

生成指纹时根据需要调整参数

import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2function createdFingerprint() {// 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒,以确保指纹一致。if (window.requestIdleCallback) {requestIdleCallback(() => {createFingerprint();});} else {setTimeout(() => {createFingerprint();}, 500);}
}
// 创建浏览器指纹
function createFingerprint() {// 选择哪些信息作为浏览器指纹生成的依据const options = {// fonts: {// 	extendedJsFonts: true,// },excludes: { //排除,获取不到的数据,影响设备唯一性的标识//获取不到"deviceMemory": true, //设备内存"fontsFlash": true, //已安装的Flash字体列表"enumerateDevices": true, //可用的多媒体输入和输出设备的信息。"doNotTrack": true, //do-not-track设置"cpuClass": true, //浏览器系统的CPU等级//影响设备唯一指纹"timezoneOffset": true, //本地时间与 GMT 时间之间的时间差,以分钟为单位"timezone": true, //时区"fonts": true, //使用JS/CSS检测到的字体列表"language": true,//语言"plugins":true,//浏览器的插件信息"deviceMemory":true,//设备内存'adBlock':true,//广告屏蔽工具"screenResolution":true,//屏幕分辨率},};return new Promise((resolve, reject) => {// 浏览器指纹// const fingerprint = Fingerprint2.get((components) => { // 参数只有回调函数时,默认浏览器指纹依据所有配置信息进行生成const fingerprint = Fingerprint2.get(options, (components) => { // 参数只有回调函数时,默认浏览器指纹依据所有配置信息进行生成const values = components.map(component => component.value); // 配置的值的数组const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹// console.log("参数caddf45fc23104f9d17f3ef82af1df6c", options);// console.log("回调caddf45fc23104f9d17f3ef82af1df6c", components);// console.log("配置530e10f8a53a5f7f1022087b41b5ef27的值的数组", values);console.log("生成浏览器指纹", murmur);uni.setStorageSync("uuid", murmur);//缓存指纹resolve(murmur)});})
}
export default {createdFingerprint,
}

3、进入网页生成指纹App.vue

import Fingerprint from '@/utils/Fingerprint2.js'; //数据缓存
Fingerprint.createdFingerprint();

4、指纹依赖参数解释

// 自定义选择浏览器的部分配置信息生成浏览器指纹
// var componentss = [{
// 		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
// 	} //可用的多媒体输入和输出设备的信息。
// ]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/diannao/85000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习面试八股简略速览

在准备深度学习面试时,你可能会感到有些不知所措。毕竟,深度学习是一个庞大且不断发展的领域,涉及众多复杂的技术和概念。但别担心,本文将为你提供一份全面的指南,从基础理论到实际应用,帮助你在面试中脱颖…

使用 Redis 作为向量数据库

一、什么是向量数据库? 向量(Vector):在机器学习和 AI 中,向量是由一系列数字组成的序列,用于数值化地描述数据的特征或语义。文本、图像、音频等非结构化数据可以通过模型转换成固定长度的向量。 向量数据…

变量的计算

不同类型变量之间的计算 数字型变量可以直接计算 在python中,数字型变量可以直接通过算术运算符计算bool型变量:True 对应数字1 ;False 对应数字0、 字符串变量 使用 拼接字符串 使用 * 拼接指定倍数的相同字符串 变量的输入:&…

PostgreSQL学会如何建表

开始使用PostgreSQL之前, 上一节我们说了怎样安装它。 PostgreSQL可能已经安装到你的电脑上了,安装后postgre服务默认在电脑开机时运行启动。 一.了解PostgreSQL的运行 PostgreSQL使用一种客户端/服务器(C/S)模型。 和其他典型的客户端/服务…

Linux驱动学习笔记(十)

热插拔 1.热插拔:就是带电插拔,即允许用户在不关闭系统,不切断电源的情况下拆卸或安装硬盘,板卡等设备。热插拔是内核和用户空间之间,通过调用用户空间程序实现交互来实现的,当内核发生了某种热拔插事件时…

大模型应用开发第五讲:成熟度模型:从ChatGPT(L2)到未来自主Agent(L4)

大模型应用开发第五讲:成熟度模型:从ChatGPT(L2)到未来自主Agent(L4) 资料取自《大模型应用开发:动手做AI Agent 》。 查看总目录:学习大纲 关于DeepSeek本地部署指南可以看下我之…

Delphi 导入excel

Delphi导入Excel的常见方法可分为两种主流方案:基于OLE自动化操作Excel原生接口和利用第三方组件库。以下为具体实现流程及注意事项: ‌一、OLE自动化方案(推荐基础场景)‌ 该方法通过COM接口调用本地安装的Excel程序&#xff0c…

Selenium的第四天打卡——Selenium浏览器应用(完整版)

Selenium浏览器应用 目录 Selenium浏览器应用 一、浏览器操作示例代码 1.设置浏览器缩放大小 2.浏览器前进和后退 3.浏览器刷新 二、WebDriver常见方法 三、鼠标事件示例 四、键盘事件示例 五、获取断言信息 六、窗口的切换 七、关键注意事项 一、浏览器操作示例代…

PMO价值重构:从项目管理“交付机器”到“战略推手”

在数字化转型浪潮中,项目管理办公室(PMO)正经历着前所未有的角色蜕变。传统上,PMO往往被视为项目管理的“交付机器”,专注于项目的按时交付和资源分配。然而,随着企业对战略执行的重视,PMO正逐渐…

本地依赖库的版本和库依赖的版本不一致如何解决?

我用的 yarn v4 版本,所以以下教程命令都基于yarn 这里假设我报错的库名字叫 XXXXXXXX,依赖他的库叫 AAAAAAAA 排查解决思路分析: 首先查看一下 XXXXXXXX 的依赖关系,执行 yarn why XXXXXXXX 首先我们要知道 yarn 自动做了库…

SQLiteStudio - 免费开源、轻量高效,跨平台的 SQLite 数据库管理工具,代替 Navicat for SQLite

管理 SQLite 数据库就用这款软件,真的早该摒弃破解和盗版的 Navicat 了。 SQLiteStudio 是一款专注于管理 SQLite 数据库 的桌面软件,用于浏览和编辑 SQLite 数据库文件。软件的作者是来自波兰的开发者 Paweł Salawa,他是一位拥有 20 年 Ja…

DeepSeek R1-0528 新开源推理模型(免费且快速)

DeepSeek推出了新模型,但这不是R2! R1-0528是DeepSeek的最新模型,在发布仅数小时后就在开源社区获得了巨大关注。 这个悄然发布的模型DeepSeek R1-0528,已经开始与OpenAI的o3一较高下。 让我来详细介绍这次更新的新内容。 DeepSeek R1-0528 发布 DeepSeek在这次发布中采…

Opera Neon发布该公司首款“AI代理”浏览器

Opera 的浏览器产品组合今日迎来了新成员。Opera Neon 是该公司首款“AI 代理”浏览器,旨在“重新思考浏览器在代理网络中的角色”。开发人员声称,Neon 能够理解用户的意图,并利用 AI 驱动的功能将其转化为行动。 Opera Neon 由三个主要部分…

网络安全之Web渗透加解密

项目基本使用 准备环境:node.js python chrome npm install chrome-remote-interface pip install playwright playwright install chromium pip install mitmproxy ............... 第一步启动cdp.js。 第二步使用python .\cdp_load.py vue_demo,连…

【VSCode-Qt】Docker远程连接的项目UI文件在 VSCode 上无法预览

Docker远程连接的UI文件在 VSCode 上无法预览,通常是因为 VSCode 通过远程开发扩展(Remote - SSH/Docker)连接到 Docker 容器时,某些图形化功能未正确配置或支持。以下是可能原因和解决方案: 原因分析 X11 转发未配置…

【HW系列】—web组件漏洞(Strtus2和Apache Log4j2)

本文仅用于技术研究,禁止用于非法用途。 文章目录 Struts2Struts2 框架介绍Struts2 历史漏洞汇总(表格)Struts2-045 漏洞详解 Log4j2Log4j2 框架介绍Log4j2 漏洞原理1. JNDI 注入2. 利用过程 Log4j2 历史漏洞JNDILDAP 反弹 Shell 流程 Strut…

《深度关系-从建立关系到彼此信任》

陈海贤老师推荐的书,花了几个小时,感觉现在的人与人之间特别缺乏这种深度的关系,但是与一个人建立深度的关系并没有那么简单,反正至今为止,自己好像没有与任何一个人建立了这种深度的关系,那种双方高度同频…

sass基础语法

Sass(Syntactically Awesome Style Sheets)是一种 CSS 预处理器,提供了比原生 CSS 更强大、更灵活的语法功能。它有两种语法格式: Sass(缩进语法,.sass 文件)SCSS(CSS-like 语法&am…

【JavaWeb】基本概念、web服务器、Tomcat、HTTP协议

目录 1. 基本概念1.1 基本概念1.2 web应用程序1.3 静态web1.4 动态web 2. web服务器3. tomcat详解3.1 安装3.2 启动3.3 配置3.3.1 配置启动的端口号3.3.2 配置主机的名称3.3.3 其他常用配置项日志配置数据源配置安全配置 3.4 发布一个网站 4. Http协议4.1 什么是http4.2 http的…

AI in Game,大模型能力与实时音视频技术融合,交出AI应用新答卷

随着AI的技术进步和工具普及,尤其是在这两年的跃进之后,AI在游戏行业内的应用已经逐步由理念设想推向落地实践。从蔡浩宇披露的AI新游《Whispers From The Star》到GDC上各大厂家呈现的游戏AI新亮点,我们看到了更多AI与游戏的结合方式&#x…