2
Alexh
3 min de leitura ·

Pitch: Como construí o CriptoVéu: Criptografia 100% client-side com React, Argon2id em WASM e Web Workers

Fala, pessoal!

Quero compartilhar com vocês o CriptoVéu, uma aplicação web pública e open source que desenvolvi para proteger arquivos, mensagens, QR Codes, links e notas diretamente no navegador, 100% client-side — ou seja, sem upload de arquivos ou senhas para nenhum servidor.

🌐 Site em produção: https://www.criptoveu.com/
diagnostico_navegador
📦 Repositório: https://github.com/Alexh0102/Projeto_Criptoveu

💡 Por que construir algo 100% Client-Side?

Grande parte das ferramentas web que prometem proteger arquivos ou criar notas cifradas acabam enviando dados para um backend centralizado.

A proposta do CriptoVéu foi criar um ambiente em que o processamento pesado de criptografia e derivação de chaves ocorra exclusivamente no dispositivo do usuário. Se o servidor sumir, a aplicação continua operando offline como PWA.

🛠️ A Arquitetura Técnica

Para garantir desempenho sem travar a interface do navegador, estruturei a aplicação com a seguinte stack:

  • Interface & Build: React 18, TypeScript, Vite 7 e Tailwind CSS.
  • Criptografia Base: Web Crypto API nativa do navegador usando AES-256-GCM para confidencialidade e autenticação de dados.
  • KDF (Derivação de Chaves): Argon2id v1.3 compilado em WebAssembly (via hash-wasm).
  • Web Workers Dedicados: A derivação do Argon2id (que consome entre 64 MB e 512 MB de RAM) e o cálculo de integridade SHA-256 rodam em Workers separados, evitando qualquer lag na thread principal da UI.
  • Processamento de Arquivos Grandes: Criptografia em blocos de até 2 MB com IVs exclusivos por registro e um manifesto autenticado e cifrado no final.
    criptografia_de_arquivos
    criptografia_de_arquivos

🧰 Recursos Implementados

  • Criptografia de Arquivos (V4 e V5): Proteção local com suporte opcional a proteção dupla (Senha + Arquivo-Chave).
  • VéuNotes: Cofre portátil local (.criptoveu-note) protegido por Argon2id (128 MB RAM), com busca local pós-desbloqueio e auto-lock por inatividade.
  • Esteganografia: Ocultação de mensagens cifradas nos canais RGB de imagens PNG usando técnica LSB.
  • Links e QR Codes Protegidos: Payloads cifrados serializados diretamente no hash da URL (#), garantindo que os dados nunca sejam transmitidos em requisições HTTP tradicionais ao servidor.
  • Diagnóstico do Navegador: Validação local de HTTPS, Web Crypto, WebAssembly, Workers e recomendação do perfil de memória ideal para o dispositivo.
    estenografia

🛡️ Hardening e Modelo de Ameaça

A aplicação conta com uma camada rigorosa de cabeçalhos de segurança (configurados via Vercel)

  • Content Security Policy (CSP) restritiva com política de trusted-types para Workers.
  • Isolamento de contexto via COOP (same-origin) e COEP (require-corp).
  • Nenhuma persistência de senhas ou uso de telemetria.

⚠️ Nota de Transparência: Nenhuma solução web client-side é "100% imune" A segurança depende da integridade do JavaScript servido, da entropia da senha escolhida e da segurança do próprio dispositivo do usuário. O projeto busca aplicar primitivas sólidas e modernas para minimizar superfícies de ataque.

💬 Quero o feedback de vocês!

Como o projeto é totalmente open source (MIT), adoraria ouvir a opinião e as críticas técnicas da comunidade:

  • O que acharam da estratégia de blocos e manifesto de integridade para arquivos?
  • Têm sugestões de melhoria para os headers ou para a execução dos Web Workers?

Fiquem à vontade para testar, revisar o código ou abrir issues no GitHub!

Carregando publicação patrocinada...