8 ms·
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 https://chaos.social/@maris/108379386421123630
- tabtab 4y agoTna bafsasdf qujalml bmapvnal dx glramsdfa vvalkjli mst!
- deleted 4y ago[deleted]
- Komodai 4y agoNo chrome?
- zeronine 4y agolol who uses chrome
- Vinnl 4y agoNot 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 4y agoFor 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 4y agoIt'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 4y agoOh 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 4y agoThis 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 4y agoIt's sad that firefox reoriented their entire company to eliminate this, their primary advantage.
- progbits 4y agoNice 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 4y agoYep, 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 4y agoIn 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 4y agoWindings do have 1:1 mapping between characters and icons, so that would be easily reversible.
- Vinnl 4y agoYeah, the extension mostly adds an easy button and keyboard shortcut to inject roughly those styles: https://gitlab.com/vincenttunru/obfuscate/-/blob/main/src/obfuscate.css https://gitlab.com/vincenttunru/obfuscate/-/blob/main/src/ob...
- breakingcups 4y agoSurely wingdings are reversible?
- amlib 4y agoMaybe a font with just tofus would work... like a reverse Noto Sans. Ain't nobody gonna reverse that :)
- mkoryak 4y agoThe 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 4y agoI guess we’ll never learn why you wouldn’t use it. Good for you!
- nayuki 4y agoThis technique is also known as Greeking. https://en.wikipedia.org/wiki/Greeking#In_computing 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 4y agoI wish I'd known that; could have come up with a better name. Fun fact though.
- axelthegerman 4y agoNot too late to change no? Let's have some fun
- Vinnl 4y agoHappy to take suggestions!
- asoneth 4y agoGreek Out?
- arthurcolle 4y agoObfuscate is fine. Redact is more to the point though! edit: Redactify for instant pre-seed angel funding
- MrTrvp 4y agoI've got Redactfuscate and Obfusdact lol
- user3939382 4y agoOpa!queText
- pdenton 4y agoThis 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.
- tekchip 4y agoObfuscation 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://news.ycombinator.com/item?id=4679801 https://github.com/bishopfox/unredacter https://github.com/bishopfox/unredacter
- enlyth 4y agoThe 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 4y agoTechnically 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 4y agoGreat to see that this extension doesn't require any permissions. Good job!
- Vinnl 4y agoOof, you don't want to know the trouble I went through to avoid needing `storage` permissions. Glad to hear that that's appreciated :)
- angelaguilera 4y agoThis 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 4y agoYeah 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 https://gitlab.com/vincenttunru/obfuscate/-/issues/3
- mmis1000 4y agoProbably 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 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 4y agoYeah, I was initially thinking block-level elements, but just selected text should be easier.
- Vinnl 4y agoNew 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.
- jibbers 4y agoThis reminds me of a Mac app -- Gorp https://gorp.app https://gorp.app
- zouhair 4y agoCool, would be greater if it doesn't obfuscate selected text, so one can show part of text and not the other.
- Vinnl 4y agoSomeone else suggested that too, logged here: https://gitlab.com/vincenttunru/obfuscate/-/issues/4 https://gitlab.com/vincenttunru/obfuscate/-/issues/4
- dspillett 4y agoAnother option for this is to use a “redacted” font like https://github.com/christiannaths/redacted-font 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 4y agoYeah, 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 https://gitlab.com/vincenttunru/obfuscate/-/issues/2
- dylan604 4y agoBut 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 4y agoNot 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!
- 4y ago
- dontbenebby 4y agoThanks 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 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 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.) */
- easrng 4y agoSee also the userscript I posted in that thread 4 days ago, https://github.com/easrng/redactor https://github.com/easrng/redactor. It redacts your selection though, not the whole page.
- deleted 4y ago[deleted]
- jimmySixDOF 4y agoA good solution for when you can't just paste the standard Lorem Ipsum statements everywhere https://www.lipsum.com/ https://www.lipsum.com/
- deleted 4y ago[deleted]
- Rygian 4y agoThe 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 4y agoI 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 4y ago[deleted]
- mfcc64 4y agoIt doesn't work for arabic text.
- Vinnl 4y agoOh 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 https://gitlab.com/vincenttunru/obfuscate/-/issues/6
- Vinnl 4y agoReported upstream now: https://github.com/HYPD/flow-typeface/issues/2 https://github.com/HYPD/flow-typeface/issues/2
- jfk13 4y agoOr 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 https://www.unicode.org/standard/WhatIsUnicode-more.html and observe the list of language links on the left.)
- haberdasher 4y agoIn a similar vein, I made this to redact email addresses in my Stripe Dashboard: https://chrome.google.com/webstore/detail/ptero-redactyl/ekgehlehbaoclcoobdbepfjfohncgpmp https://chrome.google.com/webstore/detail/ptero-redactyl/ekg...
- _def 4y agoI'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 4y agoA 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 4y agoFor when I want to obfuscate just a few things, I use Flameshot (the screenshot app)
- seltzered_ 4y agoThis 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 4y agoNot 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 4y agoThis could potentially save me some screenshot editing