文件不上传:浏览器本地工具的设计边界
Canvas、Web Workers 与 IndexedDB 能做什么,以及怎样把“仅在本地处理”变成可以验证的隐私承诺。
“文件不会上传”是在线工具最有吸引力的承诺之一。它减少等待,也避免让证件、合同或私人照片经过陌生服务器。但一句界面文案并不能自动构成隐私保障:实现方式、第三方脚本与错误处理都需要支持这项承诺。
浏览器已经是一套运行环境
今天的浏览器不只是文档阅读器。它能够读取用户主动选择的文件,使用 Canvas 解码和重新编码图片,通过 Web Crypto 计算摘要,在 Web Worker 中执行耗时任务,并把临时状态写入 IndexedDB。
以图片压缩为例,基本流程可以完全停留在设备上:
- 用户通过文件选择器授权读取图片。
- 浏览器将文件解码为位图。
- Canvas 按目标尺寸重新绘制。
- 浏览器编码为 JPEG、PNG 或 WebP。
- 通过对象 URL 提供下载。
页面不需要把原文件提交给服务器。开发者工具的 Network 面板也应该能验证这一点。
把重活移出主线程
文件处理最常见的体验问题是页面“卡住”。JavaScript 默认与界面更新共用主线程;一次数秒的循环会阻止点击反馈和进度动画。
Web Worker 提供了清晰的隔离边界:主线程负责界面和消息,Worker 负责计算。传递大型二进制数据时,应使用 Transferable 对象转移所有权,避免昂贵的复制。
worker.postMessage({ buffer }, [buffer]);
worker.onmessage = ({ data }) => {
renderResult(data);
};
进度信息也应该来自真实处理阶段,而不是循环播放一个无法解释的百分比。对于几百毫秒即可完成的任务,简单的忙碌状态反而更诚实。
“本地处理”仍有边界
浏览器的可用内存受设备影响。一个 30 MB 的压缩图片在解码后,可能变成数百 MB 的像素数据;移动设备更容易因内存压力关闭标签页。因此工具必须提前检查文件尺寸与像素数量,并明确给出限制。
格式支持也取决于浏览器。Canvas 常见的 JPEG、PNG 和 WebP 路径很成熟,但专业图像、复杂 PDF 或视频转码往往需要 WASM。引入 WASM 后,下载体积、初始化时间和峰值内存都要重新衡量。
以下任务通常不适合只靠前端:
- 必须隐藏第三方 API 密钥;
- 需要跨设备同步且长期保存;
- 需要绕过目标网站的跨源限制;
- 文件远超普通设备的内存能力;
- 结果必须由可信服务端签名或审计。
审计你的隐私承诺
页面没有业务上传接口,不代表数据绝不会离开设备。错误监控、行为分析或广告脚本可能收集页面信息;若把文件名、输入文本或生成结果放进 URL,也可能进入访问日志。
上线前可以做一份小型审计:
- 处理期间观察全部网络请求;
- 不把用户内容写入日志或分析事件;
- 对对象 URL 及时调用
URL.revokeObjectURL; - 临时数据给出清除入口和保留时间;
- 第三方脚本保持最少,并在隐私政策中说明;
- 错误消息描述问题,不附带原始内容。
隐私不是一句产品卖点,而是一条从交互、代码到第三方依赖都能被检查的链路。
本地优先工具的理想状态,是让页面离线后仍能继续完成主要任务。做到这一点时,隐私、速度与可靠性往往会同时受益。