Vue前端浏览器指纹获取:数字世界的身份密码

程序员必备宝典icon-default.png?t=O83Ahttps://tmxkj.top/#/一个开源的JavaScript库,它通过收集用户浏览器的多种属性(如屏幕分辨率、浏览器插件、字体、Canvas和WebGL等)来生成一个独特的浏览器指纹,用于识别和追踪用户。

#Github地址
GitHub - fingerprintjs/fingerprintjs: The most advanced browser fingerprinting library.

 功能特性
高度准确:能够生成高度准确的浏览器指纹,专业版准确率高达99.5%。

多种数据源:从多个数据源收集信息,包括但不限于用户代理、屏幕分辨率、系统字体、WebGL、Web Audio、Canvas 等。

轻量级:库的体积相对较小,不会显著增加网页的加载时间。

易于集成:作为一个JavaScript库,可以很容易地集成到现有的网站和应用程序中。

实时生成:在用户访问网站时实时生成指纹,无需额外的服务器处理。

跨浏览器兼容性:支持所有主流浏览器,包括 Chrome、Firefox、Safari、Edge 等。

安全:生成的指纹通常是加密的,以减少数据泄露的风险。

自定义:开发者可以根据自己的需求选择性地启用或禁用某些数据收集功能,以符合特定的隐私政策或法律要求。

1.安装:

npm install @fingerprintjs/fingerprintjs

2.封装的FingerprintJsApi

import FingerprintJS from "@fingerprintjs/fingerprintjs";
import {Ask} from "../config/Api.js";async function fingerprintApi(){const options = {exclude: {deviceType: true,userAgent: true,}}// 初始化const fp = await FingerprintJS.load(options);// 获取访问者的信息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);const visitorId =result.visitorId;const vis = result.components;return{fid:fingerprintId,vid:visitorId,vis,comps:components}
}/*** 指纹上报*/
export  function fingerApi(){return new Promise((resolve, reject) => {fingerprintApi().then(res=>{if (res){resolve(
//Ask('/finger/report','post',res.comps,{vid:res.vid, fid:res.fid},false)
);}})})}

 3.返回数据示例解读

## {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.xdnf.cn/news/148373.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

HTML超文本链接标签及其属性

HTML使用<a> </a>标签来设置超文本链接&#xff0c;超文本链接可以是一个字&#xff0c;一个词&#xff0c;或者一组词&#xff0c;也可以是一张图片&#xff0c;你可以点击这些内容跳转到新的文档或当前文档的某个部分。 在使用<a>标签时需要使用href属性来…

2024年Oceanbase考试认证的习题以及注意事项

OceanBase认证-OceanBase证书-数据库认证证书-OceanBasehttps://www.oceanbase.com/training考试认证在上边链接点击立即认证&#xff0c;进去以后就有学习资料和课程 此时需要注意的是不能只看视频不看资料&#xff0c;因为考试的时候有考的不是视频里面的内容&#xff0c;资料…

CICD从无到会

一 CICD是什么 CI/CD 是指持续集成&#xff08;Continuous Integration&#xff09;和持续部署&#xff08;Continuous Deployment&#xff09;或持续交付&#xff08;Continuous Delivery&#xff09; 1.1 持续集成&#xff08;Continuous Integration&#xff09; 持续集成是…

关于在vue2中给el-input等输入框的placeholder加样式

::v-deep {.el-input--medium,.el-input__inner {height: 100%;background: #163670;border: 1px solid #4cc0f6;border-radius: 6px 6px 6px 6px;&::placeholder {color: #13EFFF;}} } 效果如下&#xff1a; .el-date-editor .el-range-input{&::placeholder {color:…

Unity Debug时出现请选择unity实例

Unity Debug时出现请选择unity实例 问题描述 出现请选择unity实例&#xff0c;并且选择框里为空。 出现原因 你打开了两个Unity工程&#xff0c;在附加时&#xff0c;不知道加在哪个Unity工程上。 解决方法 在调试窗口中点击“附加Unity调试程序”&#xff0c;然后在弹出…

Transact-SQL概述(SQL Server 2022)

新书速览|SQL Server 2022从入门到精通&#xff1a;视频教学超值版_sql server 2022 出版社-CSDN博客 《SQL Server 2022从入门到精通&#xff08;视频教学超值版&#xff09;&#xff08;数据库技术丛书&#xff09;》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) SQL Se…

2-101基于matlab的频带方差端点检测

基于matlab的频带方差端点检测&#xff0c;噪声频谱中&#xff0c;各频带之间变化很平缓&#xff0c;语音各频带之间变化较激烈。据此特征&#xff0c;语音和噪声就极易区分。计算短时频带方差&#xff0c;实质就是计算某一帧信号的各频带能量之间的方差。这种以短时频带方差作…

【C++指南】C++中nullptr的深入解析

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 目录 引言 一、nullptr的引入背景 二、nullptr的特点 1.类型安全 2.明确的空指针表示 3.函数重载支…

计算机毕业论文基于VUE的贫困生助学信息审核管理系统开发与实现

为了详细描述贫困生助学审核信息管理系统的设计与实现&#xff0c;我们将从以下几个方面进行阐述&#xff1a; 系统概述, 需求分析, 系统架构, 功能模块设计, 数据库设计, 前端界面设计, 后端逻辑实现, 安全性考虑,测试与部署 1. 系统概述 贫困生…

CSS的字体属性

color属性 规定文本颜色 <p id"p1">文本颜色</p><p id"p2">文本颜色</p><p id"p3">文本颜色</p><p id"p4">文本颜色</p> #p1{ color: red; }#p2{ color: #ff0000; }#p3{ color: r…

php+mysql安装

1.卸载mysql 没启动不停止 2.下载 3.解压 4.点击安装 5.出现成功 端口占用修改 修改端口89或者87 可视化扩展 修改后重启 开启扩展

《动手学深度学习》笔记1.11——实战Kaggle比赛:预测房价+详细代码讲解

目录 0. 前言 原书正文 1. 下载和缓存数据集 1.1 download() 下载数据集 1.2 download_extract() 解压缩 2. Kaggle 简介 3. 访问和读取数据集 4. 数据预处理 5. 训练&#xff08;核心难点&#xff09; 5.1 get_net() 定义模型-线性回归 5.2 log_rmse() 对数均方根…

99页PPT | 智慧城市运营大数据平台解决方案

方案内容综述 这是一套综合性的解决方案&#xff0c;旨在通过先进的数据分析和处理技术&#xff0c;提升城市管理的智能化水平。平台基于运营商的运营理论构建&#xff0c;通过整合城市各个层面的数据资源&#xff0c;实现对城市运行状态的全面监测、分析和优化。 城市大数据公…

如何在平板电脑上设置谷歌浏览器的主页

在数字化时代&#xff0c;我们越来越依赖平板电脑来完成日常任务。其中&#xff0c;谷歌浏览器作为最常用的网页浏览工具之一&#xff0c;其强大的功能和便捷的操作深受用户喜爱。本文将详细介绍如何在平板电脑上设置谷歌浏览器的主页&#xff0c;以提升您的使用体验和效率。 …

【leetcode】环形链表、最长公共前缀

题目&#xff1a;环形链表 解法一&#xff1a;哈希表 创建一个哈希表&#xff0c;遍历链表先判断哈希表中是否含有要放入哈希表中的节点&#xff0c;如果该节点已在哈希表中出现那么说明该链表是环形的&#xff1b;如果链表节点出现nullptr那么就退出循环&#xff0c;该链表是…

Flutter鸿蒙化环境配置(windows)

Flutter鸿蒙化环境配置&#xff08;windows&#xff09; 参考资料Window配置Flutter的鸿蒙化环境下载配置环境变量HarmonyOS的环境变量配置配置Flutter的环境变量Flutter doctor -v 检测的问题flutter_flutter仓库地址的警告问题Fliutter doctor –v 报错[!] Android Studio (v…

PyTorch 模型调试与故障排除指南

在当代深度学习领域&#xff0c;PyTorch 已成为开发和训练神经网络的主要框架之一。然而随着模型复杂度的增加和数据规模的扩大&#xff0c;开发者常常面临各种调试和优化挑战。本文旨在为 PyTorch 开发者提供一个全面的调试指南&#xff0c;涵盖从基础概念到高级技术的广泛内容…

C#测试调用Ghostscript.NET浏览PDF文件

Ghostscript.NET是针对Ghostscript的C#封装库&#xff0c;支持解析PostScript语言、操作PDF文件等。使用Ghostscript.NET的GhostscriptViewer 模块可以以图片形式查看PDF文档。本文学习并测试调用Ghostscript.NET模块打开及浏览PDF文件的基本用法。   Ghostscript.NET目前主要…

线上搭子小程序:随时随地找搭子!

搭子作为当下流行的一种社交方式&#xff0c;受到了年轻人的讨论关注&#xff0c;不管做什么都可以找不同的“搭子”。追剧、考试、健身、减肥、旅游等都可以找到志趣相投的搭子&#xff0c;满足年轻人的社交需求。 在互联网的发展下&#xff0c;年轻人找搭子也逐渐倾向于线上…

顺序表:学生信息管理系统

一、头文件 #ifndef __LIST_H__ #define __LIST_H__#include <myhead.h> #define MAX 30typedef struct {int id;char name[20];char major[20];int age; }Student;typedef struct {Student data[MAX];int count; //学生人数 }List,*Plist;/**********函数声明*********…