Note: This article assumes basic knowledge of VSCode. This article was originally posted in the DEV general community.
Here's how to start using John Papa's VSCode extension Cloak to hide .env
secrets, especially helpful when you're livestreaming!
- Search 'Cloak' in VSCode extensions and install it.
- Open up a .env file with your secrets in it. It should look something like this:
- Open up your Command Palette and hit 'Cloak: Hide Secrets'
And there you have it! Your secrets are hidden! You can un-hide them by running the 'Cloak: Show Secrets' command.
Note: If you copy/paste, your secret will be visible in the file you pasted it in.
PS- many thanks to @nickytonline who pointed out the usefulness of this extension!
Discussion (9)
Nice find! I'm weary of an extension like this due to I'm not sure how VScode deals with updating extensions. This seems like a very big attack vector for sniffing secrets out of users' environments. But then again I suppose that's the case for all extensions..
You're right! A good question for VSCode?
Thanks for the shoutout Lucia! Love this extension!
Good tip! Does this also work to hide variables during debug?
What debugging UIs are you thinking of? I think keys would still show up on console.log, for example.
I like to create a variable that contains the username and password for specific taka, but when the debugger stops at a breakpoint, that variable is visible at the left hand side in the Variable View.
So I don't think it would hide the variables in that case-- the extension only hides items in the .env file johnpapa.net/hide-your-secrets-in-...
Source: github.com/johnpapa/vscode-cloak
Oooh nice! I thinking this extension for my last stream.
I was in "I hope I'm not showing any tokens" mode 😆😆😆