Ferramenta de navegador · Desenvolvimento

Devkit

Site com sete utilitários para desenvolvedores, como formatador de JSON, conversão CSV e JSON e decodificador de JWT, executados no navegador sem envio de dados, em três idiomas.

Papel: Produto próprio: concepção, arquitetura e desenvolvimento
Organização e período: Julho de 2026
Plataformas: Web (desktop e celular)

Página inicial do Devkit em tema escuro, com os cartões das sete ferramentas e espaços reservados para anúncios na lateral. — Página inicial, outubro de 2026

01 / Contexto

História e problema

Para quem: Desenvolvedores e estudantes que precisam formatar, converter ou inspecionar dados rapidamente durante o trabalho.
Problema: Tarefas como validar JSON, converter CSV ou ler o conteúdo de um token costumam ser feitas em sites que recebem o texto colado no servidor. Para dados de trabalho, isso é um risco desnecessário. O Devkit foi pensado como irmão técnico do Presto PDF: tudo roda no navegador.
Restrições: Sem backend e sem bibliotecas externas de processamento: os motores de conversão são próprios. A prévia de Markdown usa innerHTML, o que exige tratamento cuidadoso de entrada para não abrir espaço a XSS.

19/07/2026
Especificação e arquitetura: sete ferramentas, três idiomas, visual de editor de código.
28/07/2026
Versão v3 com auditoria: correção de XSS na prévia de Markdown, cabeçalhos de segurança, revisão de acentuação e animações com respeito a movimento reduzido.

02 / Papel

Minha responsabilidade

Liderança e direção

Defini o escopo da primeira versão (sete ferramentas) e o princípio de processamento local, alinhado ao Presto PDF.
Estabeleci os limites declarados na interface, como a decodificação de JWT sem verificação de assinatura.

Execução técnica direta

Estruturei o gerador estático que produz 24 páginas (início e sete ferramentas em português, inglês e espanhol), com slugs localizados, hreflang e JSON-LD do tipo SoftwareApplication.
Implementei motores próprios: parser de CSV com aspas e escape, conversão CSV e JSON com inferência de números e booleanos, Base64 seguro para UTF-8, parser compacto de Markdown, decodificação de JWT e realce de JSON.
Corrigi uma falha de XSS na prévia de Markdown com escape de aspas e validação de esquema de URL, e configurei CSP e demais cabeçalhos de segurança.

03 / Arquitetura

Arquitetura documentada

Site estático sem backend de processamento e sem dependências de terceiros para as ferramentas. Cada página é gerada em build com o exemplo inicial, FAQ e dados estruturados. No navegador, um script único implementa as sete ferramentas; o texto colado é processado em memória e nunca é enviado. A detecção de país na borda da Cloudflare, usada para idioma e fuso, é a única função de servidor.

Arquitetura do Devkit

Build
- Gerador estático em Node
Site estático
- 24 páginas HTML
- Cabeçalhos _headers
Navegador
- Ferramentas em JavaScript
- Detecção de idioma
Motores locais
- JSON e CSV
- Base64 e URL
- Markdown e JWT

Conexões

O build gera as páginas por idioma e por ferramenta.
Cada página carrega o script da aplicação, sem bibliotecas externas.
O texto colado é processado pelos motores locais, sem requisições de rede.

Camadas e tecnologias

Geração estática: Um gerador estático em Node produz português na raiz, /en/ e /es/, com slugs localizados (por exemplo, formatador-json, json-formatter, formateador-json), FAQ, JSON-LD SoftwareApplication, sitemap e robots.
Ferramentas: Formatador de JSON (formatar, validar com posição do erro, minificar, realce), CSV para JSON e JSON para CSV, Base64 com UTF-8, Markdown para HTML com prévia ao vivo, decodificador de JWT com datas exp e iat legíveis, URL encode e decode e conversor de timestamp Unix em tempo real.
Segurança: Escape de HTML incluindo aspas, função urlSegura que aceita só http, https, mailto, tel, caminhos relativos e data de imagem; links gerados com rel noopener noreferrer nofollow. CSP com object-src 'none' e frame-ancestors 'none', HSTS, nosniff, X-Frame-Options, Referrer-Policy, Permissions-Policy, COOP e CORP.
Implantação: Cloudflare Pages com saída em dist e uma Pages Function para detecção de país.

04 / Decisões

Decisões técnicas e compromissos

Motores próprios em vez de bibliotecas

Problema: Ferramentas pequenas com bibliotecas externas aumentam o peso da página e a superfície de dependências a manter.
Decisão: Escrever parsers compactos para CSV, Markdown, JWT e realce de JSON, usando APIs nativas do navegador onde possível.
Motivo: Mantém as páginas leves, a CSP restrita a 'self' para scripts da aplicação e o comportamento sob controle direto.
Compromisso: O parser de Markdown cobre o essencial (títulos, listas, ênfase, código, links e imagens) e não cobre tabelas nem HTML embutido.

Não aceitar HTML embutido na prévia de Markdown

Problema: A auditoria encontrou duas brechas na prévia: o escape não tratava aspas e não havia validação do esquema das URLs, o que permitia execução de script na renderização.
Decisão: Escapar aspas, validar esquemas por lista de permissão, transformar links inválidos em texto simples e manter a prévia sem suporte a HTML embutido.
Motivo: Aceitar HTML embutido reabriria a mesma classe de falha que foi corrigida.
Compromisso: Menos recursos de Markdown do que uma biblioteca completa.
Aprendizado: As correções foram verificadas no navegador com quatro entradas de teste: nenhum script executou e um link legítimo foi preservado.

Decodificar JWT sem prometer verificação

Problema: Uma ferramenta que mostra o conteúdo de um token pode ser confundida com uma validação de autenticidade.
Decisão: Decodificar cabeçalho e payload para leitura, exibir o status com o aviso de assinatura não verificada e recomendar não colar tokens de produção.
Motivo: Verificar a assinatura exigiria a chave, que não deve ser exposta em uma ferramenta de navegador.
Compromisso: A ferramenta serve para inspeção, não para confirmar se um token é válido.

05 / Funcionamento

Fluxo e modelo

Formatar um JSON (dados de exemplo)

A página abre com um objeto JSON de exemplo em uma linha.
Ao formatar, o texto é interpretado com JSON.parse e reescrito com indentação.
A saída recebe realce de sintaxe e o status mostra JSON válido ou a mensagem de erro.
O usuário pode copiar, baixar ou minificar o resultado; nada é enviado pela rede.

06 / Evidências

Resultados e próximos passos

Resultados e evidências

Julho de 2026: 24 páginas geradas sem falhas na verificação estrutural automatizada.
Julho de 2026: correção de XSS verificada no navegador com quatro entradas de teste, sem execução de script, segundo a auditoria registrada no projeto.
Julho de 2026: monitoramento de rede não registrou requisições com o texto colado pelo usuário.

Próximos passos

O parser de Markdown não cobre tabelas, citações aninhadas nem HTML embutido, por decisão de segurança.
O decodificador de JWT não verifica assinatura.
A CSP mantém 'unsafe-inline' em scripts para acomodar os espaços de anúncio do layout.
Próximo passo: Base64 de arquivos, diff de JSON e texto, conversão XML e YAML, hash, gerador de UUID, testador de regex e conversor de cores.

07 / Telas

Galeria

Formatador de JSON, julho de 2026
Página inicial em celular, julho de 2026

Próximo estudo de caso

EasySPA

Todos os projetos