浏览器技术 / ARTICLE

文件不上传:浏览器本地工具的设计边界

Canvas、Web Workers 与 IndexedDB 能做什么,以及怎样把“仅在本地处理”变成可以验证的隐私承诺。

“文件不会上传”是在线工具最有吸引力的承诺之一。它减少等待,也避免让证件、合同或私人照片经过陌生服务器。但一句界面文案并不能自动构成隐私保障:实现方式、第三方脚本与错误处理都需要支持这项承诺。

浏览器已经是一套运行环境

今天的浏览器不只是文档阅读器。它能够读取用户主动选择的文件,使用 Canvas 解码和重新编码图片,通过 Web Crypto 计算摘要,在 Web Worker 中执行耗时任务,并把临时状态写入 IndexedDB。

以图片压缩为例,基本流程可以完全停留在设备上:

  1. 用户通过文件选择器授权读取图片。
  2. 浏览器将文件解码为位图。
  3. Canvas 按目标尺寸重新绘制。
  4. 浏览器编码为 JPEG、PNG 或 WebP。
  5. 通过对象 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
  • 临时数据给出清除入口和保留时间;
  • 第三方脚本保持最少,并在隐私政策中说明;
  • 错误消息描述问题,不附带原始内容。

隐私不是一句产品卖点,而是一条从交互、代码到第三方依赖都能被检查的链路。

本地优先工具的理想状态,是让页面离线后仍能继续完成主要任务。做到这一点时,隐私、速度与可靠性往往会同时受益。

END