不管业务系统是文档协作、日志归档还是配置备份，数据一旦脱离本地环境进入云端，就面临传输途中和存储端的双重暴露风险。传统做法依赖 HTTPS 保护信道，但服务器侧仍然可以还原明文。SpiderOak 把加密密钥的生成和保管权完全移交给客户端，这种模式被称为零知识（Zero-Knowledge）备份。要在 Vue 3 单页应用里工程化落地零知识备份，需要解决三个问题：如何在前端安全高效地加密文件；如何与 SpiderOak API 对接完成文件上传下载；以及如何在用户界面中封装这些能力，让备份过程对用户透明且可靠。
零知识备份的原理与 SpiderOak 架构
零知识备份并非简单的端到端加密，它的核心约束是密钥生成、加解密操作全部在客户端进行，并且密钥不会以明文形式存入远端数据库。用户的认证凭据仅用于验证身份，密钥由密码学派生函数（如 PBKDF2）从用户主密码衍生，服务器完全不参与密钥协商。SpiderOak 的 Semaphor 平台采用容器级加密，每个文件使用独立的数据加密密钥（DEK），再用层次化密钥包（Key Vault）加密 DEK，最终只有持有根密钥的客户端可以解开整个密钥树。
对前端开发者而言，需要关注的是加密算法的选择以及在浏览器环境中的实现方式。AES-256-GCM 能够同时提供机密性和完整性校验，且在现代浏览器的 Web Crypto API 中已有原生支持，性能足以应对百兆级别的文件。加密后的数据连同经过密钥包裹的 DEK 一起组织成固定格式的上传负载，交由 SpiderOak 的 RESTful API 服务存储。服务端无法解析负载内部的明文内容，真正的隐私边界建立在客户端。
另外，SpiderOak 的文件系统类似对象存储，每个对象由 UUID 标识，版本历史也以加密增量方式保存。这意味着前端不仅要处理加密上传，还需要管理文件版本链，包括解密下载、版本切换等操作。好在其 API 设计相对简洁，通过区分容器操作和块操作，可以逐步构建出一个稳定的客户端备份服务。
在 Vue 3 中实现文件加密模块
我们首先在 src/utils/crypto.js 中封装一个基于 Web Crypto API 的加密工具。核心函数接受一个 File 对象和用户提供的密码，返回加密后的 ArrayBuffer 以及用于存储的元数据。加密流程如下：从密码通过 PBKDF2 派生 256 位密钥，同时生成 12 字节的随机初始化向量 (IV)；使用 AES-GCM 加密明文，GCM 模式会自动附加认证标签；最终输出将 IV、认证标签和密文串联在一起，方便后续上传。
// crypto.js
export async function encryptFile(file, password) {
const encoder = new TextEncoder();
// 1. 派生密钥
const salt = crypto.getRandomValues(new Uint8Array(16));
const keyMaterial = await crypto.subtle.importKey(
'raw',
encoder.encode(password),
'PBKDF2',
false,
['deriveBits', 'deriveKey']
);
const encryptionKey = await crypto.subtle.deriveKey(
{
name: 'PBKDF2',
salt,
iterations: 100000,
hash: 'SHA-256',
},
keyMaterial,
{ name: 'AES-GCM', length: 256 },
false,
['encrypt']
);
// 2. 读取文件内容并加密
const plaintext = await file.arrayBuffer();
const iv = crypto.getRandomValues(new Uint8Array(12));
const encrypted = await crypto.subtle.encrypt(
{ name: 'AES-GCM', iv },
encryptionKey,
plaintext
);
// 3. 拼接结果: salt(16) + iv(12) + 密文+标签
const encryptedBuffer = new Uint8Array(encrypted);
const result = new Uint8Array(16 + 12 + encryptedBuffer.byteLength);
result.set(salt, 0);
result.set(iv, 16);
result.set(encryptedBuffer, 28);
return {
encryptedData: result.buffer,
metadata: {
algorithm: 'AES-256-GCM',
iterations: 100000,
salt: Array.from(salt),
iv: Array.from(iv),
originalName: file.name,
originalSize: file.size,
}
};
}
加密后的 encryptedData 就是需要上传的二进制负载，而 metadata 对象记录了派生密钥所用的盐值、迭代次数和 IV，解密时必不可少。为了避免单文件加密阻塞主线程，可以用 Web Worker 将加密过程移入后台线程，对 Vue 组件的响应性影响降至最低。Worker 内部依然使用同样的 Web Crypto API，只需通过 postMessage 传递文件数据和密码即可。
解密逻辑与此对称：从加密数据头部取出盐和 IV，重新派生密钥，再用 AES-GCM 解密。注意 GCM 会在解密时自动验证认证标签，如果密文被篡改，API 会抛出异常，这恰好保证了零知识备份的完整性要求。
封装 SpiderOak API 交互层
SpiderOak 的 REST API 需要通过访问令牌进行认证，令牌通常由 OAuth2 或 API Key 方式获取。在 Vue 3 项目中，可以创建一个 spideroakService.js 模块，统一封装请求头、错误重试和分块上传逻辑。由于加密后的文件可能很大，分块上传不仅能降低失败重传的成本，还可以配合进度反馈。
我们首先定义基础请求函数，使用 axios 发送请求，并拦截 401 状态实现自动刷新令牌。每次上传文件前，先创建一个空的对象容器，获得一个容器 ID，然后按照 SpiderOak 的块上传协议，将文件切分成固定大小的块（例如每块 5MB），逐块 PUT 到对应的块端点。所有块上传完成后，发送一个完成请求，标记容器状态为可用。
// spideroakService.js
import axios from 'axios';
const API_BASE = 'https://spideroak.com/api/v1';
const client = axios.create({
baseURL: API_BASE,
headers: { 'Authorization': `Bearer ${getStoredToken()}` }
});
client.interceptors.response.use(
response => response,
async error => {
if (error.response?.status === 401) {
const newToken = await refreshToken();
storeToken(newToken);
error.config.headers['Authorization'] = `Bearer ${newToken}`;
return axios.request(error.config);
}
return Promise.reject(error);
}
);
async function createContainer(name) {
const { data } = await client.post('/containers', { name });
return data.id;
}
async function uploadChunk(containerId, chunkIndex, chunk) {
await client.put(`/containers/${containerId}/chunks/${chunkIndex}`, chunk, {
headers: { 'Content-Type': 'application/octet-stream' }
});
}
export async function uploadEncryptedFile(encryptedBuffer, fileName) {
const containerId = await createContainer(fileName);
const chunkSize = 5 * 1024 * 1024;
const totalChunks = Math.ceil(encryptedBuffer.byteLength / chunkSize);
for (let i = 0; i < totalChunks; i++) {
const start = i * chunkSize;
const end = Math.min(start + chunkSize, encryptedBuffer.byteLength);
const chunk = encryptedBuffer.slice(start, end);
await uploadChunk(containerId, i, chunk);
}
await client.post(`/containers/${containerId}/finalize`);
return containerId;
}
上面的代码只展示了核心流程，实际工程中还需要加入并发控制、暂停续传等功能。由于加密数据已经与用户密码绑定，即使 SpiderOak 服务器被攻破，攻击者也无法解密任何文件，这正是零知识架构带来的根本性安全优势。同时，加密后的文件名也应该进行脱敏处理，可以将原始文件名加密后仅以哈希值作为容器名，避免服务端泄露文件组织结构。
Vue 3 组合式 API 驱动备份界面
面向用户的备份功能需要一个清晰的状态机：选择文件 → 加密进度 → 上传进度 → 完成。我们可以借助 Vue 3 的 ref 和 reactive 创建一个可复用的组合函数 useBackup，它内部维护加密和上传两个阶段的百分比，并暴露 startBackup 方法供组件调用。
import { ref, readonly } from 'vue';
import { encryptFile } from '@/utils/crypto';
import { uploadEncryptedFile } from '@/services/spideroakService';
export function useBackup() {
const encryptProgress = ref(0);
const uploadProgress = ref(0);
const status = ref('idle'); // idle | encrypting | uploading | done | error
async function startBackup(file, password) {
status.value = 'encrypting';
try {
// 加密进度通过 Worker 回传消息更新
const { encryptedData, metadata } = await encryptWithProgress(file, password, (p) => {
encryptProgress.value = p;
});
status.value = 'uploading';
const containerId = await uploadWithProgress(encryptedData, metadata, (p) => {
uploadProgress.value = p;
});
status.value = 'done';
return containerId;
} catch (e) {
status.value = 'error';
throw e;
}
}
return {
encryptProgress: readonly(encryptProgress),
uploadProgress: readonly(uploadProgress),
status: readonly(status),
startBackup,
};
}
在组件中只需调用 const { encryptProgress, uploadProgress, status, startBackup } = useBackup()，然后将这些响应式数据绑定到模板的进度条和状态文本上。用户输入密码后点击备份按钮，文件首先被浏览器加密，随后分块送至 SpiderOak，整个交互不会将密码或明文泄露给网络层。
对于大型文件夹备份，可以将多个文件打包成加密归档，但 Vue 3 侧仍然按同样的模式工作：对每个文件单独加密并串行或并行上传。同时可以利用 watchEffect 监听备份状态变化，在备份完成后自动记录容器 ID 到本地 IndexedDB，以便用户后续进行下载解密或版本比对。这样构建出来的零知识备份功能，不仅安全模型完整，而且对用户而言操作十分简单，与普通云盘的体验相差无几，却在隐私保护上有了质的区别。