PauloHFS Segurança Frontend e UI/UX
Checklist de referência para código de interface. Antes de considerar o trabalho pronto, verifique cada regra aplicável ao componente produzido. Regra violada = corrigir ou documentar explicitamente por que não se aplica ao contexto.
Validação de Entrada
- Valide e sanitize TODAS as entradas do usuário no frontend
- Remova ou escape caracteres especiais (
<,>,&,",') que possam injetar código malicioso - Teste o código com dados inválidos para garantir que a validação funcione
- Valide também na camada de serviço (backend) — validação frontend é complementar, não substituta
Proteção CSRF
- Use tokens CSRF únicos em cada requisição ao servidor
- Verifique que o token da requisição corresponde ao esperado no servidor
- Verifique a origem da requisição (headers
Origin/Referer) - Restrinja métodos HTTP que modificam estado (
POST,PUT,DELETE) a requisições de confiança
SSL/TLS
- Use SSL/TLS para criptografar TODAS as comunicações sensíveis
- Force HTTPS em todas as páginas (redirecione HTTP para HTTPS)
- Notifique o usuário se o certificado SSL/TLS não for válido
- Habilite HSTS para garantir conexão HTTPS após a primeira visita
Feedback de Segurança ao Usuário
- Forneça notificações claras sobre ações de segurança (autenticação bem-sucedida, erro de senha)
- Use ícones visuais para indicar se a página é segura (cadeado, HTTPS)
- Use indicadores visuais (barras de progresso, animações) durante ações de segurança em andamento
- Mensagens de erro NÃO vazam informações internas do sistema
Conformidade LGPD/GDPR
- Forneça política de privacidade clara e acessível
- Peça consentimento explícito antes de coletar dados pessoais
- Armazene dados pessoais de acordo com a legislação aplicável
- Informe ao usuário quais dados estão sendo coletados e por quê
Usabilidade e Segurança
- Se o app lida com dados confidenciais, considere bloquear screenshots (quando aplicável)
- Use campos seguros para dados sensíveis (
type="password"com validação de força) - Valide força de senha: tamanho mínimo, combinação de letras, números e símbolos
- Crie banners ou pop-ups sobre phishing para conscientização do usuário
- Informe usuários sobre criptografia SSL e por que é padrão
Autenticação e Autorização no Frontend
- Verifique se o usuário está autenticado e autorizado antes de processar requisições
- Se a autenticação é feita no backend, garanta que as informações de auth estejam disponíveis no frontend (ex: JWT)
- Armazene info do usuário autenticado em sessão ou cookie seguro
- Verifique presença e validade das credenciais ao processar cada requisição
Boas Práticas Adicionais
- Habilite Subresource Integrity (SRI) para verificar integridade de recursos externos
- Modo debug permanece desativado em produção
- Mensagens de erro não expõem configuração ou dados internos
- Use Content-Security-Policy para limitar scripts e recursos inline
- Em SPA (React, Vue, Angular): injete CSP no HTML e configure
INLINE_RUNTIME_CHUNK=false - Use apenas dependências homologadas pelo cliente/projeto