HAPI + 设备指纹认证：打造更安全的远程编程体验

 1export class DeviceFingerprintGenerator {
 2  static async generateFingerprint(): Promise<string> {
 3    const features = {
 4      screenResolution: `${screen.width}x${screen.height}`,
 5      colorDepth: screen.colorDepth,
 6      userAgent: navigator.userAgent,
 7      platform: navigator.platform,
 8      hardwareConcurrency: navigator.hardwareConcurrency || 0,
 9      deviceMemory: (navigator as any).deviceMemory || 0,
10      canvas: this.getCanvasFingerprint(),
11      webgl: this.getWebGLFingerprint(),
12      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
13      language: navigator.language,
14      maxTouchPoints: navigator.maxTouchPoints || 0,
15    };
16
17    const featuresString = JSON.stringify(features);
18    return this.sha256Hash(featuresString);
19  }
20
21  private static getCanvasFingerprint(): string {
22    const canvas = document.createElement('canvas');
23    const ctx = canvas.getContext('2d');
24    if (!ctx) return '';
25
26    ctx.textBaseline = 'top';
27    ctx.font = '14px Arial';
28    ctx.fillStyle = '#f60';
29    ctx.fillRect(125, 1, 62, 20);
30    ctx.fillStyle = '#069';
31    ctx.fillText('Hello, world! 🌍', 2, 15);
32
33    return canvas.toDataURL();
34  }
35
36  private static getWebGLFingerprint(): string {
37    const canvas = document.createElement('canvas');
38    const gl = canvas.getContext('webgl');
39    if (!gl) return '';
40
41    const renderer = gl.getParameter(gl.RENDERER);
42    const vendor = gl.getParameter(gl.VENDOR);
43    return `${renderer}-${vendor}`;
44  }
45
46  private static async sha256Hash(message: string): Promise<string> {
47    const msgBuffer = new TextEncoder().encode(message);
48    const hashBuffer = await crypto.subtle.digest('SHA-256'ffer);
49    const hashArray = Array.from(new Uint8Array(hashBuffer));
50    return hashArray.map(b => b.toString(16).padStart(2, '0'))
51                    .join('')
52                    .substring(0, 32);
53  }
54}

 1// 在应用初始化时生成指纹
 2const fingerprint = await DeviceFingerprintGenerator.generateFingerprint();
 3
 4// 在 API 请求中携带指纹
 5fetch('/api/data', {
 6  headers: {
 7    'X-Device-Fingerprint': fingerprint,
 8    'Authorization': `Bearer ${token}`
 9  }
10});

1{
2  "fingerprint": [
3    "a3f5e8c9d2b1...",
4    "b4e6f9c0d3a2..."
5  ]
6}

 1export class PreRegisteredDeviceManager {
 2  private static deviceRecords: Set<string> = new Set();
 3
 4  private static getSettingsPath(): string {
 5    const dataDir = process.env.HAPI_HOME
 6      ? process.env.HAPI_HOME.replace(/^~/, homedir())
 7      : join(homedir(), ".hapi");
 8    return joi "settings.json");
 9  }
10
11  static isDeviceAllowed(deviceFingerprint: string): boolean {
12    return this.deviceRecords.has(deviceFingerprint);
13  }
14
15  static async loadDeviceConfig(): Promise<void> {
16    try {
17      const settingsPath = this.getSettingsPath();
18      const { readFileSync, existsSync } = await import("fs");
19      if (existsSync(settingsPath)) {
20        const config = JSON.parse(readFileSync(settingsPath, "utf8"));
21        if (Array.isArray(config.fingerprint)) {
22          config.fingerprint.forEach((record: string) => {
23            this.deviceRecords.add(record);
24          });
25        }
26      }
27    } catch (error) {
28      console.error("Failed to load device config:", error);
29      throw error;
30    }
31  }
32}
33
34// 启动时加载配置
35PreRegisteredDeviceManager.loadDeviceConfig();

 1export function createDeviceBasedAuthMiddleware(jwtSecret: Uint8Array) {
 2  return async (c, next) => {
 3    try {
 4      // 1. 提取设备指纹（支持 Header 和 Query 两种方式）
 5      let deviceFingerprint = c.req.header('X-Device-Fingerprint');
 6      if (!deviceFingerprint) {
 7        deviceFingerprint = c.req.query().deviceFingerprint;
 8      }
 9
10      if (!deviceFingerprint) {
11        return c.json({
12          error: 'Device fingerprint required',
13          code: 'DEVICE_FINGERPRINT_MISSING'
14        }, 401);
15      }
16
17      // 2. 格式校验（32 位十六进制）
18      if (!/^[a-f0-9]{32}$/.test(deviceFingerprint)) {
19        return c.json({
20          error: 'Invalid device fingerprint format',
21          code: 'INVALID_DEVICE_FINGERPRINT_FORMAT'
22        }, 400);
23      }
24
25      // 3. 白名单检查
26      if (!PreRegisteredDeviceManager.isDeviceAllowed(deviceFingerprint)) {
27        return c.json({
28          error: 'Device not authorized',
29          code: 'DEVICE_NOT_AUTHORIZED'
30        }, 403);
31      }
32
33      // 4. JWT Token 验证
34      const authHeader = c.req.header('Authorization');
35      const tokenFromHeader = authHeader?.startsWith('Bearer ')
36        ? authHeader.slice('Bearer '.length)
37        : undefined;
38      const tokenFromQuery = c.req.path === '/api/events'
39        ? c.req.query().token
40        : undefined;
41      const accessToken = tokenFromHeader ?? tokenFromQuery;
42
43      if (!accessToken) {
44        return c.json({
45          error: 'Authorization token required',
46          code: 'AUTH_TOKEN_MISSING'
47        }, 401);
48      }
49
50      const verified = await jwtVerify(accessToken, jwtSecret);
51      const parsed = jwtPayloadSchema.safeParse(verified.payload);
52
53      if (!parsed.success) {
54        return c.json({ error: 'Invalid token payload' }, 401);
55      }
56
57      c.set('userId', parsed.data.uid);
58      c.set('namespace', parsed.data.ns);
59
60      await next();
61    } catch (error) {
62      return c.json({ error: 'Authentication failed' }, 500);
63    }
64  };
65}

 1import { Hono } from 'hono';
 2
 3const app = new Hono();
 4const jwtSecret = new TextEncoder().encode(process.env.JWT_SECRET);
 5
 6// 应用中间件到需要认证的路由
 7app.use('/api/*', createDeviceBasedAuthMiddleware(jwtSecret));
 8
 9app.get('/api/data', (c) => {
10  const userId = c.get('userId');
11  return c.json({ message: 'Authenticated!', userId });
12});

 1// 双路径提取设计
 2let deviceFingerprint = c.req.header('X-Device-Fingerprint');
 3if (!deviceFingerprint) {
 4  deviceFingerprint = c.req.query().deviceFingerprint;
 5}
 6
 7// Token 也是同样的逻辑
 8const tokenFromHeader = authHeader?.startsWith('Bearer ')
 9  ? authHeader.slice('Bearer '.length)
10  : undefined;
11const tokenFromQuery = c.req.path === '/api/events'
12  ? c.req.query().token
13  : undefined;
14const accessToken = tokenFromHeader ?? tokenFromQuery;