DEV Community

yanan yu
yanan yu

Posted on

Building a Zero-Server-Cost, 100% Client-Side Utility Toolbox (And Why You Should Stop Uploading API Keys to Random Sites)

Hi DEV community! 👋

As developers, we’ve all been there: You have a massive, unformatted JSON payload from a wonky API, or you need to quickly extract an image from a client's PDF. You Google "JSON Formatter" or "PDF to Image", click the first result, paste your data, and hit format.

But recently, I had a terrifying realization while debugging a production issue. I was about to paste a JSON payload containing live customer emails and active API keys into a random ad-riddled website.

How insane is it that we routinely hand over highly sensitive production data to remote servers just to make a string readable?

I wanted a utility suite that actually respected data privacy. So, I spent a few weekends building Mini-Tools.uk — a 100% offline-capable, client-side only toolbox.

🛠️ The Technical Challenge: Doing Everything in the Browser

My main constraint was strict privacy: absolutely zero backend processing. Every single tool had to run inside the user's DOM.

Here is how I tackled a few of the core features without a server:

1. Secure Password Generation (No Math.random())

When building a password generator, using the standard Math.random() in JavaScript is a security risk because it's not cryptographically secure.
To ensure the passwords generated on the site were actually safe to use, I implemented the Web Crypto API:


javascript
// A snippet of the logic used
const array = new Uint32Array(1);
window.crypto.getRandomValues(array);
// Use the cryptographically secure array[0] for character selection
Enter fullscreen mode Exit fullscreen mode

Top comments (0)