# Frontend Security

> Checklist de segurança frontend e UI/UX. Use ao criar ou modificar componentes de interface, formulários, páginas web, aplicações SPA, CSS, HTML ou qualquer código frontend.

- Skill: `paulohfs/frontend-security` (Agent Skill)
- Install (CLI): `npx skillmds@latest add paulohfs/frontend-security`
- Raw SKILL.md: https://api.skillmd.com/api/skills/paulohfs/frontend-security/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: PauloHFS (https://skillmd.com/u/paulohfs)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/paulohfs/frontend-security

---


# 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