如何在Three.js中实现.glb文件客户端缓存且不泄露数据？

针对你的需求，这里提供三个不同复杂度的方案，兼顾安全性、低延迟和密钥管理的简洁性：

方案一：HTTP私有缓存+服务器授权校验（零加密复杂度） #

核心思路 #

利用浏览器原生HTTP缓存，结合服务器端的授权校验，既实现缓存降延迟，又确保只有授权用户能访问缓存数据。

实现步骤 #

1. 配置服务器缓存头：给受保护的模型GET路由设置Cache-Control: private, max-age=86400（private确保缓存仅存储在当前用户浏览器，不被CDN等共享缓存保存；max-age控制缓存有效期）。
2. 保留授权校验逻辑：即使浏览器存在缓存，每次请求时服务器仍先校验用户的授权令牌（Cookie/Bearer Token）：
   • 授权有效：返回304 Not Modified，让浏览器直接使用本地缓存；
   • 授权失效：返回403 Forbidden，阻止缓存访问。

优势 #

• 完全无需处理加密解密，复杂度极低；
• 延迟最小，直接复用浏览器原生缓存逻辑；
• 数据仅对授权用户可见，未授权用户无法触发缓存命中。

局限性 #

• 缓存的是明文GLB数据，若用户通过DevTools的Network/Storage面板获取到缓存文件，可直接解析（适合对数据安全性要求中等的场景）。

方案二：客户端缓存加密模型+短期会话密钥（高安全性+可控复杂度） #

核心思路 #

服务器存储加密后的模型文件，客户端缓存加密数据，通过短期会话密钥在客户端解密，既避免明文暴露，又实现本地缓存降延迟。

实现步骤 #

服务器端（Node.js示例）

const crypto = require('crypto');
const fs = require('fs').promises;

// 生成256位AES会话密钥（每个用户会话生成一次）
const generateSessionKey = () => crypto.randomBytes(32).toString('base64');

// AES-GCM加密模型（带认证标签，防止数据篡改）
const encryptModel = async (filePath, key) => {
  const iv = crypto.randomBytes(12); // AES-GCM标准IV长度
  const cipher = crypto.createCipheriv('aes-256-gcm', Buffer.from(key, 'base64'), iv);
  
  const fileBuffer = await fs.readFile(filePath);
  const encrypted = Buffer.concat([cipher.update(fileBuffer), cipher.final()]);
  const authTag = cipher.getAuthTag();
  
  return Buffer.concat([iv, encrypted, authTag]); // IV+加密数据+认证标签
};

// 模型请求路由
app.get('/api/models/:id', async (req, res) => {
  // 1. 校验用户授权
  const authToken = req.headers.authorization?.split(' ')[1];
  if (!validateToken(authToken)) return res.sendStatus(403);

  const modelId = req.params.id;
  const modelPath = `./encrypted-models/${modelId}.glb`;

  // 2. 获取或生成用户会话密钥（存在服务器端会话，比如Redis）
  let sessionKey = req.session.modelKey;
  if (!sessionKey) {
    sessionKey = generateSessionKey();
    req.session.modelKey = sessionKey;
  }

  // 3. 返回加密数据和密钥
  const encryptedData = await encryptModel(modelPath, sessionKey);
  res.setHeader('Cache-Control', 'private, max-age=86400');
  res.setHeader('X-Model-Key', sessionKey); // 密钥通过响应头返回
  res.type('application/octet-stream').send(encryptedData);
});

客户端（自定义缓存版useGLTF）

import { useGLTF } from '@react-three/drei';
import { useEffect, useState } from 'react';
import { openDB } from 'idb';

// 初始化IndexedDB存储加密模型
const initDB = async () => openDB('3DModelCache', 1, {
  upgrade(db) { db.createObjectStore('encryptedModels', { keyPath: 'modelId' }); }
});

// 缓存加密模型
const cacheEncryptedModel = async (modelId, data) => {
  const db = await initDB();
  await db.put('encryptedModels', { modelId, data });
};

// 获取缓存的加密模型
const getCachedEncryptedModel = async (modelId) => {
  const db = await initDB();
  return db.get('encryptedModels', modelId);
};

// AES-GCM解密模型
const decryptModel = async (encryptedBuffer, key) => {
  const cryptoKey = await crypto.subtle.importKey(
    'raw', Uint8Array.from(atob(key), c => c.charCodeAt(0)),
    { name: 'AES-GCM' }, false, ['decrypt']
  );
  const iv = encryptedBuffer.slice(0, 12);
  const dataWithTag = encryptedBuffer.slice(12);
  const data = dataWithTag.slice(0, -16); // 分离认证标签（最后16字节）
  const authTag = dataWithTag.slice(-16);

  return crypto.subtle.decrypt(
    { name: 'AES-GCM', iv, authTag }, cryptoKey, data
  );
};

// 自定义带缓存的useGLTF
export const useCachedGLTF = (modelId, modelUrl) => {
  const [model, setModel] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadModel = async () => {
      try {
        // 1. 检查本地缓存和会话密钥
        const cached = await getCachedEncryptedModel(modelId);
        const sessionKey = sessionStorage.getItem('modelSessionKey');
        
        if (cached && sessionKey) {
          const decryptedBuffer = await decryptModel(cached.data, sessionKey);
          const parsedModel = await useGLTF.parse(new Uint8Array(decryptedBuffer));
          setModel(parsedModel);
          return;
        }

        // 2. 从服务器请求
        const response = await fetch(modelUrl, {
          headers: { Authorization: `Bearer ${localStorage.getItem('authToken')}` }
        });
        if (!response.ok) throw new Error('授权失败');

        const encryptedBuffer = await response.arrayBuffer();
        const key = response.headers.get('X-Model-Key');
        if (!key) throw new Error('未获取到解密密钥');

        // 3. 缓存数据和密钥
        await cacheEncryptedModel(modelId, encryptedBuffer);
        sessionStorage.setItem('modelSessionKey', key); // 密钥存在会话存储，关闭浏览器即失效

        // 4. 解密并解析模型
        const decryptedBuffer = await decryptModel(encryptedBuffer, key);
        const parsedModel = await useGLTF.parse(new Uint8Array(decryptedBuffer));
        setModel(parsedModel);
      } catch (err) {
        setError(err);
      }
    };
    loadModel();
  }, [modelId, modelUrl]);

  return { model, error };
};

优势 #

• 客户端缓存的是加密数据，即使被窃取也无法解析；
• 密钥为短期会话级，与用户会话绑定，泄露风险低；
• 本地缓存直接解密使用，延迟接近原生缓存。

注意事项 #

• 密钥存储在sessionStorage而非localStorage，避免XSS攻击长期窃取；
• 必须使用HTTPS传输，防止密钥和加密数据被窃听；
• 用户注销时，清除sessionStorage和IndexedDB中的缓存数据。

方案三：服务器端缓存代理（零客户端复杂度+完全数据隔离） #

核心思路 #

所有模型请求都经过服务器缓存层（比如Redis），服务器仅向授权用户返回明文模型，客户端不缓存任何数据，完全由服务器控制缓存逻辑。

实现步骤 #

1. 搭建服务器缓存层：用Redis存储已授权用户的模型数据，缓存Key为userId:modelId；
2. 请求处理逻辑：
   • 用户请求模型时，先校验授权；
   • 若缓存存在且用户匹配，直接返回缓存的明文模型；
   • 若缓存不存在，从存储加载模型，存入缓存后返回。

优势 #

• 客户端无需修改任何代码，完全使用原有的useGLTF；
• 明文数据仅在服务器端缓存，客户端从未接触原始数据，安全性极高；
• 授权逻辑完全由服务器控制，无客户端密钥管理风险。

局限性 #

• 服务器缓存会增加运维成本和资源消耗；
• 延迟略高于客户端缓存，但远低于重新加载原始文件。

方案选型建议 #

• 优先选方案一：如果对数据安全性要求中等，追求最低复杂度和延迟；
• 选方案二：如果需要高数据安全性，能接受少量客户端代码修改；
• 选方案三：如果要求完全隔离客户端与原始数据，且愿意承担服务器缓存成本。

内容的提问来源于stack exchange，提问作者Ebod Shojaei