DEV Community

yuxuan jiang
yuxuan jiang

Posted on

Stop Uploading Sensitive PDFs: How I Built a Client-Side Redactor with Next.js

We've all been there. You need to send a bank statement to a landlord, or an ID copy to a recruiter. But there's sensitive data on it—your SSN, your account balance, or your home address.

You Google "free pdf editor", upload your file, draw a black box, and download it.

Wait. 🛑

Did you just upload your unredacted tax return to an anonymous server? Do they delete it? Do they analyze it? You have no idea.

As a developer, this frustrated me. The web is powerful enough to handle image processing locally. Why are we still sending files to the cloud just to draw a black rectangle?

So, I built SecureRedact.

The Problem: "Fake" Redaction and Server Uploads

There are two main issues with existing tools:

  1. Server-Side Risks: Most free tools upload your file to process it. I recently wrote a detailed breakdown on why this architecture is obsolete in my analysis of document security standards.
  2. Cosmetic Redaction: Many tools just put a black layer over the text. The underlying data is still there and can be copy-pasted.

The Solution: 100% Client-Side Processing

I wanted to build a tool that lives in the browser but acts like desktop software.

  • Stack: Next.js (for the framework) + Web Workers (for non-blocking processing).
  • Privacy: The file never leaves the user's device. No API calls to a backend storage service.
  • Sanitization: The tool flattens the document into images, ensuring the redacted text is physically destroyed, not just hidden.

If you are interested in the non-technical side of how to properly sanitize documents to prevent identity theft, I published a comprehensive guide here.

How It Works Under the Hood

The core challenge was performance. Rendering large PDFs in the browser can freeze the UI.

To solve this, the application offloads the rendering and image manipulation tasks to a Web Worker. This keeps the main thread free, ensuring that the UI remains responsive even when you are scrubbing a 50MB contract.

You can try the online PDF redaction tool yourself to see how fast the local processing is compared to cloud uploads.

Why Open Source?

Security requires trust. You shouldn't trust a tool that claims to be "secure" if you can't see the code.

By making the project open source, anyone can inspect the network tab and verify that zero requests are sending file data out.

Conclusion

Privacy shouldn't be a premium feature. It should be the default.

I'd love for you to check out SecureRedact and let me know what you think. Does it load fast enough? Is the UI intuitive?

Let's stop uploading our passports to random servers in 2026. 🚀

opensource #privacy #webperf #react

Top comments (0)