Never ever ever use pixelation as a redaction technique
Go to file
Dan Petro fc383c7af1
Merge pull request #13 from novedevo/patch-1
Fix minor typo/grammar
2022-02-23 10:59:39 -07:00
img Public release 2022-02-15 09:58:52 -07:00
src Merge pull request #2 from n3rada/patch-1 2022-02-18 11:00:24 -07:00
.eslintrc Public release 2022-02-15 09:58:52 -07:00
.gitignore Public release 2022-02-15 09:58:52 -07:00
LICENSE Initial commit 2021-10-18 09:15:40 -07:00 Fix minor typos/grammar 2022-02-23 09:50:04 -08:00
index.css Add background color 2022-02-21 10:56:04 -07:00
index.html Public release 2022-02-15 09:58:52 -07:00
package-lock.json Public release 2022-02-15 09:58:52 -07:00
package.json Public release 2022-02-15 09:58:52 -07:00
secret.png Changed default font to Arial 2022-02-17 09:15:54 -07:00
test.html Changed default font to Arial 2022-02-17 09:15:54 -07:00
tsconfig.json Public release 2022-02-15 09:58:52 -07:00


Shows you why you should never ever ever use pixelation as a redaction technique. For a more complete writeup of how this works, check out my blog post here.

wow such secrets

How to Try it Out

Install the dependencies:

npm install

Then start with

npm start

That's it.

How to Crack Your Own Pixelated Image

This is a bit manual and not at all streamlined. I think you'll see why. If someone feels like taking a shot at making this process more in-app, I'm all ears. What do I look like, an Electron developer? But yea here it is:

  1. Crop your image down to just the pixelated area. No borders, no other text. Replace secret.png with that. I recommend doing it in GiMP.

  2. Make note of the block size (it's just the size of each pixelated block). Replace blockSize in the code with that.

  3. Get the CSS just right. This is the hardest and most time-consuming part. Try entering it into test.html and view it in Chrome. Tweak it until you can replicate some sample text as exactly as possible. Pay particular attention to the word and letter spacing. If it skews, then it'll all mess up. Also the font-weight, or else things will end up too light or dark. I can't emphasize enough how critical this step is, as the whole thing really depends on being able to correctly replicate the redacted characters.

  4. Determine what character set you want to try. It's at the top of preload.ts.

  5. Press the go button and see if it works!