Proteger la dirección de correo electrónico solo con CSS

Quiero proteger mi dirección de correo electrónico en las páginas web.

Pero no sé JavaScript y PHP. Solo sé HTML y CSS.

Por lo tanto, ayúdenme a proteger mi dirección de correo electrónico solo con CSS.

Es muy sencillo. Puede proteger su dirección de correo electrónico solo con HTML y CSS. No necesita saber acerca de las secuencias de comandos de PHP o Java. Pruebe el siguiente código.

Código HTML y CSS simple:

   Protect e-mail with only css       

Salida del código anterior:

 jhon@gmail.com 

Tenga en cuenta:

Aquí solo uso dos atributos adicionales.

1) data-user escribe el nombre de usuario de su ID de correo electrónico al revés .

2) data-website escribe el data-website tu ID de correo electrónico al revés .

Prueba este código:

 .e-mail:before { content: "\006a\0068\006f\006e\0040\0067\006d\0061\0069\006c\002e\0063\006f\006d"; } 
  

Como probablemente ya sepa: las técnicas de ofuscación no pueden ser infalibles y los robots de cosechadora seguirán mejorando. Hay una serie de argumentos en contra de la ofuscación .

Dicho esto, aquí hay algunas técnicas adicionales a las más interesantes que usted ya mencionó.

Técnicas de HTML:

  1. El uso de signos de comentarios html o la sustitución de entidades html hace algunos años ya se ha demostrado que es un enfoque bastante débil .

  2. Usar una imagen en lugar de texto es un problema para la mayoría de los usuarios, incluidos los que no tienen problemas de la vista, ya que no pueden cortar y pegar. Sin embargo, funciona bien.

  3. Recientemente se sugirió un interesante enfoque HTML puro que permite usar un hipervínculo.

    Email me.

Técnicas de CSS: estas no son, por supuesto, infalibles. Además de lo que ya has mencionado:

  1. Usando la pantalla CSS: ninguno también es útil. Los bots que simplemente eliminan las tags de estilo incluirán el texto oculto en la dirección cosechada.

    jhon-anti-bot-bit@gmail.com.

  2. Se podría usar una fuente de icono web para obtener un ícono @ y es posible hacerlo de una manera que no haga tropezar a los lectores de pantalla. No he visto una fuente de icono web con un ícono @ por razones obvias, pero esto funcionaría.

Actualización: Font Awesome ahora tiene un ícono @. Tal vez alguien lo sugirió después de ver esta publicación ;-).

¡Una de las maneras simples y eficaces de incorporar correos electrónicos en html es mediante el uso de valores hexadecimales! por ejemplo, el valor hexadecimal para john@smith.me es:

%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65

y puedes usar la siguiente etiqueta en tu código HTML

 email me 

Esta es una forma realmente simple y efectiva de insertar correos electrónicos en una página web.

has escondido el “maito:” y el correo electrónico de esta manera.

puedes usar esta herramienta para generar el código hexadecimal% 64

también puedes usar esta herramienta para generar el código hexadecimal

Puede combinar las dos respuestas anteriores ( Ans1 y Ans2 ) para hacer que el mailto funcione con el CSS para facilidad de uso.

     

Puedes usar Font Awesome:

En :

  

En

 

johnhotmail.com

Yo recomendaría usar JavaScript si es posible sobre CSS y JavaScript, ya que puede manipular el dom. Fácilmente podrías hacerlo con código como

 
Email Me

Esta es una solución simple pero no ideal.

JFiddle; http://jsfiddle.net/yFKUD/

  • Utilice la API reCAPTCHA Mailhide

    Correo oculto usando api

Utilice el codificador de formiato

Codifique la URL del sitio para convertir el correo electrónico de datos

Hide email using CSS trick (direction property)

Manifestación

 Scramble the email - While coding HTML, jumble and write the email address in reverse direction. (a@b.com should be written as moc.b@a). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here's the sample HTML code with CSS.  moc.b@a If someone copies your email address, it will available in the reverse direction. Would not work on older browsers. 

Cómo ocultar su dirección de correo electrónico de los spammers con JavaScript

 Let's look at more advanced methods that use javascipt to hide the email (name@domain.com). Remember to use noscript tags since some users prefer to disable javascript in browsers: 
  1. Escritura básica de correo electrónico
  
  2. Basic Mailto: Email Script with Link Text 
  
  3. Inline JavaScript 
 Send me an email 
  1. Archivo JavaScript externo
  The external javascript contains the code mentioned in 2 above. 

Para deshabilitar a las personas para que lo copien, intente lo siguiente:

 span.email { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

Y HTML:

  

JSFIDDLE

Y para protegerse contra los bots, use CSS Codedirection:

  moc.elpmaxe@zyx  

Utilicé durante algún tiempo una técnica similar de JavaScript que permitía la funcionalidad “mailto” mientras mantenía el HTML válido:

HTML:

 user 

JavaScript (pequeño plugin jQuery)

 // mailto anti-spam ;(function($) { $.fn.mailTo = function() { this.each(function() { var user = $(this).html() || false, domain = $(this).attr('href') .replace('http://www.', '') .replace('www.', '') .replace('http://', '') .replace('/', '') || false; if (user && domain) { $(this).html(user + '@' + domain).attr('href', 'mailto:' + user + '@' + domain); } }); return this; }; })(jQuery); 

Uso

 // protect inline e-mails $('.js-contact').mailTo(); 

http://codepen.io/ced-anamorphik/pen/QwVrKZ

Pero últimamente Google Chrome mostró una advertencia de phishing en el sitio web. Como esto no está del todo mal (técnicamente, el enlace es falso), ¿hay alguna otra solución simple para esto?

Flexbox le permite cambiar el orden de los elementos dentro de un elemento contenedor, podemos usar esto para separar y reordenar partes de nuestra dirección de correo electrónico en html pero presentarlas al usuario como un todo legible.

 div { display: flex; flex-direction: row-reverse; justify-content: flex-end; } 
 
example.com @ george Email me at the following address: