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

Question

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 conozco JavaScript y PHP. Solo conozco HTML y CSS.

Así que, por favor, ayúdame a proteger mi dirección de correo electrónico solo con CSS.

25

css html css3 email-address spam-prevention

Author: Jack Wilsdon, 2014-01-29

Source

11 answers

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>

Esto es solo el correo electrónico codificado en hexadecimal.

17

Author: Chandra Nakka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-20 13:32:40

Como probablemente sabrás: las técnicas de ofuscación no pueden ser infalibles y los bots de cosechadoras seguirán mejorando. Hay una serie de argumentos en contra de la ofuscación.

Dicho esto, aquí hay algunas técnicas adicionales a las bastante interesantes que ya mencionaste.

Técnicas HTML:

Usar signos de comentario html o sustituir entidades html ya se ha demostrado hace algunos años que es una enfoque débil .
Usar una imagen en lugar de texto es un dolor para la mayoría de los usuarios, incluidos los que no tienen discapacidad visual, ya que no pueden cortar y pegar. Sin embargo, funciona bien.
Un enfoque HTML puro interesante que permite el uso de un hipervínculo fue sugerido hace un tiempo.

<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 CSS: Por supuesto, estos tampoco son a prueba de tontos. Además de lo que has mencionado ya:

Usar CSS display:none 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.
Una fuente de icono web podría usarse para extraer un icono @ y es posible hacer esto 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.

Actualizar: Fuente impresionante ahora tiene un icono@. Tal vez alguien lo sugirió después de ver este post ;-).

10

Author: fzzylogic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-19 17:36:27

Una de las formas simples y efectivas de incrustar correos electrónicos en html es mediante el uso de valores hexadecimales. por ejemplo valor hexadecimal para [email protected] is:

%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="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%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 incrustar correo electrónico en una página web.

Has ocultado el "maito:" y el correo electrónico de esta manera.

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

También puedes usar esto herramienta para generar el código hexadecimal

8

Author: Hbirjand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-01 12:02:23

Usted puede combinar las dos respuestas anteriores (Ans1 & Ans2) para hacer el mailto funciona con el css para la usabilidad.

<style type="text/css">
    .e-mail:before {
        content: attr(data-website) "\0040" attr(data-user);
        unicode-bidi: bidi-override;
        direction: rtl;
    }
</style>
<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%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>

5

Author: Yeo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:19

Puede utilizar la fuente Impresionante:

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>

2

Author: VME,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-23 02:21:20

Recomendaría usar JavaScript si es posible sobre CSS y JavaScript, ya que puede manipular el dom. Fácilmente podría 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 /

1

Author: Dean Meehan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-28 13:05:01

Utilice la API reCAPTCHA Mailhide

Ocultar correo usando api

Utilice el formato del codificador

Codificar url del sitio para convertir datos email

Hide email using CSS trick (direction property)

Demo

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.

0

Author: ravi patel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-02 07:51:34

Para deshabilitar a las personas para que lo copien 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>

JSFIDDLE

Y para protegerse contra bots use CSS Codedirection:

<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>

0

Author: Jake 404,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-04 06:09:49

Usé durante algún tiempo una técnica 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 de hecho), ¿hay otro ¿solución simple a esto ?

0

Author: Cedric Anamorphik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-09 08:30:34

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 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:&nbsp;</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 ordene 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:&nbsp;</span>
  <span style="order: 2">user</span>
</div>

Aquí usamos order para especificar nuestro propio orden para que no se pueda usar un simple reverso.

Desafortunadamente hacer algo de esto rompe copiar/pegar por lo que su usuario tendrá que escribir la dirección, pero es mejor que recibir correspondencia de otro príncipe nigeriano. Utilice esto junto con otras técnicas para una dirección de correo electrónico verdaderamente a prueba de balas.

0

Author: George Richardson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-01 18:45:47

score 61 · Accepted Answer

Es muy simple. Puede proteger su dirección de correo electrónico solo con HTML y CSS. Usted no necesita saber acerca de PHP o Java script. Intente debajo del código.

Código HTML y CSS simple:

<!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:

[email protected]

Tenga en cuenta:

Aquí solo utilizo dos atributos adicionales.

1) data-user escriba su nombre de usuario de id de correo electrónico en inverso .

2) data-website escriba su sitio web de id de correo electrónico en inverso .