DEV Community

eimza
eimza

Posted on

Privacy-First Architecture: Building Web Tools That Never See Your Data

#security #privacy #webdev #architecture

In Turkey, legal documents are protected under KVKK (the Turkish equivalent of GDPR). Uploading a court petition to a random web service isn't just risky — it could be illegal.

Here's the architecture pattern we use for building document processing tools that are physically incapable of leaking data.

The Core Principle

If data never leaves the browser, it can never be intercepted, stored, or breached.

This isn't just about promises in a privacy policy. It's about architectural guarantees.

Architecture Diagram 

┌─────────────────────────────────────┐
│           User's Browser            │
│                                     │
│  ┌──────────┐    ┌───────────────┐  │
│  │ File API │───▶│ ArrayBuffer   │  │
│  └──────────┘    └───────┬───────┘  │
│                          │          │
│                  ┌───────▼───────┐  │
│                  │    JSZip      │  │
│                  │  (ZIP Parse)  │  │
│                  └───────┬───────┘  │
│                          │          │
│                  ┌───────▼───────┐  │
│                  │  DOMParser    │  │
│                  │  (XML Parse)  │  │
│                  └───────┬───────┘  │
│                          │          │
│                  ┌───────▼───────┐  │
│                  │  Converter    │  │
│                  │  (XML → MD)   │  │
│                  └───────┬───────┘  │
│                          │          │
│                  ┌───────▼───────┐  │
│                  │ Blob/Download │  │
│                  └───────────────┘  │
│                                     │
│  Network calls: ZERO                │
└─────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Implementation Checklist

1. No fetch() / XMLHttpRequest for user data 

// ❌ NEVER do this with sensitive documents
const res = await fetch('/api/convert', {
    method: 'POST',
    body: formData // Contains the user's legal document!
});

// ✅ Process entirely in-browser
const result = await Udf2Md.convert(file); // Pure JS, no network
Enter fullscreen mode Exit fullscreen mode

2. Use File.arrayBuffer() instead of FileReader 

// Modern, clean API
const buffer = await file.arrayBuffer();
Enter fullscreen mode Exit fullscreen mode

3. Generate downloads with Blob + URL.createObjectURL 

const blob = new Blob([markdown], { type: "text/markdown" });
const url = URL.createObjectURL(blob);
// This URL is local-only, not accessible from network
Enter fullscreen mode Exit fullscreen mode

4. Use navigator.clipboard for copy 

await navigator.clipboard.writeText(result.markdown);
// Clipboard API is local-only
Enter fullscreen mode Exit fullscreen mode

Verification: How Users Can Confirm

Tell users to open DevTools → Network tab. They should see zero requests during document processing. This is the ultimate trust signal.

Trade-offs

Aspect Client-Side Server-Side
Privacy Guaranteed Depends on trust
Speed Limited by device CPU Can use powerful servers
File size limit ~100MB practical Unlimited
Offline support Yes No
Maintenance Simpler (static hosting) Complex

For document conversion tools, client-side wins overwhelmingly.

Our Tools

Both are open source. Both process zero bytes on any server.

Top comments (0)