Marcus Paulo M Dias

Posted on May 30

O fim do vazamento de secrets: protegendo seus arquivos .env de forma definitiva

O pesadelo do compartilhamento de tela

Você já viveu isso (ou tem medo de viver): chamada de vídeo com dezenas de pessoas, demonstrando uma feature nova ou depurando um hot-reload ao vivo. Num momento de distração, você troca para a aba errada — e por uma fração de segundo suas chaves da Stripe, credenciais do banco de produção e segredos da AWS aparecem em texto puro na frente de todo mundo.

Esse "flash" momentâneo é o pesadelo de qualquer dev. E quem usa extensões de máscara tradicionais conhece bem a ansiedade que sobra: a maioria delas age de forma reativa, aplicando "decorações" por cima do texto depois que ele já foi renderizado.

A Protect My Env ataca o problema pela raiz — mudando a arquitetura, não o curativo.

O fim do "flash" antes da máscara carregar

O diferencial crítico é a abordagem proativa.

Ferramentas comuns tentam mascarar o texto dentro de um editor padrão. O resultado é o vazamento do primeiro frame — o famoso Zero-Frame Flash. A Protect My Env implementa um CustomTextEditorProvider: em vez de decorar o editor de texto, ela o substitui por um Secure Editor baseado em Webview.

Na prática, a máscara é aplicada à lógica de renderização antes de a interface ser desenhada na tela.

The custom editor opens .env files in a table view where secrets are masked before any rendering occurs — eliminating the "decoration flash" you get with text-editor overlays.

O conteúdo é interceptado e apresentado numa tabela segura. O texto puro nunca chega a tocar a camada de exibição do editor padrão. Durante um live coding ou a gravação de um tutorial, não existe frame residual exibindo segredo nenhum.

Seus segredos não saem da sua máquina (zero telemetria)

Qualquer ferramenta que manipula variáveis de ambiente merece desconfiança — e isso é saudável. A Protect My Env foi desenhada sob privacidade absoluta: todo o processamento e exibição roda localmente, na sua instância do VS Code.

✅ Zero data collection — nenhuma variável, chave ou valor é registrado, armazenado ou transmitido.
✅ No remote calls — funciona 100% offline. Sem telemetria, sem analytics, sem chamadas a servidores externos.
✅ Total privacy — seus segredos ficam exclusivamente na sua máquina, no escopo local do editor.

E como é um projeto open source (MIT), você não precisa confiar na minha palavra: o código está aberto, com CI, análise estática via CodeQL, OpenSSF Scorecard e cobertura de testes no Codecov. Transparência é parte do produto.

Recursos principais

Recurso	O que faz
🔒 Secure Editor	Abre o `.env` já mascarado por padrão — sem flash de texto puro
👁️ Per-key Reveal	Revela ou oculta valores individuais com ícones de ação na linha
🌐 Reveal All / Hide All	Alterna todos os valores mascarados pelo cabeçalho do editor
🔍 Search & Sort	Filtra por chave ou comentário e ordena sem mexer na ordem do arquivo
🎭 Dois modos de máscara	`all` mascara tudo; `pattern` mascara só o que casa com glob
💬 Comment Protection	Opcionalmente mascara comentários de linha inteira e inline
✏️ Edição inline	Edita valores direto na visualização segura
📝 Open as Text	Volta para o editor padrão do VS Code, sem overlays de máscara

Máscaras inteligentes: ocultando só o que importa

Segurança não precisa custar fluidez. O Obfuscation Mode permite ocultar tudo ou usar padrões glob para mascarar apenas o que é sensível — esconder chaves terminadas em _SECRET ou _KEY, por exemplo, e manter visíveis nomes de provedores ou chaves públicas.

Bônus de produtividade: você consegue pesquisar e ordenar as variáveis na tabela sem alterar a ordem original das linhas no arquivo .env físico. DX puro.

Os principais parâmetros de controle no seu settings.json:

Configuração	Tipo	Default	Descrição
`protectMyEnv.obfuscationMode`	`string`	`"all"`	`"all"` mascara tudo; `"pattern"` usa padrões glob.
`protectMyEnv.patterns`	`string[]`	ver abaixo	Padrões glob aplicados no modo `pattern` (case-insensitive).
`protectMyEnv.rules`	`string[]`	`[]`	Chaves exatas sempre mascaradas, independente do modo.
`protectMyEnv.maskCharacter`	`string`	`"•"`	Caractere usado na máscara.
`protectMyEnv.maskLength`	`number`	`8`	Comprimento da máscara; use `0` para espelhar o tamanho real.
`protectMyEnv.protectComments`	`boolean`	`false`	Quando ativo, oculta também os comentários do arquivo.

Um exemplo de configuração:

{
  "protectMyEnv.obfuscationMode": "pattern",
  "protectMyEnv.patterns": ["*_SECRET", "*_KEY", "*_PASSWORD", "*_TOKEN"],
  "protectMyEnv.rules": ["DATABASE_URL"],
  "protectMyEnv.maskCharacter": "•",
  "protectMyEnv.maskLength": 0,
  "protectMyEnv.protectComments": true
}

O detalhe do maskLength: 0 é especialmente útil: ele mascara os caracteres mas revela o comprimento do segredo. Assim você valida visualmente se uma chave está completa sem nunca expor o conteúdo. (O padrão é 8, comprimento fixo.)

Privacidade visual ≠ isolamento de contexto para IA

Aqui vale uma honestidade técnica que poucos têm: privacidade visual não é sandbox de sistema.

A Protect My Env é uma barreira visual robusta, feita para proteger sua tela contra olhos humanos (e câmeras). Mas o arquivo .env no disco continua em repouso (at rest) como texto puro — uma escolha de design para garantir compatibilidade com compiladores, runtimes e ferramentas de build.

Consequência: agentes de IA como GitHub Copilot ou Cursor ainda têm acesso ao conteúdo do arquivo. A ferramenta protege o que você mostra, não o que o seu sistema lê. Ela foi feita exatamente para um problema: evitar a exposição acidental em screen sharing, gravações, live coding e pair programming. Saber dessa fronteira é parte de usar a ferramenta com responsabilidade.

Como instalar

Abra o VS Code e pressione Ctrl+Shift+X (ou Cmd+Shift+X no macOS).
Busque por Protect My Env.
Clique em Install.

Ou direto pelo Marketplace. O código está no GitHub — requer Node.js ≥ 18 e VS Code ≥ 1.75 para builds locais.

Um novo padrão para o seu ambiente

A Protect My Env transforma o .env — de vulnerabilidade latente — em uma interface gerenciável, organizada e profissional. Ao eliminar o flash de renderização e oferecer controle granular via Secure Editor, ela tira o estresse das apresentações técnicas e deixa o foco onde ele deve estar: no código.

Pequenos ajustes no workflow de segurança são exatamente o que separam um ambiente profissional de um desastre iminente.

Na sua próxima reunião com tela compartilhada, você teria certeza de que seus segredos estão realmente ocultos desde o primeiro segundo?

Se este artigo te poupou de um susto futuro, deixa um 💜, dá uma ⭐ no repositório e compartilha com aquele colega que vive fazendo live coding.

DEV Community