attribute - title html
Proteger la dirección de correo electrónico solo con CSS (11)
¡Una de las formas simples y efectivas de incrustar correos electrónicos en html es usando valores hexadecimales! por ejemplo, el valor hexadecimal para [email protected] 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
<a href="mailto:%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>
Esta es una forma realmente simple y efectiva de insertar el correo electrónico en una página web.
Has escondido el "maito:" y el correo electrónico de esta manera.
Puedes usar esta tool para generar el código hexadecimal% 64.
También puedes usar esta tool para generar el código hexadecimal.
Quiero proteger mi dirección de correo electrónico en las páginas web.
Pero no sé JavaScript y PHP. Sólo sé HTML y CSS.
Entonces, ayúdame a proteger mi dirección de correo electrónico solo con CSS.
Como es probable que sepa: las técnicas de ofuscación no pueden ser infalibles y los robots cosechadores continuarán mejorando. Hay una serie de argumentos contra la ofuscación .
Dicho esto, aquí hay algunas técnicas adicionales a las más interesantes que ya mencionaste.
Técnicas de HTML:
El uso de signos de comentarios html o la sustitución de entidades html hace algunos años ha demostrado ser un enfoque bastante débil .
Usar una imagen en lugar de texto es un dolor para la mayoría de los usuarios, incluidos los que no tienen discapacidades visuales, ya que no pueden cortar y pegar. Aunque funciona bien.
Hace un tiempo se sugirió un enfoque HTML puro interesante que permite el uso de un hipervínculo.
<a href="mailto:[email protected]?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text ''notspam'' from the address before sending your email.">Email me.</a>
Técnicas de CSS: Por supuesto, tampoco son a prueba de tontos. Además de lo que ya has mencionado:
Usando la pantalla CSS: ninguno también es útil. Los bots que simplemente eliminan las etiquetas de estilo incluirán el texto oculto en la dirección recolectada.
jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.Se podría usar una fuente de ícono web para ingresar 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 icono @ por razones obvias, pero esto funcionaría.
Actualización: Font Awesome ahora tiene un ícono @. Tal vez alguien lo sugirió después de ver este post ;-).
Es muy sencillo. Puede proteger su dirección de correo electrónico solo con HTML y CSS. No necesitas saber sobre PHP o Java script. Intenta debajo del código.
HTML simple y código CSS:
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "/0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
Salida del código anterior:
Tenga en cuenta:
Aquí solo uso dos atributos adicionales.
1) data-user escribe su nombre de usuario de identificación de correo electrónico al revés .
2) data-website escriba su dirección de correo electrónico a la inversa .
Flexbox le permite cambiar el orden de los elementos dentro de un elemento que contiene, podemos usar esto para separar y reordenar partes de nuestra dirección de correo electrónico en el html, pero presentarlas al usuario como un todo legible.
div {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
<div>
<span>example.com</span>
<span>@</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>
Aquí usamos flex-direction: row-reverse para invertir el orden de los elementos.
Un estafador probablemente podría resolver esto si se esforzara, todo lo que tiene que hacer es revertir los elementos para recrear la dirección. Para un intento más completo podemos especificar el pedido manualmente.
div {
display: flex;
}
<div>
<span style="order: 3">@</span>
<span style="order: 4">example.com</span>
<span style="order: 1">Email me at the following address: </span>
<span style="order: 2">user</span>
</div>
Aquí utilizamos el order para especificar nuestro propio pedido, por lo que no se puede utilizar un revés simple.
Desafortunadamente, al hacer cualquiera de estas pausas se copia / pega para que su usuario tenga que escribir la dirección, pero es mejor que recibir la correspondencia de otro príncipe nigeriano. Use esto junto con otras técnicas para obtener una dirección de correo electrónico verdaderamente a prueba de balas.
Para deshabilitar a la gente para copiarlo intente como:
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:
<span class="email">[email protected]</span>
Y para protegerse contra bots use CSS Codedirection:
<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>
Prueba este código:
.e-mail:before {
content: "/006a/0068/006f/006e/0040/0067/006d/0061/0069/006c/002e/0063/006f/006d";
}
<span class="e-mail"></span>
Este es solo el correo codificado en hexadecimal.
Puede combinar las dos respuestas anteriores ( Ans1 y Ans2 ) para hacer que el mailto funcione con el css para su uso.
<style type="text/css">
.e-mail:before {
content: attr(data-website) "/0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
<a href="mailto:%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
<span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>
Puedes usar Font Awesome:
En <head> :
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
En <body> :
<p>john<i class="fa fa-at"></i>hotmail.com</p>
Recomendaría usar JavaScript si es posible sobre CSS y JavaScript, ya que puede manipular el dominio. Fácilmente podrías hacerlo con código como
<div onclick="document.write(''joe@'' + ''joemaller.com'')">Email Me</div>
Esta es una solución simple pero no ideal.
JFiddle; http://jsfiddle.net/yFKUD/
Usé durante algún tiempo una técnica de JavaScript similar que permitía la funcionalidad "mailto" mientras mantenía el HTML válido:
HTML:
<a href="http://www.domain.com" class="js-contact">user</a>
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 es del todo incorrecto (técnicamente, el enlace es falso), ¿existe otra solución simple para esto?
Utilice la API de ocultación de correo reCAPTCHA
Utilizar codificador de formato
Codificar url del sitio para convertir datos de correo electrónico
Hide email using CSS trick (direction property)
Scramble the email - While coding HTML, jumble and write the email address in reverse direction. ([email protected] 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.
<style type="text/css">
.backwards {
unicode-bidi:bidi-override;
direction: rtl;
}
</style>
<span class="backwards">moc.b@a</span>
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 ([email protected]). Remember to use noscript tags since some users prefer to disable javascript in browsers:
- Script de correo electrónico básico
<script language=JavaScript>
<!--
document.write("name" + "@" + "domain.com");
//--> </script>
2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "@" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "@" + host + ">" + link + "</a>");
//--> </script>
3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location=''mailto:''+''name''+''@''+''domain''+''.com''" >Send me an email</a>
- Archivo JavaScript externo
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.