Public release

BishopFox · Feb 15, 2022 · 37eaf06 · 37eaf06 · hoang1985 · Aug 8, 2022
1 parent f9cc441
commit 37eaf06
Show file tree

Hide file tree

Showing 14 changed files with 3,316 additions and 2 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,12 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+*.png
diff --git a/README.md b/README.md
@@ -1,2 +1,31 @@
-# unredacter
-Unredact text that has been redacted using insecure methods
+# Unredacter
+
+Shows you why you should never ever ever use pixelation as a redaction technique.
+
+![wow such secrets](img/wow_such_secrets.gif)
+
+## 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 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!
diff --git a/img/wow_such_secrets.gif b/img/wow_such_secrets.gif
diff --git a/index.css b/index.css
@@ -0,0 +1,3 @@
+.text-label {
+    color: white;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Unredacter</title>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; img-src 'self' data:;"
+    />
+    <meta
+      http-equiv="X-Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'"
+    />
+    <link rel="stylesheet" type="text/css" href="index.css">
+  </head>
+  <body>
+    <button id="start-button">Click to Start</button>
+
+    <br><br>
+    <label class="text-label">Redacted Text:</label>
+    <br>
+    <image id="original-image" src="secret.png"/>
+    <br>
+    <label class="text-label">Current Guess:</label>
+    <br>
+    <image id="current-preview-image" src=""/>
+    <br>
+    <input type="text" id="current-guess">
+    <br>
+    <label class="text-label">Best Guess:</label>
+    <br>
+    <image id="best-preview-image" src=""/>
+    <br>
+    <input type="text" id="best-guess">
+    <br>
+    <label class="text-label">Score (lower is better)</label>
+    <input type="text" id="best-score">
+    <br>
+    <label class="text-label">Offset X</label>
+    <input type="text" id="offset_x">
+    <br>
+    <label class="text-label">Offset Y</label>
+    <input type="text" id="offset_y">
+    <br>
+    <label class="text-label">Good offsets to try</label>
+    <input type="text" id="offsets_to_try">
+    <br>
+
+    <br><br><br>
+    <label class="text-label">Make Your Own Redacted Text:</label>
+    <br>
+    <input type="text" placeholder="your secret phrase here" id="text_to_redact">
+    <br>
+    <label class="text-label">Offset x</label>
+    <input type="text" value="2" id="redacted_offset_x">
+    <br>
+    <label class="text-label">Offset y</label>
+    <input type="text" value="5" id="redacted_offset_y">
+    <br>
+    <button id="redact-button">Redact Me</button>
+    <image id="redacted_image" src=""/>
+    <a id="download_link" href="path_to_file" download="redacted.png">Download</a>
+
+    <!-- You can also require other files to run in this process -->
+    <script src="./dist/renderer.js"></script>
+  </body>
+</html>