浏览器端隐私优先开发工具：从 Web Crypto 到 Web Workers 全栈实战

2026 年，开发者对数据隐私的重视达到了新高度——GitHub Copilot 的代码上传争议、Cloudflare 的流量审计事件、以及多起 SaaS 工具数据泄露，让越来越多的开发者开始审视：我每天用的在线工具，真的在本地处理我的数据吗？ 答案往往是否定的。本文将展示如何用纯浏览器 API（Web Crypto、Web Workers、IndexedDB）构建真正意义上的隐私优先开发工具——所有计算在浏览器完成，数据永不离开用户设备。

📌 记住：「隐私优先」不是一句口号，而是一种架构决策。它意味着从设计之初就排除服务端处理的可能性，而不是事后加一个「我们不会上传您的数据」的声明。

🔐 一、Web Crypto API：浏览器原生加密能力

大多数开发者对浏览器加密的认知还停留在 btoa() 和 atob()——这两个函数只是 Base64 编码，不是加密。Web Crypto API 才是浏览器提供的真正密码学能力，支持 AES-GCM、RSA-OAEP、ECDSA、PBKDF2 等主流算法。

📌 为什么不用 crypto-js？

很多项目还在用 crypto-js 这个 npm 包，但它有几个严重问题：

⚠️ **警告：**crypto-js 4.0 之前的版本存在已知的密钥派生漏洞。如果你的项目还在用它处理敏感数据，请立即迁移到 Web Crypto API。

🔧 AES-GCM 加解密实战

AES-GCM 是目前最推荐的对称加密算法，同时提供加密和认证（防止篡改）。

// AES-GCM 加解密工具 — 纯浏览器实现，无任何外部依赖
// 所有操作在客户端完成，密钥和明文永远不会离开浏览器

async function generateKey() {
  // 生成 256 位 AES 密钥
  return await crypto.subtle.generateKey(
    { name: 'AES-GCM', length: 256 },
    true,  // extractable，允许导出
    ['encrypt', 'decrypt']
  )
}

async function encrypt(text, key) {
  // 生成随机 12 字节 IV（每次加密必须不同）
  const iv = crypto.getRandomValues(new Uint8Array(12))
  const encoded = new TextEncoder().encode(text)

  const ciphertext = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    encoded
  )

  // 将 IV 和密文拼接存储，方便传输
  const combined = new Uint8Array(iv.length + ciphertext.byteLength)
  combined.set(iv)
  combined.set(new Uint8Array(ciphertext), iv.length)

  // 返回 Base64 编码的完整密文
  return btoa(String.fromCharCode(...combined))
}

async function decrypt(encryptedBase64, key) {
  // 解析 Base64，分离 IV 和密文
  const combined = Uint8Array.from(atob(encryptedBase64), c => c.charCodeAt(0))
  const iv = combined.slice(0, 12)
  const ciphertext = combined.slice(12)

  const decrypted = await crypto.subtle.decrypt(
    { name: 'AES-GCM', iv },
    key,
    ciphertext
  )

  return new TextDecoder().decode(decrypted)
}

// 使用示例
const key = await generateKey()
const secret = '{"apiKey":"sk-12345","database":"production"}'
const encrypted = await encrypt(secret, key)
console.log('加密结果:', encrypted)  // 一串 Base64 字符串
const decrypted = await decrypt(encrypted, key)
console.log('解密结果:', decrypted)  // 还原为原始 JSON

💡 提示：crypto.subtle 只在安全上下文（HTTPS 或 localhost）中可用。开发环境记得用 localhost 而不是 0.0.0.0。

🔧 密码哈希：PBKDF2 替代 MD5

如果你的工具需要做密码哈希或数据指纹，不要再用 MD5/SHA-1——它们已被证明不安全。Web Crypto 原生支持 SHA-256 和 PBKDF2。

// SHA-256 哈希 — 用于数据完整性校验
async function sha256(data) {
  const encoded = new TextEncoder().encode(data)
  const hash = await crypto.subtle.digest('SHA-256', encoded)
  return Array.from(new Uint8Array(hash))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('')
}

// PBKDF2 密码哈希 — 用于密码存储（比 bcrypt 更安全）
async function hashPassword(password, salt) {
  const encoder = new TextEncoder()
  const keyMaterial = await crypto.subtle.importKey(
    'raw',
    encoder.encode(password),
    'PBKDF2',
    false,
    ['deriveBits']
  )

  const derivedBits = await crypto.subtle.deriveBits(
    {
      name: 'PBKDF2',
      salt: encoder.encode(salt),
      iterations: 310000,  // OWASP 2024 推荐值
      hash: 'SHA-256'
    },
    keyMaterial,
    256
  )

  return Array.from(new Uint8Array(derivedBits))
    .map(b => b.toString(16).padStart(2, '0'))
    .join('')
}

// 对比：不同哈希算法的速度和安全性
console.log(await sha256('hello world'))
// a948904f2f0f479b8f8564e9d7a8f22e...
console.log(await hashPassword('mypassword', 'randomsalt'))
// 需要 ~100ms（故意慢，防止暴力破解）

⚡ **关键结论：**Web Crypto API 的 SHA-256 性能比 crypto-js 快 5-10 倍，且不需要引入任何依赖。对于浏览器端工具，这是唯一正确的选择。

⚡ 二、Web Workers：释放浏览器并行计算能力

开发者工具经常需要处理大文件——格式化一个 10MB 的 JSON、转换一个百万行的 CSV、或生成一个复杂的数据报告。如果在主线程执行，UI 会完全卡死。Web Workers 提供了真正的多线程能力。

📌 架构设计：主线程与 Worker 的职责划分

┌─────────────────────────────────────────────────────────┐
│  主线程 (Main Thread)                                    │
│  ├── 用户界面渲染与交互                                    │
│  ├── 接收用户输入（文件、文本）                              │
│  ├── 调用 Worker 处理数据                                  │
│  └── 接收处理结果并渲染                                     │
│                                                          │
│  ┌────────────────────────────────────────────────────┐  │
│  │  Worker 线程                                        │  │
│  │  ├── 数据处理（JSON 解析、格式化、转换）              │  │
│  │  ├── 加密计算（哈希、加解密）                         │  │
│  │  └── 大数据集遍历和转换                               │  │
│  │  ⚠️ 无法访问 DOM、window、localStorage              │  │
│  └────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

🔧 Worker 池实现：复用线程避免创建开销

每次 new Worker() 都有约 5-10ms 的启动开销。对于频繁调用的工具，应该维护一个 Worker 池。

// worker-pool.js — 通用 Worker 池，支持并发限制和任务队列
export class WorkerPool {
  constructor(createWorker, poolSize = navigator.hardwareConcurrency || 4) {
    this.createWorker = createWorker
    this.poolSize = poolSize
    this.workers = []
    this.idleWorkers = []
    this.taskQueue = []
  }

  async execute(taskData) {
    return new Promise((resolve, reject) => {
      const task = { data: taskData, resolve, reject }

      // 有空闲 Worker，直接分配
      if (this.idleWorkers.length > 0) {
        this._dispatch(this.idleWorkers.pop(), task)
        return
      }

      // 还能创建新 Worker
      if (this.workers.length < this.poolSize) {
        const worker = this.createWorker()
        this.workers.push(worker)
        this._dispatch(worker, task)
        return
      }

      // 已达上限，加入队列等待
      this.taskQueue.push(task)
    })
  }

  _dispatch(worker, task) {
    const onMessage = (e) => {
      worker.removeEventListener('message', onMessage)
      worker.removeEventListener('error', onError)
      task.resolve(e.data)

      // 处理队列中的下一个任务
      if (this.taskQueue.length > 0) {
        this._dispatch(worker, this.taskQueue.shift())
      } else {
        this.idleWorkers.push(worker)
      }
    }

    const onError = (e) => {
      worker.removeEventListener('message', onMessage)
      worker.removeEventListener('error', onError)
      task.reject(new Error(e.message))
    }

    worker.addEventListener('message', onMessage)
    worker.addEventListener('error', onError)
    worker.postMessage(task.data)
  }

  terminate() {
    this.workers.forEach(w => w.terminate())
    this.workers = []
    this.idleWorkers = []
    this.taskQueue = []
  }
}

🔧 实战：JSON 格式化的并行处理

对于大 JSON 文件，解析和格式化可以在 Worker 中完成，主线程只负责渲染。

// json-format-worker.js — 在 Worker 线程中运行
self.addEventListener('message', (e) => {
  const { id, text, indent } = e.data

  try {
    const start = performance.now()
    const parsed = JSON.parse(text)
    const formatted = JSON.stringify(parsed, null, indent || 2)
    const duration = performance.now() - start

    self.postMessage({
      id,
      success: true,
      result: formatted,
      stats: {
        inputSize: text.length,
        outputSize: formatted.length,
        parseTime: duration.toFixed(2) + 'ms',
        depth: getJsonDepth(parsed)
      }
    })
  } catch (error) {
    self.postMessage({
      id,
      success: false,
      error: error.message,
      // 尝试定位错误位置
      position: extractErrorPosition(error.message)
    })
  }
})

function getJsonDepth(obj, current = 0) {
  if (typeof obj !== 'object' || obj === null) return current
  return Math.max(
    ...Object.values(obj).map(v => getJsonDepth(v, current + 1)),
    current
  )
}

function extractErrorPosition(message) {
  const match = message.match(/position\s+(\d+)/)
  return match ? parseInt(match[1]) : null
}

// 主线程调用示例
import { WorkerPool } from './worker-pool.js'

const pool = new WorkerPool(
  () => new Worker(new URL('./json-format-worker.js', import.meta.url)),
  4  // 最多 4 个并发 Worker
)

async function formatJson(text, indent = 2) {
  // 大文件用 Worker，小文件直接在主线程处理（避免 Worker 通信开销）
  if (text.length < 10_000) {
    return JSON.stringify(JSON.parse(text), null, indent)
  }

  return pool.execute({ text, indent })
}

// 性能对比：10MB JSON 格式化
// 主线程: ~800ms（UI 完全卡死）
// Worker: ~650ms（UI 流畅响应）
// Worker Pool (4线程): 对多个文件并行处理，总耗时接近单个文件

⚠️ **警告：**Worker 之间通过 postMessage 传递数据会进行结构化克隆（Structured Clone），对于超大数据集（>100MB），考虑使用 Transferable 对象（如 ArrayBuffer）来避免复制开销。

⚡ 性能对比：主线程 vs Worker

💡 **提示：**当数据量 < 100KB 时，Worker 的通信开销（~2ms）反而会让总耗时更长。建议设置一个阈值，小数据在主线程处理，大数据用 Worker。

💾 三、IndexedDB：浏览器端的持久化存储

隐私优先工具的另一个挑战是：用户的历史记录和配置如何持久化？localStorage 只有 5-10MB 限制且只能存字符串，IndexedDB 则支持结构化数据和大容量存储。

🔧 简化 IndexedDB 操作的封装

原生 IndexedDB API 非常冗长（回调地狱），以下是简洁的 Promise 封装：

// db.js — 轻量 IndexedDB 封装，支持 async/await
export class LocalDB {
  constructor(name, version = 1) {
    this.name = name
    this.version = version
    this.db = null
  }

  async open(stores) {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.name, this.version)

      request.onupgradeneeded = (e) => {
        const db = e.target.result
        for (const [name, config] of Object.entries(stores)) {
          if (!db.objectStoreNames.contains(name)) {
            const store = db.createObjectStore(name, config)
            if (config.indexes) {
              config.indexes.forEach(idx =>
                store.createIndex(idx, idx, { unique: false })
              )
            }
          }
        }
      }

      request.onsuccess = (e) => {
        this.db = e.target.result
        resolve(this.db)
      }

      request.onerror = (e) => reject(e.target.error)
    })
  }

  async put(storeName, data) {
    const tx = this.db.transaction(storeName, 'readwrite')
    const store = tx.objectStore(storeName)
    return new Promise((resolve, reject) => {
      const request = store.put(data)
      request.onsuccess = () => resolve(request.result)
      request.onerror = () => reject(request.error)
    })
  }

  async get(storeName, key) {
    const tx = this.db.transaction(storeName, 'readonly')
    const store = tx.objectStore(storeName)
    return new Promise((resolve, reject) => {
      const request = store.get(key)
      request.onsuccess = () => resolve(request.result)
      request.onerror = () => reject(request.error)
    })
  }

  async getAll(storeName) {
    const tx = this.db.transaction(storeName, 'readonly')
    const store = tx.objectStore(storeName)
    return new Promise((resolve, reject) => {
      const request = store.getAll()
      request.onsuccess = () => resolve(request.result)
      request.onerror = () => reject(request.error)
    })
  }

  async delete(storeName, key) {
    const tx = this.db.transaction(storeName, 'readwrite')
    const store = tx.objectStore(storeName)
    return new Promise((resolve, reject) => {
      const request = store.delete(key)
      request.onsuccess = () => resolve()
      request.onerror = () => reject(request.error)
    })
  }
}

// 使用示例：保存用户的工具使用历史
const db = new LocalDB('dev-tools-history', 1)
await db.open({
  history: { keyPath: 'id', autoIncrement: true, indexes: ['tool', 'timestamp'] },
  settings: { keyPath: 'key' }
})

// 保存一条操作记录
await db.put('history', {
  tool: 'json-format',
  input: '{"compact":true}',
  output: '{\n  "compact": true\n}',
  timestamp: Date.now()
})

// 获取所有 JSON 格式化的历史记录
const allHistory = await db.getAll('history')
const jsonHistory = allHistory.filter(h => h.tool === 'json-format')

📊 存储方案对比

⚡ **关键结论：**对于开发者工具，IndexedDB 是最佳选择——容量足够、支持索引查询、可在 Worker 中使用。OPFS 适合需要处理大文件的场景（如视频转码工具）。

✅ 四、完整架构：隐私优先工具的技术栈

将以上技术组合起来，一个隐私优先的开发者工具应该有这样的架构：

用户输入 → 主线程接收 → 判断数据量
  ├── 小数据 (< 100KB) → 主线程直接处理 → 返回结果
  └── 大数据 → Worker Pool 处理 → postMessage 返回结果
                                        ↓
                              结果存入 IndexedDB（历史记录）
                                        ↓
                              UI 渲染结果（虚拟列表优化大文本）

核心原则：

• ✅ 所有计算在浏览器完成，不依赖任何后端 API
• ✅ 使用 Web Crypto 而非第三方加密库
• ✅ 大数据处理用 Web Workers，避免 UI 卡顿
• ✅ 历史记录用 IndexedDB，配置用 localStorage
• ✅ 使用虚拟列表（Virtual Scroll）渲染大文本结果
• ❌ 不要将用户数据发送到分析服务（Google Analytics 等）
• ❌ 不要用 eval() 或 new Function() 处理用户输入
• ❌ 不要在主线程处理超过 1MB 的数据

📌 记住：隐私优先的最大优势是零信任成本——用户不需要相信你的服务器，因为数据根本没有离开他们的浏览器。这也是 jsjson.com 所有工具「本地处理不上传服务器」的核心理念。

推荐的开源工具库：