Formulário de Cadastro Seguro (ou não)

Este documento descreve um formulário de cadastro HTML/JavaScript simples, focado em validação de entrada, sanitização e persistência de dados básicos usando localStorage. O formulário também inclui um mecanismo rudimentar de limitação de tentativas de submissão para prevenir ataques de brute force.

Visão Geral

O objetivo principal deste código é demonstrar como coletar informações de um usuário (nome, e-mail, telefone), validar e sanitizar esses dados no lado do cliente, armazená-los localmente no navegador e exibi-los em uma nova janela após a submissão bem-sucedida.

Funcionalidades

• Validação de Entrada:

  • Nome: Permite apenas letras e espaços, verifica se não está vazio e tem um comprimento mínimo de 2 caracteres.

  • E-mail: Verifica o formato básico de e-mail e se não está vazio.

  • Telefone: Valida um formato de telefone celular brasileiro ((XX) 9XXXX-XXXX) e verifica se tem 11 dígitos.

• Sanitização de Entrada:

  • Remove espaços em branco no início e no fim de todos os campos.

  • Converte o e-mail para minúsculas para consistência.

  • Remove caracteres não numéricos do telefone para verificação de comprimento.

• Persistência de Dados: Armazena os dados do formulário no localStorage do navegador, permitindo que os dados persistam entre as sessões.

• Tratamento de Erros de localStorage: Inclui um bloco try-catch para lidar com dados corrompidos ou inválidos no localStorage, evitando que o aplicativo trave.

• Mensagens de Erro e Sucesso: Exibe mensagens claras de erro para campos inválidos e uma mensagem de sucesso após a submissão.

• Limitação de Tentativas de Submissão: Implementa um contador de tentativas que bloqueia o botão de submissão por um tempo determinado se o número máximo de tentativas for excedido.

• Visualização de Dados: Após a submissão bem-sucedida, abre uma nova janela/aba que exibe todos os dados cadastrados (incluindo os dados anteriores do localStorage) em uma tabela.

• Substituição de alert(): Mensagens de erro para bloqueio de pop-ups são exibidas diretamente na interface do formulário, em vez de usar alert().

Como Usar

1. Estrutura de Arquivos: Certifique-se de ter um arquivo index.html (ou o nome que você deu ao seu arquivo HTML) e uma pasta css com um arquivo style.css dentro dela. O código HTML assume que css/style.css existe e fornece o estilo básico para o formulário.

2. Abrir no Navegador: Abra o arquivo HTML em seu navegador web.

3. Preencher o Formulário: Insira as informações nos campos "Nome", "E-mail" e "Telefone".

4. Submeter: Clique no botão "Salvar!".

5. Verificar Dados: Se a submissão for bem-sucedida, uma nova aba será aberta exibindo os dados cadastrados. Você também pode verificar o console do navegador para ver os dados sanitizados.

Dependências

• Este código é puramente HTML, CSS e JavaScript vanilla. Não há dependências externas de bibliotecas ou frameworks.

Considerações de Segurança (ou não)

O título "Formulário Seguro (ou não)" é uma brincadeira. Embora o formulário implemente validação e sanitização no lado do cliente, é crucial entender que a validação no lado do cliente não é suficiente para a segurança. Dados enviados para um servidor SEMPRE devem ser validados e sanitizados novamente no lado do servidor para prevenir vulnerabilidades como injeção de SQL, XSS (Cross-Site Scripting) e outras.

A limitação de tentativas de submissão no cliente é apenas uma medida básica para desencorajar spam ou ataques de força bruta simples, mas não substitui mecanismos de segurança robustos no servidor.s