Bili Sync 前端认证 Token 实战指南：从原理到安全实现

1次阅读

没有评论

共计 3515 个字符，预计需要花费 9 分钟才能阅读完成。

在传统的 B/S 架构中，Cookie/Session 是最常用的认证方式。但在 Bili Sync 这类跨域场景下，这种模式暴露了几个明显的局限性：

跨域限制 ：Cookie 受同源策略限制，在多个子域名间共享需要复杂配置
扩展性问题 ：Session 存储在服务端内存，分布式环境下需要额外解决方案
移动端适配 ：原生 App 对 Cookie 支持不友好，需要额外处理

我们对比了三种主流方案：

JWT
优点：无状态、跨域友好、标准化
缺点：无法主动失效、Payload 可能泄露敏感信息
OAuth2
优点：完善的授权流程、适合第三方登录
缺点：实现复杂、过度设计
自定义 Token
优点：完全可控
缺点：需要自建全套安全机制

最终选择 JWT 主要基于：
– Bili Sync 的跨域需求
– 前后端分离架构的适配性
– 开发维护成本考量

// 使用 axios 拦截器处理认证
const service = axios.create({baseURL: API_BASE_URL});

// 请求拦截器
service.interceptors.request.use(config => {const token = getToken();
  if (token) {config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
service.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const newToken = await refreshToken();
      storeToken(newToken);
      originalRequest.headers['Authorization'] = `Bearer ${newToken}`;
      return service(originalRequest);
    }
    return Promise.reject(error);
  }
);

// 使用 Web Crypto API 加密
async function encryptToken(token: string): Promise<ArrayBuffer> {const encoder = new TextEncoder();
  const data = encoder.encode(token);
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(SECRET_KEY),
    {name: 'AES-GCM'},
    false,
    ['encrypt']
  );
  return crypto.subtle.encrypt({ name: 'AES-GCM', iv: new Uint8Array(12) },
    key,
    data
  );
}

// IndexedDB 存储
const dbPromise = indexedDB.open('TokenDB', 1);
dbPromise.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('tokens', { keyPath: 'id'});
};

let isRefreshing = false;
let refreshSubscribers: Function[] = [];

function subscribeTokenRefresh(cb: Function) {refreshSubscribers.push(cb);
}

function onRefreshed(token: string) {refreshSubscribers.forEach(cb => cb(token));
  refreshSubscribers = [];}

async function refreshToken() {if (isRefreshing) {
    return new Promise(resolve => {subscribeTokenRefresh(resolve);
    });
  }

  isRefreshing = true;
  try {const { data} = await authService.refresh();
    onRefreshed(data.token);
    return data.token;
  } finally {isRefreshing = false;}
}

设置 HttpOnly 和 Secure 的 Cookie 用于 CSRF Token
实现双重提交 Cookie 验证
使用 CSP 策略限制脚本执行

// CSRF 防护中间件
app.use((req, res, next) => {if (['POST', 'PUT', 'DELETE'].includes(req.method)) {const csrfCookie = req.cookies['XSRF-TOKEN'];
    const csrfHeader = req.headers['x-xsrf-token'];

    if (!csrfCookie || !csrfHeader || csrfCookie !== csrfHeader) {return res.status(403).json({error: 'Invalid CSRF token'});
    }
  }
  next();});

// Redis 黑名单示例
class TokenBlacklist {async revoke(token: string, expiry: number) {
    // 将 token 剩余有效期作为 TTL
    await redis.set(`blacklist:${token}`, '1', 'EX', expiry);
  }

  async isRevoked(token: string) {return Boolean(await redis.exists(`blacklist:${token}`));
  }
}

避免使用 localStorage 存储原始 Token
如果必须使用，至少进行加密处理
考虑设置自动清理机制

使用队列机制确保只有一个刷新请求
实现请求重试机制
添加超时处理避免死锁

在网关层统一验证 JWT
使用无状态验证减少数据库查询
实现短期缓存已验证的 Token

// 内存缓存示例
const tokenCache = new Map<string, boolean>();

async function verifyToken(token: string) {if (tokenCache.has(token)) {return tokenCache.get(token);
  }

  const isValid = await jwt.verify(token, SECRET);
  tokenCache.set(token, isValid);

  // 设置缓存过期时间略短于 Token 本身
  setTimeout(() => tokenCache.delete(token), TOKEN_TTL - 5000);

  return isValid;
}

// worker.js
self.onmessage = async (e) => {const { token, secret} = e.data;
  const encrypted = await encryptToken(token, secret);
  self.postMessage(encrypted);
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({token, secret: SECRET_KEY});
worker.onmessage = (e) => {console.log('Encrypted:', e.data);
};

通过上述优化，我们在测试环境中观察到：