Spammers são um grande negócio hoje em dia. Se você deseja compartilhar suas informações de contato sem ficar sobrecarregado com e-mails de spam, você precisa de uma solução. Eu me deparei com esse problema alguns meses atrás. Enquanto eu estava pesquisando como resolvê-lo, encontrei diferentes soluções interessantes. Apenas um deles foi perfeito para as minhas necessidades.
Neste artigo, mostrarei como proteger facilmente seu endereço de e-mail contra bots de spam com várias soluções. Cabe a você decidir qual técnica se adapta às suas necessidades.
Índice
O caso tradicional
Digamos que você tenha um site. Você deseja compartilhar seus detalhes de contato e não deseja compartilhar apenas seus links sociais. O endereço de e-mail deve estar lá. Fácil, certo? Você digita algo assim:
<a href="mailto:[email protected]">Send me an EmailE então você o estiliza de acordo com seus gostos.
Bem, mesmo que esta solução funcione, ela tem um problema. Ele disponibiliza seu endereço de e-mail para literalmente todos, incluindo rastreadores de sites e todos os tipos de bots de spam. Isso significa que sua caixa de entrada pode ser inundada com toneladas de lixo indesejado, como ofertas promocionais ou até mesmo alguma campanha de phishing.
Estamos procurando um compromisso. Queremos tornar difícil para os bots obter nossos endereços de e-mail, mas o mais simples possível para usuários normais.
A solução é ofuscação.
Ofuscação é a prática de tornar algo difícil de entender. Essa estratégia é usada com código-fonte por vários motivos. Um deles é esconder o propósito do código-fonte para dificultar a adulteração ou a engenharia reversa. Vamos primeiro olhar para diferentes soluções que são todas baseadas na ideia de ofuscação.
A abordagem HTML
Podemos pensar em bots como softwares que navegam na web e rastreiam páginas da web. Depois que um bot obtém um documento HTML, ele interpreta o conteúdo nele e extrai informações. Esse processo de extração é chamado Raspagem da web. Se um bot estiver procurando por um padrão que corresponda ao formato do email, podemos tentar disfarçá-lo usando um formato diferente. Por exemplo, poderíamos usar comentários HTML:
If you want to get in touch, please drop me an email at [email protected]address.com
Parece confuso, mas o usuário verá o endereço de e-mail assim:
If you want to get in touch, please drop me an email at [email protected]Prós:
- Fácil de configurar.
- Funciona com JavaScript desabilitado.
- Pode ser lido por tecnologia assistiva.
Contras:
- Os bots de spam podem pular sequências conhecidas, como comentários.
- Não funciona com um
mailto:link.
A abordagem HTML e CSS
E se usarmos o poder de estilo do CSS para remover algum conteúdo colocado apenas para enganar os bots de spam? Digamos que temos o mesmo conteúdo de antes, mas desta vez colocamos um span elemento dentro:
If you want to get in touch, please drop me an email at [email protected]address.com
.Em seguida, usamos a seguinte regra de estilo CSS:
span.blockspam {
display: none;
}O usuário final verá apenas isso:
If you want to get in touch, please drop me an email at [email protected]…que é o conteúdo com o qual realmente nos importamos.
Prós:
- Funciona com JavaScript desabilitado.
- É mais difícil para os bots obterem o endereço de e-mail.
- Pode ser lido por tecnologia assistiva.
Com:
- Não funciona com um
mailto:link.
A abordagem JavaScript
Neste exemplo, usamos JavaScript para tornar nosso endereço de e-mail ilegível. Então, quando a página é carregada, o JavaScript torna o endereço de e-mail legível novamente. Desta forma, nossos usuários podem obter o endereço de e-mail.
A solução mais fácil usa o algoritmo de codificação Base64 para decodificar o endereço de e-mail. Primeiro, precisamos codificar o endereço de e-mail em Base64. Podemos usar alguns sites como Base64Encode.org para fazer isso. Digite seu endereço de e-mail assim:
Em seguida, clique no botão para codificar. Com essas poucas linhas de JavaScript decodificamos o endereço de e-mail e configuramos o href atributo no link HTML:
var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));Então temos que ter certeza que o link de e-mail inclui id="contact" na marcação, assim:
Send me an EmailEstamos usando o atob método para decodificar uma string de dados codificados em Base64. Uma alternativa é usar algum algoritmo básico de criptografia como o Cifra de césar, que é bastante simples de implementar em JavaScript.
Prós:
- É mais complicado para os bots obterem o endereço de e-mail, especialmente se você usar um algoritmo de criptografia.
- Funciona com um
mailto:link. - Pode ser lido por tecnologia assistiva.
Com:
- O JavaScript deve estar habilitado no navegador, caso contrário, o link ficará vazio.
A abordagem de formulário incorporado
Os formulários de contato estão por toda parte. Você certamente já usou um deles pelo menos uma vez. Se você deseja uma maneira de as pessoas entrarem em contato diretamente com você, uma das soluções possíveis é implementar um serviço de formulário de contato em seu site.
Formspree é um exemplo de serviço que oferece todos os benefícios de um formulário de contato sem se preocupar com o código do lado do servidor. Wufoo é também. Na verdade, aqui está um monte que você pode considerar para lidar com envios de formulários de contato para você.
O primeiro passo para usar qualquer serviço de formulário é se inscrever e criar uma conta. O preço varia, é claro, assim como os recursos oferecidos entre os serviços. Mas uma coisa que a maioria deles faz é fornecer um trecho de HTML para incorporar um formulário que você cria em qualquer site ou aplicativo. Aqui está um exemplo que tirei diretamente de um formulário que criei na minha conta do Formspring
Na primeira linha, você deve personalizar action com base em seu ponto de extremidade. Este formulário é bastante básico, mas você pode adicionar quantos campos desejar.
Observe a tag de entrada oculta na linha 9. Essa tag de entrada ajuda a filtrar os envios feitos por usuários regulares e bots. Na verdade, se o back-end do Formspree vir um envio com essa entrada preenchida, ele a descartará. Um usuário comum não faria isso, então deve ser um bot.
Prós:
- Seu endereço de e-mail está seguro, pois não é público.
- Funciona com Javascript desabilitado.
Com:
- Depende de um serviço de terceiros (que pode ser um profissional, dependendo de suas necessidades)
Há uma outra desvantagem para esta solução, mas eu a deixei de fora da lista, pois é bastante subjetiva e depende do seu caso de uso. Com esta solução, você não está compartilhando seu endereço de e-mail. Você está dando às pessoas uma maneira de entrar em contato com você. E se as pessoas queremos enviar um e-mail para você? E se as pessoas estiverem procurando seu endereço de e-mail e não quiserem um formulário de contato? Um formulário de contato pode ser uma solução pesada nesse tipo de situação.
Conclusão
Chegamos ao fim! Neste tutorial, falamos sobre diferentes soluções para o problema do compartilhamento de e-mail online. Passamos por diferentes ideias, envolvendo código HTML, JavaScript e até alguns serviços online como Formspree para construir formulários de contato. No final deste tutorial, você deve estar ciente de todos os prós e contras das estratégias mostradas. Agora, cabe a você escolher o mais adequado para o seu caso de uso específico.
