HN Explorer

Show HN: Firefox extension to obfuscate web page text (addons.mozilla.org)

235 points by Vinnl ↗ HN
Sometimes you might want to share a screenshot of the website you're on, without revealing the personal data that is visible at that time. With Obfuscate, you can make text unreadable without changing the structure of the web page.

Hit the extension button or press Alt+Shift+O to activate for the current page.

(Note that extensions can't modify the add-on website, so trying it on there won't work.)

Credit for the original idea: https://chaos.social/@maris/108379386421123630

90 comments

[ 2.3 ms ] story [ 136 ms ] thread
Komodai
No chrome?
Vinnl
Not yet, unfortunately, since Chrome broke compatibility with other browsers for new extensions.

(Specifically: it now mandates "Manifest V3" for new extensions, which Firefox is still implementing (it basically has to follow what Chrome is doing, given Chrome's reach). Once Manifest V3 works on more browsers, I should be able to relatively easily upgrade, and then support Chrome as well.)

Edit: oh, I should probably also add that I'm a Mozilla employee, but this is a personal project, and I'd have done the same if I hadn't been.

Raed667
For an extension like this, I don't think you need to change much besides just putting "manifest_version": 3 in your manifest.json

I don't see any breaking changes here.

Vinnl
It's compatibility with other browsers that would be broken; Firefox can't install extensions with "manifest_version": 3 in their manifest.json yet without a flag.
Raed667
Oh yes absolutely.

I wasn't clear enough in my comment, I was suggesting you can make a branch in your project repository for chrome. Make the change only there until Firefox supports MV3.

Doches
This is maybe a bit unrelated, but it's really pretty heartwarming to see things, however small, that are Firefox-only or Firefox-first. Sure, yes, Chrome is the wildly more popular browser (and Webkit-derived browsers are essentially everything that isn't FF), but a thousand tiny cuts like this are how we break out of the browser monoculture.

Having everything be Chrome-first (and, often, Chrome-only) is how we got here in the first place. <3 to the OP for focusing on Firefox first, and putting a pebble on the right side of the scale!

pessimizer
It's sad that firefox reoriented their entire company to eliminate this, their primary advantage.
progbits
Nice idea!

Looks like spaces are preserved, and the bar lengths seem to match the world length. Is that the case? I didn't measure it precisely and didn't check the source code.

If so you might want to add some random noise. Sometimes it might be possible to reconstruct parts of the text just based on the word lengths.

Vinnl
Yep, really all it does is change the font! And blur images that have alt texts, which supposedly can also be reversible. Probably best not to use it for classified government docs :)
jodrellblank
In FireFox people can get a similar effect with F12 -> Style Editor ->

    * {font-family:wingdings !important;}
Or in Chrome, F12 -> Elements -> Styles on the right -> Fight with Chrome's interface.
breakingcups
Surely wingdings are reversible?
amlib
Maybe a font with just tofus would work... like a reverse Noto Sans. Ain't nobody gonna reverse that :)
jodrellblank
I tried googling "black bar font" to find what the extension dev is using without downloading the extension, but gave up when I saw the Google results and realised how unlikely I am to find "font which doesn't need downloading and installing or hosting which renders normal characters as black bars".
Macha
The linked tweet indicates "flow circular" is one such font.

It probably does need installation or hosting though.

csunbird
Windings do have 1:1 mapping between characters and icons, so that would be easily reversible.
bryans
I get that you were trying to be amusing with the Chrome comment, but in case you weren't actually aware, you only need to push the plus icon to insert a new style. It's the exact same number of clicks to accomplish that task in both browsers.
jodrellblank
I was aware because I clicked plus[1] and pressed ctrl-v to put my firefox line in. And it broke because Chrome is "being helpful" by forcing structure in the UI, so it instantly turned into a lot of crossed out lines with yellow warning triangles, and there's there's no visible delete option, no context menu delete, it doesn't respond to the delete key, and Chrome's F12 is just so much more user-hostile than FireFox every time I touch it, like they're kinda forced to have one so people can develop websites I guess, but they'd intensely rather nobody had a good time because that's a potential loophole people could use to remove adverts.

Compare that to FireFox which just has a text box and you can type into it, or delete out of it.

[1] with that delightful UX where it's /invisible/ until you wave the magic cursor around in the right place.

bryans
> with that delightful UX where it's /invisible/ until you wave the magic cursor around in the right place.

There is a button at the top of the editor, to the right of the filter input. The buttons that show up on hover are for inserting the new style at a specific position in the cascade, if needed -- but that's a rarer occurrence, which is why it's not visible by default.

> And it broke because Chrome is "being helpful" by forcing structure in the UI, so it instantly turned into a lot of crossed out lines with yellow warning triangles, and there's there's no visible delete option, no context menu delete, it doesn't respond to the delete key

I agree that one should be able to paste any CSS block or declaration and expect the style editor to parse it. But it's also worth keeping in mind that the only difference in this particular situation is pasting the declaration instead of the surrounding block, and you'd get the results you're after. Chromium's dev tools are definitely not perfect, but I think Firefox's method is much more cumbersome from a developer's perspective.

mkoryak
If someone is going to reconstruct words in your screenshots, then you got problems that aren't going to be solved by any plugins
zeronine
please elaborate
leokennis
Anyone who has the time and means to reconstruct/deduce the words on your obfuscated screenshot based on the length of the blocks that this extension produces, will very likely have way more efficient means to spy on you anyway.
pvg
This isn't really true, random OSINT enthusiasts regularly do this sort of reconstruction on twitter.
tete
I assume that it's probably not meant to rely upon with your life or something. After all what if there missed text in pictures or other subtle things that could be deduced from screenshot that you either don't notice or even know about.

Maybe that's something that should be mentioned in the description though, just in case.

kevincox
Yup. It would be better to just replace the text with randomly sized bars of the same number of lines. You can have fun playing with the algorithm to come up with something that looks vaguely english-like.

And the blur for images isn't great. It may be better to just use a black box there. Or maybe pick a single colour from the image or something like that.

matt_heimer
Agree with the randomizing of word length.

How about also having a choice in obfuscation mode?

  * Government Mode - Solid black bars so it looks like everything has been redacted.
  * UX Placeholder Mode - Lighter bars that are a blend of the font color and background color
  * Lipsum Mode - Replace text with a libsum generator that will truncate to similar size text.
mkoryak
The effect is really neat, but I would never use this for any reason.

I see that there are a ton of people on that Twitter thread who love this. Good for them!

eatbitseveryday
I guess we’ll never learn why you wouldn’t use it. Good for you!
nayuki
This technique is also known as Greeking. https://en.wikipedia.org/wiki/Greeking#In_computing

> The term "greeking" was applied by various WYSIWYG editors of the 1980s, such as ApplixWare and Island Graphics. Greeking referred to the substitution of text with a placeholder gray bar upon moving out of focus.

Vinnl
I wish I'd known that; could have come up with a better name. Fun fact though.
axelthegerman
Not too late to change no? Let's have some fun
Vinnl
Happy to take suggestions!
arthurcolle
Obfuscate is fine. Redact is more to the point though!

edit: Redactify for instant pre-seed angel funding

MrTrvp
I've got Redactfuscate and Obfusdact lol
pdenton
This extension is pretty cool and I already found a bug. It doesn't work for elements whose font-family has been set with a !important flag.

It would be crude to set font-family to "Flow Circular" !important on every element (in the style attribute), but it would probably be much more effective.

Vinnl
Oh, good one! (Also, what sites uses !important, ugh...) I think I have a workaround for that, will take a look after work.
Vinnl
A new release is now building that should fix this!
tekchip
Obfuscation with blur is trivial to reverse these days. Always block out leaving no pixels with which to reconstruct.

https://news.ycombinator.com/item?id=4679801 https://github.com/bishopfox/unredacter

enlyth
The OP's extension doesn't seem to blur things, but actually transform them into solid lines which would be impossible to reverse, the only information that is left is the relative length of the words.
Vinnl
Technically it also blurs images that have an alt text, for good measure, but the main feature is indeed the text transformation. But yeah, primary use case is e.g. sharing with colleagues, not protecting against nation-state actors.
mr_pinnen
Great to see that this extension doesn't require any permissions. Good job!
Vinnl
Oof, you don't want to know the trouble I went through to avoid needing `storage` permissions. Glad to hear that that's appreciated :)
angelaguilera
This is really nice! May I suggest an option to "deobfuscate" certain parts of the web page? For example, after you obfuscate the page with alt+shift+O, then you could click on some parts of the page to de-obfuscate them. Sometimes you want to hide only certain parts of the page while keeping others untouched (page headers/footers, titles, etc.).
Vinnl
Yeah I'd like to have that too. Don't know yet how I'd implement it, but logged here and happy to take Merge Requests: https://gitlab.com/vincenttunru/obfuscate/-/issues/3
mmis1000
Probably by

- locate the text node containing the selected text

- split the text node into 3 segment (the selected one in the middle)

- replace the selected segment with a span that has font style on it

?

I did something like this before to replace part of the text with a ruby tag.

https://codepen.io/mmis1000/pen/gOgKqba?editors=0010

Or probably you can do it the reverse the obfuscate the selected text and make it actually works like a black pen.

Although it will be definitely more complex because selection may cross multi text nodes. But the idea should apply.

Vinnl
Yeah, I was initially thinking block-level elements, but just selected text should be easier.
Vinnl
New release with an MVP implementation is now building! It's the opposite of what you described, but should fulfil roughly the same use case: if you select something and then hit the button, it will obfuscate (roughly) just that part of the page.
KennyBlanken
Being able to replace via regex or similar would be pretty killer for a lot of streamers who want to guarantee personal info or even usernames never appear on-screen in a browser.
dspillett
Another option for this is to use a “redacted” font like https://github.com/christiannaths/redacted-font

I can't find it ATM, but I used to have a bookmarklet that added one of these as a css style on all elements (or removed its edits when run a second time, to revert the page). Shouldn't be too hard to write if I decide I want it again and still can't find the source of the one used back then. It didn't watch for and update dynamic content changes, but was useful for quick “mock-up” screenshots. The only problem was that the character widths won't quite match (or might be massively different from) the font the page is currently using though no doubt there are things that could be done to improve that. It relied on the font being installed locally, but it wouldn't be beyond the wit of man to make it load a web font or include it as a data block in the bookmarklet.

Vinnl
Yeah, a bookmarklet should work pretty well too, although indeed needs the font installed locally or requests going out to another sever. The advantage of the extension in that sense is that it includes the font locally and has a keyboard shortcut.

Someone else also mentioned that font, so I logged that here: https://gitlab.com/vincenttunru/obfuscate/-/issues/2

dylan604
But in the course of prepping screen shots with obfuscated text for use wherever, would the cost of hitting an additional server for a font be that bad? It's not like the whole webpage is not allowed to render because of this post-render user initiated change to specifically mess with the text.
Vinnl
Not that bad, depending on your value system, but I like not sending more requests to e.g. Google's servers. But of course, definitely use the bookmarklet if you prefer that over my extension!
zhfliz
font injection using a remote server is also problematic due to CSP
dspillett
That sort of font is small enough that it could probably be encoded in the bookmarklet¹, and inserted into the target page's styling via a data Uri. Extra steps, but it would remove the need for the font to be locally available otherwise or requested from elsewhere.

[1] I'm not sure want the limits on those are on modern browsers, the length that would work varied quite a bit back in the day. It was small in IE (<2K?) though I'm not sure IE of the time I'm remembering the bookmark referred to previously supported fonts loaded that way anyway.

Vinnl
Yeah good point! If I was starting this now I might've gone the bookmarklet route. Alas, I've got an extension now :)
tyingq
Maybe a little dangerous, though, because laypersons might save/share a pdf of the page and think it's fine.
myfonj
I have quite similar bookrmarklet that actually walks whole DOM and scrambles text nodes and attributes: [1] ([2] for convenient installation)

I've picked 'medium shade (U+2592)' character [3] as visual counterpart, because if felt it has similar "weight" as average glyph. It does not store original values so the only only way to revert it back is to reload page.

[1] https://gist.github.com/myfonj/3bdb6bbacd3b080938716495d8989... [2] https://myfonj.github.io/utils/bookmarklets/dummyze-scramble... [3] https://graphemica.com/%E2%96%92

dontbenebby
Thanks for making this, it's super cool! I sometimes don't ask for help because the act of blacking out a screenshot is too onerous, I will bookmark this!!

For anyone navigating this issue who doesn't like to or doesn't have the authority to change what extensions are installed, at least on MacOS, CMD-shift-4 will allow you to select a subsection of the screen to take a screenshot.

Here's a collage I made by opening several preview windows of PDFs I have saved while doing OSINT, then hitting CMD-shift-4:

https://i.imgur.com/5tudrhv.png

I've been saving the screenshots with the intent of usin OpenCV to parse the images into text (with the highlighted portions bolded using markdown or something -- I called the art project "saccades"[A])

Also, if you want to change the default screenshot location:

defaults write com.apple.screencapture location [tk]

(where [TK] is a file path, minus the brackets, I'm fond of redirecting them to a folder in the home directory so you can make use of the tilde goodness inherent in... nix stuff.)

//[A] "From French saccade, 1. (rare) A sudden jerking movement. 2. A rapid jerky movement of the eye (voluntary or involuntary) from one focus to another." https://en.wiktionary.org/wiki/saccade#English

/ PS: If anyone knows a better image host than Imgur please let me know, I don't want to just upload it into Wikimedia or whatever, since it's not intended to go adjacent to an article. (I have some animal photos I may upload to Wikimedia under some kind of CC license once I sort them.) */

Rygian
The add-on page says: "This add-on is not actively monitored for security by Mozilla. Make sure you trust it before installing."

As things stand today, gaining my trust would require some work on my side (and I'm a professional of IT Security). For the majority of Internet users (who are not expected to understand what 'package-lock.json' file does), this would take a leap of faith instead.

Is there any service out there that could scan an add-on and highlight any known vulnerabilities (like OWASP Dependency Checker)? Could the add-on service on Mozilla side automatically run such kind of scan and add red flags next to the current warning, if vulnerabilities are already identified on the add-on or any of its dependencies?

Vinnl
I think that warnings refers not just to vulnerabilities in dependencies, but also in potentially malicious code in the add-on itself, which is harder to catch with an automated scan.

(Note: this is my interpretation as an add-on developer, not as a Mozilla employee - I'm not involved in addons.mozilla.org.)

[deleted]
(comment deleted)
mfcc64
It doesn't work for arabic text.
jfk13
Or for Chinese, Japanese, Hindi, Greek, Ethiopic, Thai, Korean, etc., etc. ... basically, for any text that uses characters other than the Latin and Cyrillic character sets that the Flow Circular font covers.

(Simple example: try https://www.unicode.org/standard/WhatIsUnicode-more.html and observe the list of language links on the left.)

tabtab
Tna bafsasdf qujalml bmapvnal dx glramsdfa vvalkjli mst!
[deleted]
(comment deleted)
_def
I'm still trying to understand for what someone would want an obfuscated screenshot for, but I found another use case: this way it is convenient to focus on the layouts of a different websites for inspiration!
oefrha
A long time ago I wrote a very simple extension that adds context menu commands for redacting text under selection. Still use it from time to time. Never made it public though.
Vladimof
For when I want to obfuscate just a few things, I use Flameshot (the screenshot app)
seltzered_
This is really neat! A suggestion, consider a user option to obfuscate what matches either a regex string, or more simply configurable options (e.g. obfuscate just numbers, helpful when logging to see bank/credit card stuff at a coffee shop)
Vinnl
Not exactly what you're asking for, but a new release is now building that at least let's you select something and only obfuscate (roughly) that part of the page.
kristianpaul
This could potentially save me some screenshot editing