fingerprint2浏览器指纹使用记录

原创已于 2025-05-29 19:52:56 修改 · 501 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2025-05-29 19:11:15 首次发布

uni-app 专栏收录该内容

4 篇文章

订阅专栏

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

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

1、安装依赖

npm i fingerprintjs2 -S

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

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

import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2

function 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
// 	} //可用的多媒体输入和输出设备的信息。
// ]