用 JS 做浏览器指纹（Browser Fingerprint）实现“设备识别”

原理：浏览器指纹 = 收集一堆“环境特征” → 拼接 → hash

常用特征：

UA（浏览器）
分辨率
时区
语言
CPU核心数
内存
Canvas 指纹 ⭐
WebGL 指纹 ⭐

组合后基本可以“较稳定识别设备”

纯JS版本：
Canvas 指纹
WebGL 指纹
基础信息
SHA-256 生成唯一ID

1. <script>
   
2. async function getFingerprint() {
   
3. 
   
4.     function getCanvasFingerprint() {
   
5.         try {
   
6.             const canvas = document.createElement("canvas");
   
7.             const ctx = canvas.getContext("2d");
   
8. 
   
9.             ctx.textBaseline = "top";
   
10.             ctx.font = "14px Arial";
    
11.             ctx.fillText("fingerprint_test_123", 2, 2);
    
12. 
    
13.             return canvas.toDataURL();
    
14.         } catch (e) {
    
15.             return "";
    
16.         }
    
17.     }
    
18. 
    
19.     function getWebGLFingerprint() {
    
20.         try {
    
21.             const canvas = document.createElement("canvas");
    
22.             const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    
23. 
    
24.             if (!gl) return "";
    
25. 
    
26.             const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
    
27.             return debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : "";
    
28.         } catch (e) {
    
29.             return "";
    
30.         }
    
31.     }
    
32. 
    
33.     function getBasicInfo() {
    
34.         return {
    
35.             ua: navigator.userAgent,
    
36.             lang: navigator.language,
    
37.             timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    
38.             screen: screen.width + "x" + screen.height,
    
39.             colorDepth: screen.colorDepth,
    
40.             cpu: navigator.hardwareConcurrency || "",
    
41.             memory: navigator.deviceMemory || ""
    
42.         };
    
43.     }
    
44. 
    
45.     async function sha256(str) {
    
46.         const buf = new TextEncoder().encode(str);
    
47.         const hash = await crypto.subtle.digest("SHA-256", buf);
    
48.         return Array.from(new Uint8Array(hash))
    
49.             .map(b => b.toString(16).padStart(2, "0"))
    
50.             .join("");
    
51.     }
    
52. 
    
53.     const basic = getBasicInfo();
    
54.     const canvas = getCanvasFingerprint();
    
55.     const webgl = getWebGLFingerprint();
    
56. 
    
57.     const raw = JSON.stringify({
    
58.         basic,
    
59.         canvas,
    
60.         webgl
    
61.     });
    
62. 
    
63.     const fp = await sha256(raw);
    
64. 
    
65.     return {
    
66.         fingerprint: fp,
    
67.         raw: raw
    
68.     };
    
69. }
    
70. </script>

复制代码

三、调用示例（你可以直接提交到ASP）

1. <script>
   
2. getFingerprint().then(res => {
   
3.     console.log("指纹:", res.fingerprint);
   
4. 
   
5.     // 提交到ASP
   
6.     fetch("/api/fp_report.asp", {
   
7.         method: "POST",
   
8.         headers: {
   
9.             "Content-Type": "application/x-www-form-urlencoded"
   
10.         },
    
11.         body: "fp=" + encodeURIComponent(res.fingerprint)
    
12.     });
    
13. });
    
14. </script>

复制代码

最佳结构（建议你这样做）
第一次访问：
生成 fingerprint
生成 cookie device_id

后续访问：
用 device_id 识别
用 fingerprint 校验

升级版：加盐防伪造

1. const raw = JSON.stringify(data) + "|你的密钥";

复制代码

存本地：

1. localStorage.setItem("device_id", fp);

复制代码