前端如何在 Chrome 中最大限度收集硬件信息

在 Chrome 这样的现代浏览器里，想直接获取用户的“真实硬件信息”（例如 CPU 型号、显卡型号、主板信息、序列号等）是非常受限制的，因为浏览器为了防止指纹追踪和隐私泄露，故意屏蔽或模糊了很多硬件细节。

## 1. 前端（纯浏览器 JavaScript）能获取到的硬件信息

纯 JS 在浏览器沙箱里，只能拿到一些有限信息，比如：

console.log(navigator.userAgent); // 浏览器和系统大致信息
console.log(navigator.platform); // 平台信息（Windows/Mac/Linux）
console.log(navigator.hardwareConcurrency); // CPU 逻辑核心数
console.log(navigator.deviceMemory); // 设备内存（GB，可能是近似值）
console.log(screen.width, screen.height); // 屏幕分辨率
console.log(screen.colorDepth); // 色彩深度

可用 API 示例：

- navigator.userAgentData（Chrome 89+）：

navigator.userAgentData.getHighEntropyValues([
"platform", "platformVersion", "architecture", "model", "uaFullVersion"
]).then(console.log);

但注意：这个 API 返回的信息也是经过隐私处理的，比如不会直接告诉你 CPU 型号，只会给 architecture: "x86" 这种粗略信息。

- WebGL

通过 WebGL 渲染器信息可以获取到显卡型号（部分情况下会模糊成 "ANGLE"）：

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');

if (debugInfo) {
	console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)); // GPU 型号
	console.log(gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL)); // GPU 厂商
}

## 2. 前端不能直接获取的硬件信息

浏览器中 禁止直接访问：

- 主板型号、序列号

- 硬盘信息

- CPU 具体型号（只能知道核心数）

- 网络适配器的 MAC 地址

- 设备唯一 ID

如果需要这些信息，必须：

- 用户明确授权 并运行原生程序（如 EXE、APP、PWA with native bridge）

- 或者通过浏览器调用 WebUSB、WebSerial、WebHID 等 API，但这些 API 需要用户手动同意并连接特定设备

# 3. 进阶手段（需要用户同意）

- WebUSB / WebHID：可与硬件直接通讯（用户必须手动授权）

- 本地应用配合：例如在客户端运行本地程序（Electron、C++、Python），获取硬件信息后通过 WebSocket / HTTP 发送到网页

- 浏览器插件（Extension）：扩展有更高权限，但仍不能随意拿序列号

# 总结

在 Chrome 里，你最多能用 JS 获取 CPU 核心数、内存大小、显卡型号、屏幕信息，而无法直接获得“真实硬件唯一标识”。

如果你是为了做 设备指纹 或 防作弊检测，可以综合：

- UA / 分辨率 / 内存 / 核心数

- WebGL GPU 信息

- Canvas 指纹、Audio 指纹

来生成一个较稳定的 ID，但也不是百分百真实硬件信息。