Skip to content
←Back to Blog
October 10, 2026•9 min read•By Dzaki Amri Zaidaan

Rampart: Browser-Native On-Device PII Redaction with WebAssembly and the Shape Detection API

A production-grade architecture for redacting PII entirely in the browser using WebAssembly, the Shape Detection API, and Web Workers. Covers the memory model, latency budgets, and the trade-offs of moving redaction from server to client.

#Frontend#AI & ML
monitor showing Java programming

Rampart: Browser-Native On-Device PII Redaction

1. The Problem & Industry Shift

For the last decade, PII redaction has lived on the server. You ship raw text, images, or PDFs to an API endpoint, run a regex or NER model, and return a sanitized payload. This model has three structural failures:

  1. Data residency and compliance. Under GDPR, HIPAA, and the EU AI Act, transmitting raw PII to a third-party processor is itself a regulated event. A redaction service that sees the PII is a data processor, not a neutral tool.
  2. Latency and cost. A round trip to a GPU-backed NER endpoint adds 200–800ms per document and scales linearly with volume. For a client-side form autosave, that is unacceptable.
  3. Trust boundary. Users have no way to verify that the server actually discarded the raw input. The redaction is a promise, not a proof.

The industry shift is toward on-device redaction: the browser becomes the trust boundary. The raw PII never leaves the window context. Rampart is a reference architecture for this pattern, built on three primitives that are now stable across Chromium, Firefox, and Safari:

  • WebAssembly (Wasm) for deterministic, near-native NER inference via wasm-bindgen and ONNX Runtime Web [1].
  • Web Workers to keep inference off the main thread and preserve 60fps interaction.
  • The Shape Detection API (TextDetector, FaceDetector) for image and video redaction without shipping a model at all [2].

The key insight: redaction is a lossy operation. You do not need a perfect model. You need a model that is good enough and fast enough that the user never notices, running in a sandbox the user controls.

2. Architecture & Core Mechanics

Rampart is a layered pipeline. Each layer is independently testable and can be swapped without touching the others.

┌──────────────────────────────────────────────────────────────────┐
│  Main Thread (UI)                                                │
│  ┌────────────┐   postMessage(Transferable)   ┌───────────────┐  │
│  │  <input>   │ ────────────────────────────▶ │  Redactor     │  │
│  │  <canvas>  │ ◀──────────────────────────── │  Worker       │  │
│  └────────────┘   { spans, redactedBitmap }   └───────┬───────┘  │
└───────────────────────────────────────────────────────┼──────────┘
                                                        │
                        ┌───────────────────────────────┼───────────────┐
                        │  Worker Scope                 ▼               │
                        │  ┌─────────────┐  ┌──────────────┐  ┌───────┐ │
                        │  │ Tokenizer   │─▶│ NER (Wasm)   │─▶│ Merge │ │
                        │  │ (regex+WS)  │  │ ONNX Runtime │  │ spans │ │
                        │  └─────────────┘  └──────────────┘  └───┬───┘ │
                        │                                          │     │
                        │  ┌───────────────────────────────────────▼───┐ │
                        │  │ Shape Detection API (Text/Face)           │ │
                        │  └───────────────────────────────────────────┘ │
                        └───────────────────────────────────────────────┘

2.1 The Tokenizer Layer

NER models operate on tokens, not characters. The tokenizer must map byte offsets back to the original string so we can emit redaction spans. We use a WordPiece tokenizer compiled to Wasm, but we front it with a cheap regex pass for high-confidence patterns (emails, SSNs, credit cards, IBANs). This is a deliberate trade-off: regex catches ~40% of PII in typical form data at near-zero cost, so the NER model only runs on the residual.

2.2 The NER Layer

We ship a quantized distilbert-base-multilingual-cased fine-tuned on CoNLL-2003 plus a synthetic PII corpus. The model is ~65MB in INT8, which is acceptable for a one-time download and cached via the Cache API. Inference runs in onnxruntime-web with the wasm execution provider [1].

Critical detail: we do not run the model on the full document. We chunk into 512-token windows with 64-token stride, run inference, and merge overlapping entity spans using a union-find. This bounds memory to O(window) rather than O(document).

2.3 The Shape Detection Layer

For images, the TextDetector and FaceDetector interfaces from the Shape Detection API return bounding boxes directly [2]. This is dramatically cheaper than running a vision model: the browser's native OCR and face detection run in the compositor process. We then draw opaque rectangles over the returned boxes on an OffscreenCanvas.

Image → createImageBitmap → TextDetector.detect() → [{boundingBox, rawValue}]
                          → FaceDetector.detect() → [{boundingBox}]
                          → OffscreenCanvas.drawRect(black) → redactedBitmap

2.4 Span Merging and Output

The worker returns a normalized RedactionResult:

  • spans: Array<{ start: number; end: number; label: PIILabel; confidence: number }>
  • redacted: string (for text) or redactedBitmap: ImageBitmap (for images)

Spans are merged with a union-find to handle overlapping entities (e.g., a person's name inside an email address). The UI layer renders the redacted text with <mark> elements and a tooltip showing the label and confidence.

3. Production Code Example

Below is the worker entry point. It is TypeScript, runs in a module worker, and uses Transferable objects to avoid copying large buffers.

// redactor.worker.ts
import { pipeline, env } from '@huggingface/transformers';
import { detectPII } from './regex-pii';
import { mergeSpans } from './span-merge';

// Disable remote model loading; we ship the model in the bundle.
env.allowRemoteModels = false;
env.localModelPath = '/models/';

let ner: Awaited<ReturnType<typeof pipeline>> | null = null;

async function getNER() {
  if (!ner) {
    // INT8 quantized, wasm EP. First call downloads ~65MB, cached by Cache API.
    ner = await pipeline('token-classification', 'rampart-pii-distilbert-int8', {
      device: 'wasm',
      dtype: 'q8',
    });
  }
  return ner;
}

type RedactionRequest = {
  id: string;
  kind: 'text' | 'image';
  payload: string | ImageBitmap;
};

type Span = { start: number; end: number; label: string; confidence: number };

self.onmessage = async (ev: MessageEvent<RedactionRequest>) => {
  const { id, kind, payload } = ev.data;

  try {
    if (kind === 'text') {
      const text = payload as string;

      // Layer 1: cheap regex pass. Catches emails, SSNs, cards, IBANs.
      const regexSpans = detectPII(text);

      // Layer 2: NER only on the residual. We mask regex hits with a
      // sentinel so the model does not waste tokens on them.
      const masked = maskSpans(text, regexSpans);
      const model = await getNER();
      const raw = await model(masked, { aggregation_strategy: 'simple' });

      const nerSpans: Span[] = raw.map((e: any) => ({
        start: e.start,
        end: e.end,
        label: e.entity_group,
        confidence: e.score,
      }));

      // Union-find merge handles nested entities (name inside email).
      const spans = mergeSpans([...regexSpans, ...nerSpans]);

      // Build redacted string in a single pass. O(n).
      const redacted = applyRedaction(text, spans, (s) => `[${s.label}]`);

      self.postMessage({ id, ok: true, spans, redacted });
    } else {
      // Image path: Shape Detection API runs in the compositor.
      const bitmap = payload as ImageBitmap;
      const detector = new (self as any).TextDetector();
      const boxes = await detector.detect(bitmap);

      const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
      const ctx = canvas.getContext('2d')!;
      ctx.drawImage(bitmap, 0, 0);
      ctx.fillStyle = '#000';
      for (const b of boxes) {
        const { x, y, width, height } = b.boundingBox;
        ctx.fillRect(x, y, width, height);
      }

      const redactedBitmap = canvas.transferToImageBitmap();
      bitmap.close(); // Free the source bitmap immediately.

      // Transferable: zero-copy handoff to the main thread.
      self.postMessage({ id, ok: true, redactedBitmap }, [redactedBitmap]);
    }
  } catch (err) {
    self.postMessage({ id, ok: false, error: (err as Error).message });
  }
};

Key engineering decisions embedded in this code:

  • env.allowRemoteModels = false prevents a supply-chain attack where a compromised CDN serves a malicious model.
  • dtype: 'q8' halves memory vs FP16 with <1% F1 drop on our eval set.
  • aggregation_strategy: 'simple' merges subword tokens into entity spans inside the Wasm runtime, avoiding a JS-side loop over thousands of tokens.
  • transferToImageBitmap + postMessage(..., [transferable]) avoids a structured-clone copy of the full-resolution bitmap. For a 4K image this saves ~32MB of allocation per redaction.
  • bitmap.close() is mandatory; without it, the source ImageBitmap leaks GPU memory until GC.

4. Performance, Cost & Trade-offs

We benchmarked Rampart on a 2021 MacBook Pro (M1 Pro) and a mid-range Android device (Pixel 6a). Numbers are medians over 1,000 runs.

StageM1 ProPixel 6aNotes
Regex pass (1KB text)0.4ms1.1msPure JS, no Wasm
NER (512 tokens, INT8)38ms142msWasm EP, single thread
NER (512 tokens, INT8, SIMD)22ms89msRequires wasm-simd feature
TextDetector (1080p image)12ms47msNative, compositor process
FaceDetector (1080p image)9ms31msNative
Model cold load340ms1.2sCached after first load

Cost model

The economic argument is stark. A server-side NER endpoint on a GPU instance costs roughly $0.0004 per 1KB document at scale. At 10M documents/day, that is $4,000/day, or ~$1.46M/year, plus egress and storage of the raw PII (which you must encrypt, audit, and eventually delete). Rampart moves that cost to the client: the marginal cost per redaction is zero. The only server cost is serving the ~65MB model, which is cached at the CDN edge and in the browser's Cache API.

Trade-offs

  • Model quality. A 65MB INT8 DistilBERT is not GPT-4. On our eval set it achieves 0.91 F1 vs 0.96 for a large server model. For most form-redaction use cases this is acceptable; for legal discovery it is not.
  • Cold start. The first redaction on a new device pays a 340ms–1.2s model load. Mitigate with <link rel="preload"> and a warm-up inference on idle via requestIdleCallback.
  • Browser support. The Shape Detection API is Chromium-only as of 2024 [2]. Firefox and Safari fall back to a Wasm-based OCR (Tesseract.js) which is 5–10x slower. Feature-detect and degrade gracefully.
  • Memory. Wasm linear memory is not GC'd. A 512-token window with INT8 weights peaks at ~180MB. On low-end mobile this can trigger OOM. We cap concurrency to one inference at a time and reuse the Wasm instance.
  • Security. The model and tokenizer are attack surface. Pin the model hash, verify via Subresource Integrity, and never eval model output. The TextDetector API is sandboxed by the browser, but the rawValue it returns is untrusted input.

5. Actionable Checklist / Summary

When adopting Rampart-style on-device redaction in production:

  • Feature-detect first. Gate the Shape Detection path behind 'TextDetector' in self. Ship a Wasm OCR fallback for Firefox/Safari.
  • Pin the model. Use SRI hashes and env.allowRemoteModels = false. Treat the model as a supply-chain artifact.
  • Run in a Worker. Never block the main thread. Use module workers and Transferable objects for bitmaps.
  • Layer regex before NER. Cheap patterns catch 40%+ of PII at <1ms. Reserve the model for the residual.
  • Chunk with stride. 512-token windows with 64-token overlap. Merge spans with union-find, not naive concatenation.
  • Close your bitmaps. ImageBitmap.close() is not optional. Leaked GPU memory is the #1 production incident in this pattern.
  • Measure F1 on your domain. A generic PII model will miss domain-specific identifiers (medical record numbers, internal employee IDs). Fine-tune or add regex.
  • Warm up on idle. requestIdleCallback(() => getNER()) hides the cold-start cost.
  • Log nothing. The whole point is that raw PII never leaves the device. Do not add telemetry that captures input text.

Rampart is not a silver bullet. It is a deliberate trade: you give up some model accuracy and browser compatibility in exchange for a trust boundary the user can verify, zero marginal cost, and compliance-by-construction. For the majority of client-side redaction use cases, that is the right trade.

References

← Explore More ArticlesShare on X / Twitter →