浏览器 15 个常见指纹特征，使用插件 FingerprintJS 生成浏览器指纹

浏览器指纹是什么？

像人类的指纹一样，浏览器指纹也是用于唯一身份认证的一种标识。
这东东常被广告商用于用户跟踪，比如 A、B 网站都添加了一个广告商，如果用户访问了 A 网站，查看了些商品或文章，然后再访问 B 网站，那么广告商就知道用户对哪些东西感兴趣，就可以在 B 网站中投放一些感兴趣的广告。
浏览器指纹起的作用就是给用户打上唯一标识，用户每次访问网页都会被获取到这个唯一标识符，这样就实现了用户未登录情况下跟踪用户行为，从而绘制用户画像。
所以其实用户所有的操作行为都会被跟踪，虽然说浏览器提供了无痕模式，其实有很多浏览器的指纹特征与是不是无痕模式没太大关系，非无痕模式访问网站获取到的指纹特征是一个值 xxxx，无痕模式再访问获取的指纹还是这个 xxxx。
指纹特征

1、IP 地址
用户发起请求到服务器时，都会携带一个网络IP，这个 IP 一般会固定一段时间（与运营商有关），有些大型商用网络还会购买固定 IP 地址，而请求中的这个 IP 地址，就有可能被用于指纹特征计算。
2、Canvas指纹
利用每个浏览器 Canvas 绘图的不同，也可以生成一个指纹特征。
3、WebGL 与 WebGPU 指纹
与 Canvas 类似，利用 3D 图形渲染差异来生成指纹特征。
4、字体指纹
通过检测浏览器的特定字体大小，判断是否已安装某个字体，从而获得一种指纹特征。
5、Client Rects
由于浏览器渲染 HTML 存在差异性，可通过获取某个元素的上下左右位置及宽度和高度等信息，可生成指纹特征。
6、音频指纹
利用不同浏览器的 AudioContext 在处理音频数据的差异性，可生成一种指纹特征。
7、浏览器语言
浏览器配置的语言信息也可以用作指纹特征算法。
8、屏幕分辨率
浏览器的窗口大小信息，在指纹算法中，也可纳入特征库。
9、时区与当地时间
不同国家的时区与时间都存在差异，也可以通过此特征来获取指纹。
10、User-Agent
浏览器的 UA 信息，每个浏览器都不同，相同浏览器的不同版本也存在差异，完全可以当做一种指纹特征。
11、设备内存
虽然 navigator.deviceMemory 获取到的值不一定是准确的内存值，但此属性用作指纹特征算法是完全可行的。
12、CPU 数量
navigator.hardwareConcurrency 获取 CPU 数量，也可投入到指纹算法中。
13、SpeechSynthesis
利用 SpeechSynthesis 浏览器的语音合成功能，由于语音、发音、口音、语速等差异性，可作为指纹特征算法。
14、地理位置
如果随手点了同意获取地理位置，那浏览器背后就可以开始用地理位置信息来生成指纹特征了，毕竟每个位置信息是有差异性的。
15.媒体设备
利用 MediaDevices API 获取媒体设备信息，如摄像头、麦克风、设备类型、标签名字、链接类型等，这些信息也可用于指纹特征算法。
与地理位置一样需要用户同意，同意后就可以开始搞事情。
FingerprintJS 插件生成指纹

浏览器开源插件 FingerprintJS，截止发文有 24.5k Star，github 地址：https://github.com/fingerprintjs/fingerprintjs
FingerprintJS 3.0 版本可免费使用， 4.0 版本之后商业用途需要付费，测试、个人学习用途无需付费。
浏览器端的 FingerprintJS 准确性仅有 40% - 60%，如果需要更高的准确性，可付费使用 Fingerprint Pro，官网：https://fingerprint.com/github/。
此插件获取了浏览器 41 个特征用于指纹算法：

1. [
2.   'fonts', 'domBlockers', 'fontPreferences', 'audio',
3.   'screenFrame', 'canvas', 'osCpu', 'languages',
4.   'colorDepth', 'deviceMemory', 'screenResolution',
5.   'hardwareConcurrency', 'timezone', 'sessionStorage',
6.   'localStorage', 'indexedDB', 'openDatabase', 'cpuClass',
7.   'platform', 'plugins', 'touchSupport', 'vendor',
8.   'vendorFlavors', 'cookiesEnabled', 'colorGamut',
9.   'invertedColors', 'forcedColors', 'monochrome',
10.   'contrast', 'reducedMotion', 'reducedTransparency',
11.   'hdr', 'math', 'pdfViewerEnabled', 'architecture',
12.   'applePay', 'privateClickMeasurement', 'audioBaseLatency',
13.   'dateTimeLocale', 'webGlBasics', 'webGlExtensions'
14. ]

复制代码

参考地址：https://fingerprintjs.github.io/fingerprintjs/
使用方法

方法一：script 引入

1. [/code]方法二：npm 安装
2. [code]npm install --save @fingerprintjs/fingerprintjs
3. # 安装指定版本 3.4.2
4. npm install --save @fingerprintjs/fingerprintjs@3.4.2

复制代码

1. import FingerprintJS from '@fingerprintjs/fingerprintjs';
3. // 获取标识符
4. FingerprintJS.load()
5.   .then(fp => fp.get())
6.   .then(result => {
7.     const visitorId = result.visitorId
8.     console.log(visitorId)
9.   })

复制代码

方法三：模块化引入

1. [/code][size=4]配置项[/size]
3. [code]FingerprintJS.load({
4.   delayFallback?: number, // 为不支持 requestIdleCallback 的浏览器设置回退时间
5.   debug?: boolean, // 是否打印调试信息
6.   monitoring?: boolean, // 是否发送使用统数据到FingerprintJS服务器
7. }): Promise

复制代码

文档

V3 文档：https://github.com/fingerprintjs/fingerprintjs/blob/v3/docs/api.md
最新版本文档：https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/api.md
写在最后

浏览器指纹可以让网站记住您是谁，也让广告商能实现精准投放广告。互联网不是法外之地，每一次访问，技术上都有办法跟踪，所以说大数据让人毫无隐私~~

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

鼓励转贴优秀软件安全工具和文档！