I love writing on Medium, but I have to admit; I spend more time editing my posts than I do writing them. There is a lot that goes into them. The content is easy. The artifacts and screenshots are hard. One of the biggest concerns I have when I see articles that contain sensitive information like API keys or domain verifications strings is that they’re doing more harm than good. Authors doing this are inadvertently setting a precedent that posting things like that is ok, when in reality we should be working hard to move past that.
Do not post sensitive or personal information when writing
I got in the habit of altering all my images before posting my articles. When I am on a website, such as DigitalOcean like below, you never see my actual page. I use a fun Developer Tools > Console hack to sanitize the page before I grab my screenshots.
Let’s take a look at how it’s done.
Obscuring Webpages
When you visit a webpage, there is a lot of sensitive information on it. Things like usernames, email addresses, project names, domains, etc. The list goes on and on. To help protect a little bit of your privacy, and sometimes your dignity depending on what you’re sharing, we have to find an easy way to change what is on the screen.
First, let’s look at an example webpage.
Notice on the left side of the page, where it reads the Project name as mike.mackintosh. This project name may sometimes be sensitive like a code word or a classification that you don’t want others to see.
What we will do next is open up Developer Tools (on macOS Chrome, I use Cmd+Option + i which brings up the console.
The code I used is as follows:
This will find all occurrences of mike.mackintosh and replace them with obscured-named no matter what level of the DOM tree that string exists.
The result looks like the following:
The next thing I do is use Cmd+Shift+4 then hit Space and select my browser window so I can get the nice shadowed window. It looks great on Medium!
Whoa, how awesome is that?
Taking It Further
This approach is super powerful, and extremely quick. If you write a lot of articles like I do, you can either make a Chrome Extension to automatically do this for you, or you can change that little code snippet around just a bit.
Below, we use a mapping of original words to their replaced words.
This approach moves all your changes into one step.
Conclusion
Think twice before you post. Using the steps above, you can easily hide any sensitive or personal information when you’re sharing. Don’t make the mistake and publish any sensitive information publicly.
Member discussion