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

xuanxiao · 发表于 4 天前

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

常用特征：

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

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

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

<script>
async function getFingerprint() {
function getCanvasFingerprint() {
try {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.textBaseline = "top";
ctx.font = "14px Arial";
ctx.fillText("fingerprint_test_123", 2, 2);
return canvas.toDataURL();
} catch (e) {
return "";
}
}
function getWebGLFingerprint() {
try {
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl) return "";
const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
return debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : "";
} catch (e) {
return "";
}
}
function getBasicInfo() {
return {
ua: navigator.userAgent,
lang: navigator.language,
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
screen: screen.width + "x" + screen.height,
colorDepth: screen.colorDepth,
cpu: navigator.hardwareConcurrency || "",
memory: navigator.deviceMemory || ""
};
}
async function sha256(str) {
const buf = new TextEncoder().encode(str);
const hash = await crypto.subtle.digest("SHA-256", buf);
return Array.from(new Uint8Array(hash))
.map(b => b.toString(16).padStart(2, "0"))
.join("");
}
const basic = getBasicInfo();
const canvas = getCanvasFingerprint();
const webgl = getWebGLFingerprint();
const raw = JSON.stringify({
basic,
canvas,
webgl
});
const fp = await sha256(raw);
return {
fingerprint: fp,
raw: raw
};
}
</script>

复制代码

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

<script>
getFingerprint().then(res => {
console.log("指纹:", res.fingerprint);
// 提交到ASP
fetch("/api/fp_report.asp", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "fp=" + encodeURIComponent(res.fingerprint)
});
});
</script>

复制代码

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

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

升级版：加盐防伪造

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

复制代码

存本地：

localStorage.setItem("device_id", fp);

复制代码

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] 用 JS 做浏览器指纹（Browser Fingerprint）实现“设备识别”

在线客服

官方Q群 天天ASP家园网友互动群 群1: 697497501(新手学习互助群) 群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] 用 JS 做浏览器指纹（Browser Fingerprint）实现“设备识别”

在线客服

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)