DEV Community

Vipul Singh
Vipul Singh

Posted on

Blurring a card number in a screenshot isn't safe: I built a redactor that uses solid blocks and runs fully in the browser

Screenshots are an easy way to leak data without noticing: an email thread's full address, a card number in a payment app, an API key in a code editor. Most people blur it and move on, but blur and pixelation don't erase the pixels. They average or smear them, and on short structured text like a 16-digit card number that can be reversed. Researchers have shown both deblurring and depixelation attacks.

So I built a redactor that defaults to solid blocks, which overwrite the pixels so there's nothing to reconstruct:

  • Tesseract.js (OCR compiled to WebAssembly) reads the screenshot inside a Web Worker, so the page never freezes
  • Pattern and checksum detectors scan the text for emails, phones, card numbers (Luhn-validated), IBANs (checksum-validated), UPI IDs, API keys, PAN, Aadhaar and SSN
  • Checksums matter: most random 16-digit strings fail Luhn, so you get far fewer false positives than plain regex
  • Each match is an outlined box you can toggle, or flip a whole category, or draw your own rectangle/brush mark for what OCR missed
  • The export is drawn onto a fresh canvas, so no hidden layer and no EXIF/GPS carried over

Everything runs client-side. You can confirm it in the Network tab: no requests carry image data. Free, no signup, no caps.

🔗 https://www.forgeplug.com/tools/smart-redactor

One honest caveat: OCR can miss blurry or tiny text, so give the result a once-over before sharing. Feedback welcome on other detectors worth adding.

Top comments (0)