Show HN: Firefox extension to obfuscate web page text | Hacker News Reader

Show HN: Firefox extension to obfuscate web page text

addons.mozilla.org

235 pointsVinnl86 comments

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

Open articleView on HN

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.

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

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.

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!

font injection using a remote server is also problematic due to CSP

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.

Yeah good point! If I was starting this now I might've gone the bookmarklet route. Alas, I've got an extension now :)

Maybe a little dangerous, though, because laypersons might save/share a pdf of the page and think it's fine.

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

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.

I wish I'd known that; could have come up with a better name. Fun fact though.

Not too late to change no? Let's have some fun

Happy to take suggestions!

Greek Out?

Obfuscate is fine. Redact is more to the point though!

edit: Redactify for instant pre-seed angel funding

I've got Redactfuscate and Obfusdact lol

Opa!queText

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.

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 :)

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.

Yeah, the extension mostly adds an easy button and keyboard shortcut to inject roughly those styles: https://gitlab.com/vincenttunru/obfuscate/-/blob/main/src/ob...

Surely wingdings are reversible?

Maybe a font with just tofus would work... like a reverse Noto Sans. Ain't nobody gonna reverse that :)

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".

The linked tweet indicates "flow circular" is one such font.

It probably does need installation or hosting though.

As the sibling comment mentioned, it's Flow [1] [2], which has Block, Circular and Rounded variants. Elsewhere people also mentioned the Redacted font as a usable alternative [3] [4]. Both are available on Google Fonts.

[1] https://gitlab.com/vincenttunru/obfuscate/-/blob/2ada3be5059...

[2] https://github.com/HYPD/flow-typeface

[3] https://gitlab.com/vincenttunru/obfuscate/-/issues/2

[4] https://github.com/christiannaths/redacted-font

Windings do have 1:1 mapping between characters and icons, so that would be easily reversible.

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.

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.

> 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.

You could also use a "redacted" font like https://fonts.google.com/specimen/Redacted+Script.

If someone is going to reconstruct words in your screenshots, then you got problems that aren't going to be solved by any plugins

please elaborate

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.

This isn't really true, random OSINT enthusiasts regularly do this sort of reconstruction on twitter.

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.

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.

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.

I came to this thread to suggest what you've labelled "Lipsum Mode", because it would preserve the typography style of the page, among other things. I like your other two as well.

Good idea, logged here: https://gitlab.com/vincenttunru/obfuscate/-/issues/5

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.).

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

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.

Yeah, I was initially thinking block-level elements, but just selected text should be easier.

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.

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.

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.

Oh, good one! (Also, what sites uses !important, ugh...) I think I have a workaround for that, will take a look after work.

A new release is now building that should fix this!

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.) */

Great to see that this extension doesn't require any permissions. Good job!

Oof, you don't want to know the trouble I went through to avoid needing `storage` permissions. Glad to hear that that's appreciated :)

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!

It doesn't work for arabic text.

Oh thanks, I have an idea about why that would be the case. Not sure if I'll be able to fix it, but logged it here: https://gitlab.com/vincenttunru/obfuscate/-/issues/6

Reported upstream now: https://github.com/HYPD/flow-typeface/issues/2

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.)

See also the userscript I posted in that thread 4 days ago, https://github.com/easrng/redactor. It redacts your selection though, not the whole page.

In a similar vein, I made this to redact email addresses in my Stripe Dashboard: https://chrome.google.com/webstore/detail/ptero-redactyl/ekg...

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)

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.

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.

Cool, would be greater if it doesn't obfuscate selected text, so one can show part of text and not the other.

Someone else suggested that too, logged here: https://gitlab.com/vincenttunru/obfuscate/-/issues/4

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

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.

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.

This reminds me of a Mac app -- Gorp

https://gorp.app

For when I want to obfuscate just a few things, I use Flameshot (the screenshot app)

This could potentially save me some screenshot editing

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?

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.)

A good solution for when you can't just paste the standard Lorem Ipsum statements everywhere

https://www.lipsum.com/

Tna bafsasdf qujalml bmapvnal dx glramsdfa vvalkjli mst!

No chrome?

lol who uses chrome

Lots of people, lol

https://gs.statcounter.com/browser-market-share

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.

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.

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.

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.

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!

It's sad that firefox reoriented their entire company to eliminate this, their primary advantage.

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!

I guess we’ll never learn why you wouldn’t use it. Good for you!

Reply on news.ycombinator.com