🙋‍♂️ Autor

Onivaldo Miquelino
@ninomiquelino

---

🔒 Portal Seguro com WebAuthn + CSP + Trusted Types

Sistema moderno de autenticação biométrica implementando as mais avançadas práticas de segurança web, incluindo WebAuthn, Content Security Policy (CSP), Trusted Types e auditoria completa.

✨ Características Principais

🔐 Autenticação Avançada

• WebAuthn API: Autenticação sem senha usando biometria
• Multi-dispositivo: Suporte a diferentes autenticadores
• Registro seguro: Fluxo de registro biométrico intuitivo
• Persistência local: Credenciais armazenadas com segurança no IndexedDB

🛡️ Segurança Robustecida

• CSP Dinâmica: Políticas de segurança de conteúdo com nonce
• Trusted Types: Prevenção de DOM-based XSS
• JWT Seguro: Tokens com expiração e refresh automático
• IndexedDB Criptografado: Armazenamento local seguro

📊 Monitoramento Completo

• Dashboard de Segurança: Status em tempo real do sistema
• Logs de Auditoria: Registro detalhado de todas as atividades
• Estatísticas de Uso: Métricas de autenticação e sessões
• Alertas de Segurança: Notificações de eventos importantes

📱 Experiência Moderna

• Design Responsivo: Otimizado para mobile e desktop
• PWA Ready: Funcionalidades de Progressive Web App
• Dark Mode: Suporte a temas claro e escuro
• Acessibilidade: Navegação por teclado e leitores de tela

🚀 Começando Rápido

Pré-requisitos

• Node.js 16+
• Navegador moderno com suporte a WebAuthn
• HTTPS para produção (requerido pelo WebAuthn)

Instalação

# Clonar repositório
git clone https://github.com/NinoMiquelino/webauthn-secure-portal-vuejs.git

# Entrar no diretório
cd webauthn-secure-portal

# Instalar dependências
npm install

# Desenvolvimento
npm run serve

# Build de produção
npm run build:secure

# Build moderno (para navegadores recentes)
npm run build:modern

Desenvolvimento com HTTPS

# Gerar certificado SSL local (requer mkcert)
mkcert -install
mkcert localhost

# Desenvolvimento com HTTPS
npm run serve:https

🏗️ Arquitetura

 webauthn-secure-portal-vuejs/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── BiometricAuth.vue
│   │   ├── SessionLogs.vue
│   │   └── SecurityDashboard.vue
│   ├── composables/
│   │   ├── useWebAuthn.js
│   │   ├── useCSP.js
│   │   └── useSession.js
│   ├── middleware/
│   │   └── auth.js
│   ├── utils/
│   │   ├── crypto.js
│   │   ├── jwt.js
│   │   └── indexeddb.js
│   ├── styles/
│   │   └── responsive.css
│   ├── App.vue
│   └── main.js
├── vue.config.js
└── package.json   
    

🔧 Configuração

Variáveis de Ambiente

Crie um arquivo .env:

VUE_APP_NAME="Portal Seguro"
VUE_APP_VERSION=1.0.0
VUE_APP_JWT_SECRET=sua-chave-secreta-aqui
VUE_APP_SESSION_TIMEOUT=900

Política de Segurança (CSP)

O projeto implementa CSP dinâmica com nonce:

// Exemplo de política CSP gerada
default-src 'self';
script-src 'self' 'nonce-abc123' 'strict-dynamic';
style-src 'self' 'unsafe-inline';
connect-src 'self' https://api.yourapi.com;
require-trusted-types-for 'script';

🎯 Como Usar

1. Registro Biométrico

2. Acesse o portal

3. Clique em "Registrar Biometria"

4. Insira usuário e nome

5. Siga as instruções do navegador para registrar sua biometria

6. Autenticação

7. Clique em "Autenticar com Biometria"

8. Use o mesmo método biométrico registrado

9. Acesso concedido automaticamente

10. Dashboard de Segurança

· Monitore o status de segurança em tempo real
· Veja estatísticas de uso e logs
· Configure preferências de segurança

🔒 Recursos de Segurança

WebAuthn Implementation

· Public Key Credentials: Credenciais baseadas em criptografia de chave pública
· User Verification: Verificação do usuário obrigatória
· Platform Authenticators: Suporte a autenticadores de plataforma
· Cross-Origin Protection: Proteção contra ataques entre origens

Content Security Policy

· Dynamic Nonce: Nonce único para cada carregamento
· Strict Policies: Políticas restritivas por padrão
· Trusted Types: Prevenção de injection attacks
· Report Only Mode: Modo de relatório para desenvolvimento

Proteção de Dados

· Encrypted Storage: Dados sensíveis criptografados
· Secure Tokens: JWT com expiration e validation
· Session Management: Timeout automático de sessão
· Activity Monitoring: Detecção de comportamento suspeito

📱 Responsividade

O projeto é totalmente responsivo com breakpoints:

· Mobile: < 768px · Tablet: 768px - 1024px · Desktop: > 1024px

🌙 Dark Mode

Suporte automático a dark mode baseado nas preferências do sistema:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f172a;
    --surface-color: #1e293b;
  }
}

🧪 Testes

# Executar testes unitários
npm run test:unit

# Executar testes e2e
npm run test:e2e

# Executar todos os testes
npm run test

📦 Build e Deploy

Build para Produção

# Build tradicional
npm run build

# Build moderno (navegadores recentes)
npm run build:modern

# Análise de bundle
npm run build:analyze

Deploy

O projeto pode ser deployado em qualquer serviço de hosting estático:

· Netlify: Conecte diretamente do GitHub
· Vercel: Deploy automático com vercel --prod
· GitHub Pages: Use gh-pages package
· AWS S3: Upload da pasta dist/

🐛 Solução de Problemas

WebAuthn Não Funciona

1. Verifique HTTPS: WebAuthn requer HTTPS em produção
2. Domínio Válido: Credenciais são vinculadas ao domínio
3. Navegador Suportado: Chrome, Firefox, Edge, Safari recentes
4. Autenticador Disponível: Biometria ou chave de segurança configurada

CSP Bloqueando Recursos

1. Verifique Console: Erros de CSP são mostrados no console
2. Ajuste Políticas: Modifique useCSP.js para adicionar recursos necessários
3. Modo Report: Use Content-Security-Policy-Report-Only durante desenvolvimento

Tokens Expirados

1. Refresh Automático: O sistema tenta refresh automático
2. Reautenticação: Redireciona para autenticação biométrica
3. Limpeza Automática: Tokens expirados são removidos automaticamente

Padrões de Código

· Siga o ESLint configuration
· Use Vue 3 Composition API
· Mantenha testes atualizados
· Documente novas features

🛣️ Roadmap

· Suporte a múltiplos usuários
· Autenticação multi-fator
· Backup de credenciais
· Integração com backend
· Offline support avançado
· PWA completo
· Mais provedores de autenticação

🙋 FAQ

P: Posso usar em produção?

R: Sim, o projeto está pronto para produção, mas recomenda-se revisão de segurança.

P: Quais navegadores são suportados?

R: Chrome 67+, Firefox 60+, Edge 79+, Safari 13+

P: Preciso de servidor backend?

R: Não, funciona completamente no frontend, mas pode ser integrado com backend.

P: Como customizar as políticas CSP?

R: Modifique o arquivo src/composables/useCSP.js

📞 Suporte

Encontrou um problema? Abra uma issue

---

Desenvolvido com ❤️ e 🛡️ segurança em mente

---

🤝 Contribuições

Contribuições são sempre bem-vindas!
Sinta-se à vontade para abrir uma issue com sugestões ou enviar um pull request com melhorias.

---

💬 Contato

📧 Entre em contato pelo LinkedIn
💻 Desenvolvido por Onivaldo Miquelino

---