[HN Gopher] Show HN: Firefox extension to obfuscate web page text
___________________________________________________________________
Show HN: Firefox extension to obfuscate web page text
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
Author : Vinnl
Score : 195 points
Date : 2022-06-01 11:23 UTC (11 hours ago)
(HTM) web link (addons.mozilla.org)
(TXT) w3m dump (addons.mozilla.org)
| progbits wrote:
| 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 wrote:
| 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 wrote:
| 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.
| csunbird wrote:
| Windings do have 1:1 mapping between characters and icons,
| so that would be easily reversible.
| breakingcups wrote:
| Surely wingdings are reversible?
| jodrellblank wrote:
| 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 wrote:
| The linked tweet indicates "flow circular" is one such
| font.
|
| It probably does need installation or hosting though.
| Vinnl wrote:
| 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/2ada
| 3be5059...
|
| [2] https://github.com/HYPD/flow-typeface
|
| [3] https://gitlab.com/vincenttunru/obfuscate/-/issues/2
|
| [4] https://github.com/christiannaths/redacted-font
| amlib wrote:
| Maybe a font with just tofus would work... like a reverse
| Noto Sans. Ain't nobody gonna reverse that :)
| bryans wrote:
| 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 wrote:
| 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 wrote:
| > 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.
| Vinnl wrote:
| 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...
| javajosh wrote:
| You could also use a "redacted" font like
| https://fonts.google.com/specimen/Redacted+Script.
| mkoryak wrote:
| 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 wrote:
| please elaborate
| leokennis wrote:
| 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 wrote:
| This isn't really true, random OSINT enthusiasts
| regularly do this sort of reconstruction on twitter.
| kevincox wrote:
| 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 wrote:
| 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.
| blincoln wrote:
| 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.
| Vinnl wrote:
| Good idea, logged here:
| https://gitlab.com/vincenttunru/obfuscate/-/issues/5
| tete wrote:
| 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.
| oefrha wrote:
| 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.
| mkoryak wrote:
| 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 wrote:
| I guess we'll never learn why you wouldn't use it. Good for
| you!
| haberdasher wrote:
| In a similar vein, I made this to redact email addresses in my
| Stripe Dashboard:
| https://chrome.google.com/webstore/detail/ptero-redactyl/ekg...
| pdenton wrote:
| 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 wrote:
| Oh, good one! (Also, what sites uses !important, ugh...) I
| think I have a workaround for that, will take a look after
| work.
| Vinnl wrote:
| A new release is now building that should fix this!
| nayuki wrote:
| 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 wrote:
| I wish I'd known that; could have come up with a better name.
| Fun fact though.
| axelthegerman wrote:
| Not too late to change no? Let's have some fun
| Vinnl wrote:
| Happy to take suggestions!
| arthurcolle wrote:
| Obfuscate is fine. Redact is more to the point though!
|
| edit: Redactify for instant pre-seed angel funding
| asoneth wrote:
| Greek Out?
| user3939382 wrote:
| Opa!queText
| angelaguilera wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Yeah, I was initially thinking block-level elements, but
| just selected text should be easier.
| Vinnl wrote:
| 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 wrote:
| 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.
| mfcc64 wrote:
| It doesn't work for arabic text.
| jfk13 wrote:
| 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.)
| Vinnl wrote:
| 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
| Vinnl wrote:
| Reported upstream now: https://github.com/HYPD/flow-
| typeface/issues/2
| dontbenebby wrote:
| 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.) */
| tabtab wrote:
| Tna bafsasdf qujalml bmapvnal dx glramsdfa vvalkjli mst!
| [deleted]
| tekchip wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Great to see that this extension doesn't require any permissions.
| Good job!
| Vinnl wrote:
| Oof, you don't want to know the trouble I went through to avoid
| needing `storage` permissions. Glad to hear that that's
| appreciated :)
| easrng wrote:
| 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.
| [deleted]
| zouhair wrote:
| Cool, would be greater if it doesn't obfuscate selected text, so
| one can show part of text and not the other.
| Vinnl wrote:
| Someone else suggested that too, logged here:
| https://gitlab.com/vincenttunru/obfuscate/-/issues/4
| seltzered_ wrote:
| 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 wrote:
| 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.
| _def wrote:
| 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!
| Vladimof wrote:
| For when I want to obfuscate just a few things, I use Flameshot
| (the screenshot app)
| jimmySixDOF wrote:
| A good solution for when you can't just paste the standard Lorem
| Ipsum statements everywhere
|
| https://www.lipsum.com/
| [deleted]
| dspillett wrote:
| 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 wrote:
| 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
| zhfliz wrote:
| font injection using a remote server is also problematic due
| to CSP
| dylan604 wrote:
| 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 wrote:
| 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!
| tyingq wrote:
| Maybe a little dangerous, though, because laypersons might
| save/share a pdf of the page and think it's fine.
| myfonj wrote:
| 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
| Komodai wrote:
| No chrome?
| zeronine wrote:
| lol who uses chrome
| mkoryak wrote:
| Lots of people, lol
| ntoskrnl wrote:
| https://gs.statcounter.com/browser-market-share
| Vinnl wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| It's sad that firefox reoriented their entire company to
| eliminate this, their primary advantage.
| kristianpaul wrote:
| This could potentially save me some screenshot editing
| Rygian wrote:
| 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 wrote:
| 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]
| jibbers wrote:
| This reminds me of a Mac app -- Gorp
|
| https://gorp.app
___________________________________________________________________
(page generated 2022-06-01 23:01 UTC)