Mask/blur text in a document

[motdotla]

I would like to add secret masking to our Dotenv official extension. [1]

Scenario: For example, take a .env file like this opened in Code:

S3_KEY=secret_12345
STRIPE_KEY=prd_87643

If a user accidentally opens up that file while someone is watching (it might be on a screenshare or a screen recording) they've now put themselves and/or their organization at risk. They have to rotate those keys immediately to be safe.

Solution: I'd like to add a masking/blur feature, so that when they open their .env file anyone watching would not see the values. Instead, it would look something like this:

S3_KEY=************
STRIPE_KEY=************

When the user hovers over the masked/blurred value only then will the value be displayed.

Question: Is there a mechanism in VSCode extensions methods to accomplish this?

[1] https://marketplace.visualstudio.com/items?itemName=dotenv.dotenv-vscode&ssr=false#overview

[r3m0t]

You can set the color of the text to equal the backgroundColor using https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions so it will appear as a solid block. You could also look at using opacity .

You can add an action above the first line of the .env to uncensor using https://code.visualstudio.com/api/references/vscode-api#CodeLensProvider%3CT%3E .

It might be possible purely with syntax highlighting or semantic tokens highlighting but I'm not familiar with that.

[motdotla]

Thank you, these are great suggestions. I'll start there and report back.

[motdotla]

Thanks again. This is starting to come together.

[motdotla]

One minor issue. It takes the decorations a split second to render. Look at this video that I've slowed down to 10% time to show the split second rendering.

flash-of-secrets.mp4

Is there a method to apply decorations BEFORE a file is opened? I didn't see one.

[r3m0t]

I didn't think of that. VS Code is designed to be responsive regardless of how inefficient any extension might be, therefore it is probably not possible to fix this with this API.

You could look at registering a custom editor instead of letting the normal text editor open. https://code.visualstudio.com/api/extension-guides/custom-editors

Or have a look at syntax highlighting as I mentioned before.

[motdotla]

Thank you. This turned out well. I combined both - to eliminate the flash and still maintain the blacked-out 'redacted' look.

I wish the VSCode team would implement backgroundColor formatting for semantic tokens in textMate themes. Code would be much simpler.