Stop Leaking PII! Local Data Masking with Transformers.js and WASM

A developer demonstrates how to build a client-side 'Privacy Shield' using Transformers.js and WebAssembly to mask personally identifiable information (PII) directly in the browser before data reaches cloud APIs. The approach leverages Named Entity Recognition (NER) with a BERT-based model to detect and redact names, locations, and organizations, ensuring compliance with regulations like GDPR and HIPAA while maintaining near-native performance.

In an era where data privacy is no longer a "nice-to-have" but a legal mandate looking at you, GDPR and HIPAA , sending raw user data to the cloud is like playing with fire. If you are building health-tech or fintech apps, the risk of exposing Personally Identifiable Information PII is a constant headache. But what if the data never leaves the user's browser in its raw form? Enter Edge AI and Privacy-preserving AI . By leveraging Transformers.js and WebAssembly WASM , we can perform complex Named Entity Recognition NER to de-identify sensitive information directly on the client side. In this tutorial, we’ll build a "Privacy Shield" that detects and masks names, locations, and health identifiers before they ever hit your API. The traditional approach involves sending raw text to a server-side LLM or NLP service. Our approach intercepts the data at the "Edge" the browser . php graph TD A User Inputs Sensitive Health Data -- B{Browser-side Privacy Shield} B -- C Transformers.js / WASM C -- D NER Model Analysis D -- E Data Masking / Redaction E -- F Clean Data F -- G Cloud Storage / Analytics G -.- H Compliance & Security ✅ style B fill: f9f,stroke: 333,stroke-width:2px style C fill: bbf,stroke: 333,stroke-width:2px By using WebAssembly , we get near-native performance for running BERT-based models in the browser, ensuring the UI remains snappy while keeping the data 100% local. To follow along, you'll need: First, let's install the library: npm install @xenova/transformers Now, let's create our PrivacyShield service. We will use a lightweight NER model like Xenova/bert-base-NER that has been optimized for the web. js // src/services/privacyShield.ts import { pipeline, env } from '@xenova/transformers'; // Optimization for browser environment env.allowLocalModels = false; env.useBrowserCache = true; export class PrivacyShield { private classifier: any = null; async init { // Initialize the Token Classification pipeline NER this.classifier = await pipeline 'token-classification', 'Xenova/bert-base-NER' ; console.log "🚀 Privacy Engine Ready " ; } async maskPII text: string : Promise<string { if this.classifier await this.init ; // Perform Named Entity Recognition const output = await this.classifier text ; // Sort entities by index in reverse to prevent string offset issues const entities = output.sort a: any, b: any = b.start - a.start ; let maskedText = text; for const entity of entities { // Only mask sensitive labels: PER Person , LOC Location , ORG Organization if 'PER', 'LOC', 'ORG' .includes entity.entity { const mask = ${entity.entity} ; maskedText = maskedText.slice 0, entity.start + mask + maskedText.slice entity.end ; } } return maskedText; } } Imagine a user typing their symptoms: "My name is Alice Smith, and I've been feeling dizzy since I visited the clinic in New York." We need to mask "Alice Smith" and "New York" before syncing. js // src/main.ts import { PrivacyShield } from './services/privacyShield'; const shield = new PrivacyShield ; const rawInput = "Patient: John Doe. Location: London. Symptoms: Severe headache."; async function handleDataUpload data: string { console.log "🔒 Original:", data ; // De-identify on the client side const cleanData = await shield.maskPII data ; console.log "🛡️ Masked:", cleanData ; // Output: Patient: PER . Location: LOC . Symptoms: Severe headache. // Now it's safe to upload to your cloud await uploadToCloud cleanData ; } handleDataUpload rawInput ; You might wonder, "Why not just use Regex?" Regex is great for patterns like emails or SSNs , but it fails miserably at detecting names or locations in natural language. By using Transformers.js with WebAssembly , we run a real deep-learning model. WASM allows the browser to execute binary code at high speeds, making it possible to run a 100MB+ BERT model in milliseconds after the initial load. For more advanced patterns on handling large-scale Edge AI deployments or building production-ready de-identification pipelines, I highly recommend checking out the deep dives over at wellally.tech/blog . They cover great architectural blueprints for "Privacy by Design" that go beyond just the browser. distilbert or tiny-bert versions to keep the initial download under 20MB. PrivacyShield in a Building "Privacy First" isn't just about compliance; it's about building trust with your users. By implementing Edge AI de-identification , you eliminate the risk of PII leakage before the data even touches your infrastructure. Summary of benefits: Are you using AI at the edge yet? If you found this helpful, drop a comment below or share your experience with Transformers.js Happy coding 💻🔥 For more production-ready examples of Edge AI and data security, visit the official blog at wellally.tech/blog.