Como ocultar endereços de e-mails com JavaScript

Exibir endereços de e-mail em um site é essencial para a comunicação, mas também pode ser um risco, já que bots e crawlers automatizados podem coletar esses e-mails para enviar spam. Uma boa prática para proteger os endereços de e-mail é ocultá-los usando JavaScript, dificultando a ação dos bots, mas mantendo a funcionalidade para os visitantes humanos. Neste post, aprenda como ocultar endereços de e-mails com JavaScript.

1. Por que ocultar e-mails com JavaScript?

Muitos bots e crawlers vasculham o código-fonte de sites em busca de padrões de endereços de e-mail, como “usuario@dominio.com“. Quando você exibe diretamente o e-mail em HTML, é fácil para esses scripts capturarem e-mails e adicioná-los a listas de spam.

JavaScript pode ser utilizado para gerar ou modificar o e-mail dinamicamente no lado do cliente, tornando mais difícil para os bots capturarem o endereço diretamente no código HTML.

2. Exemplo básico: construir o e-mail no JavaScript

Em vez de exibir o endereço de e-mail diretamente no HTML, você pode montá-lo dinamicamente no JavaScript. Aqui está um exemplo simples:

<span id="email"></span>

<script>
    const username = "usuario";
    const domain = "dominio.com";
    const email = username + "@" + domain;
    document.getElementById("email").textContent = email;
</script>

• Como funciona: O endereço de e-mail é dividido em duas partes: o nome do usuário e o domínio. Depois, essas partes são concatenadas e exibidas dinamicamente no elemento <span>.
  
  
• Benefício: Bots que leem o código HTML não conseguem capturar diretamente o endereço, pois ele é montado apenas após a execução do JavaScript no navegador.

3. Usando innerHTML para links de e-mail (mailto)

Se você quiser que o e-mail seja clicável (usando um link mailto), pode gerar o HTML dinamicamente com innerHTML. Veja um exemplo:

<span id="emailLink"></span>

<script>
    const username = "contato";
    const domain = "exemplo.com";
    const email = username + "@" + domain;
    const mailtoLink = '<a href="mailto:' + email + '">' + email + '</a>';
    document.getElementById("emailLink").innerHTML = mailtoLink;
</script>

• innerHTML: Aqui estamos gerando um link mailto: para que os usuários possam clicar e enviar um e-mail diretamente.
  
  
• Segurança: Tenha cuidado ao usar innerHTML, pois ele pode permitir inserção de código malicioso se os dados não forem bem tratados. Neste caso, estamos gerando o conteúdo de forma segura, sem inserções externas.

4. E-mail codificado para maior proteção

Outra abordagem é usar códigos Unicode para codificar os caracteres do e-mail, o que pode dificultar ainda mais a captura por bots. Cada caractere do e-mail é representado por seu código Unicode correspondente.

Exemplo:

<span id="emailUnicode"></span>

<script>
    const email = '&#117;&#115;&#117;&#225;&#114;&#105;&#111;&#64;&#100;&#111;&#109;&#105;&#110;&#105;&#111;&#46;&#99;&#111;&#109;';
    document.getElementById("emailUnicode").innerHTML = email;
</script>

• Como funciona: Cada caractere do e-mail é substituído pelo seu código Unicode HTML correspondente. Quando o navegador renderiza a página, ele decodifica automaticamente esses códigos para exibir o e-mail de forma legível.
  
  
• Proteção extra: Embora os bots possam decodificar esses caracteres, essa abordagem adiciona uma camada adicional de dificuldade para captura direta.

5. Ocultar com CSS + JavaScript

Outra técnica interessante é usar o CSS para “esconder” partes do e-mail e fazer com que o JavaScript as mostre. Isso pode enganar bots que não interpretam o CSS.

Exemplo:

<span id="email">usuario<span class="hidden">@dominio.com</span></span>

<script>
    document.querySelector('.hidden').style.display = 'inline';
</script>

<style>
    .hidden {
        display: none;
    }
</style>

• CSS: Inicialmente, a parte do e-mail está oculta (display: none).
  
  
• JavaScript: Quando a página é carregada, o JavaScript torna visível a parte oculta.
  
  
• Benefício: Bots que não interpretam JavaScript e CSS corretamente não conseguirão visualizar o e-mail completo.

6. Usando conversão simples Base64

Uma técnica mais avançada é converter o endereço de e-mail em Base64, decodificando-o dinamicamente no lado do cliente. Isso adiciona uma camada de proteção adicional.

Exemplo:

<span id="emailEncoded"></span>

<script>
    const emailBase64 = 'dXN1YXJpb0Bkb21pbmlvLmNvbQ==';  // "usuario@dominio.com" em Base64
    const email = atob(emailBase64);
    document.getElementById("emailEncoded").textContent = email;
</script>

Base64: O endereço de e-mail é codificado em Base64. Com atob(), o JavaScript decodifica a string para seu formato original.

Proteção: A codificação Base64 torna mais difícil para bots comuns lerem o e-mail diretamente do HTML.

Outro exemplo prático

 <script language="JavaScript">
   //Informe seu endereço de e-mail conforme abaixo:
   usuario="meunome" 
   dominio="gmail.com" 
   conector="@" 

//Função que concatena o endereço de e-mail
function embr_email(){ 
   return usuario + conector + dominio 
}

//Função que mostra o e-mail concatenado
function escreve_link_email(){ 
   document.write("<a href='mailto:" + embr_email() + "'>" + embr_email() + "</a>") 
}
 </script>

Mostra o e-mail já concatenado:

Meu e-mail pessoal é </script>escreve_link_email()</script>.

Proteger endereços de e-mail de bots e crawlers é uma prática importante para reduzir a quantidade de spam que você ou seus usuários podem receber.

Usar JavaScript para exibir e-mails dinamicamente, juntamente com técnicas como codificação de caracteres ou Base64, pode ajudar a evitar que seus endereços sejam facilmente capturados.

Embora nenhuma técnica seja 100% infalível, essas abordagens tornam significativamente mais difícil para bots automatizados coletarem os endereços de e-mail. Experimente diferentes métodos e encontre o equilíbrio ideal entre proteção e usabilidade no seu site.

Dúvidas ou sugestões sobre como ocultar endereços de e-mails com JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: email javascript