聊聊浏览器指纹

Canvas 指纹

许多网站和跟踪软件使用HTML画布指纹来区分和追踪用户。这是通过利用不同浏览器和设备在绘制图像时产生微小差异的原理实现的。不同浏览器采用不同的图像处理引擎、导出选项和压缩级别，因此每台电脑绘制的图片都会略有不同。这些微小差异可以用来为用户设备分配特定的指纹，并且还可以用来识别不同的用户

javascript 复制代码

function getCanvasFingerStr() {    
    var canvas = document.createElement('canvas');    
    var context = canvas.getContext("2d");    
    context.font = "18pt Arial";    
    context.textBaseline = "top";    
    context.fillText("Helloword", 2, 2);    
    return canvas.toDataURL("image/jpeg");
}
getCanvasFingerStr()

技术原理

‌信息收集‌：
- ‌浏览器特性检测‌：获取用户的浏览器类型、版本、语言、是否支持特定API等。
- ‌硬件特征‌：包括屏幕尺寸、颜色深度、时间戳偏移等。
- ‌字体检测‌：通过对一系列随机字符串进行渲染并测量宽度，识别出已安装的字体集。
- ‌WebGL指纹‌：利用WebGL的渲染信息，通常包含GPU信息，是设备独一无二的标志之一。
- ‌音频指纹‌：通过播放特定音频文件并捕获其响应来生成音频指纹‌12。
‌指纹生成 ‌：所有收集的数据最后通过一个哈希函数（如SHA-1）处理，生成唯一指纹。这个指纹可以作为识别用户的一种方式，即使他们清除cookies或者更换设备，只要浏览器配置保持不变，就能被识别出来‌12。

使用示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fingerprint2JS Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script>
</head>
<body>
    <h1>Fingerprint2JS Example</h1>
    <script>
        Fingerprint2.get(function (components) {
            console.log(components); // 打印各字段代表的含义
            const values = components.map((component) => component.value);
        });
    </script>
</body>
</html>

以下是一个简单的使用示例，演示了如何在HTML页面中引入Fingerprint2JS库并生成设备指纹：

https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js

聊聊浏览器指纹

Canvas 指纹

推荐

技术原理

使用示例