前端使用fingerprintjs2获取浏览器指纹
洪祺
什么是浏览器指纹
浏览器指纹我们可以理解成是一个用户设备的浏览器的唯一id（有点类似手机设备的IMEI），通过浏览器指纹，我们可以做一些埋点操作或者是鉴权，辨别是否是同一用户，其是否有更换设备（更换浏览器）等
什么是fingerprintjs2
fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件（官方宣称其识别精度达到99.5%），详细了解可查看fingerprintjs2官方文档
如何使用fingerprintjs2
以VUE中使用为例
- 安装
npm i fingerprintjs2 -S
-
您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
-
组件中（此例默认以浏览器所有的配置信息生成浏览器指纹）
<template>
<div id="app">
</div>
</template>
<script>
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2
export default {
name: 'App',
components: {
},
data() {
return {
};
},
async created() {
// 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
if (window.requestIdleCallback) {
requestIdleCallback(() => {
this.createFingerprint();
});
} else {
setTimeout(() => {
this.createFingerprint();
}, 500);
}
},
methods: {
// 创建浏览器指纹
createFingerprint() {
// 浏览器指纹
const fingerprint = Fingerprint2.get((components) => { // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成
const values = components.map(component => component.value); // 配置的值的数组
const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹
console.log(components);
console.log(values);
console.log(murmur);
localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
});
},
},
};
</script>
<style lang="less">
</style>
自定义选择浏览器的部分配置信息生成浏览器指纹
- 浏览器可选配置信息如下
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} //可用的多媒体输入和输出设备的信息。
]
- 组件中选择浏览器部分配置信息作为参数获取浏览器指纹
<template>
<div id="app">
</div>
</template>
<script>
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2
export default {
name: 'App',
components: {
},
data() {
return {
};
},
async created() {
// 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
if (window.requestIdleCallback) {
requestIdleCallback(() => {
this.createFingerprint();
});
} else {
setTimeout(() => {
this.createFingerprint();
}, 500);
}
},
methods: {
// 创建浏览器指纹
createFingerprint() {
// 选择哪些信息作为浏览器指纹生成的依据
const options = {
fonts: {
extendedJsFonts: true,
},
excludes: {
audio: true,
userAgent: true,
enumerateDevices: true,
touchSupport: true,
},
};
// 浏览器指纹
const fingerprint = Fingerprint2.get(options, (components) => { // 参数只有回调函数或者options为{}时，默认浏览器指纹依据所有配置信息进行生成
const values = components.map(component => component.value); // 配置的值的数组
const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹
console.log(components);
console.log(values);
console.log(murmur);
localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
});
},
},
};
</script>
<style lang="less">
</style>
备注： 本文主要参考以下文章
类似资料：