web-dev-qa-db-fra.com

Protéger l'adresse e-mail avec CSS uniquement

Je souhaite protéger mon adresse e-mail sur les pages Web.

Mais je ne connais pas JavaScript et PHP. Je ne connais que HTML et CSS.

Alors, aidez-moi à protéger mon adresse e-mail avec CSS uniquement.

htmlcsscss3spam-preventionemail-address
30
user3087089

C'est très simple. Vous pouvez protéger votre adresse e-mail uniquement avec HTML et CSS. Vous n'avez pas besoin de connaître PHP ou Java. Essayez le code ci-dessous).

code HTML et 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>

Sortie du code ci-dessus:

[email protected]

Veuillez noter:

Ici, je viens d'utiliser deux attributs supplémentaires.

1) data-user écrivez votre nom d'utilisateur d'ID de courrier électronique dans inverse .

2) data-website écrivez votre site Web d'identification d'e-mail dans inverse .

68
user3087089

Essayez ce code:

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

Ce n'est que l'e-mail encodé en hexadécimal.

18
Chandra Nakka

Comme vous le savez probablement: les techniques d'obscurcissement ne peuvent pas être infaillibles et les robots de récolte continueront de s'améliorer. Il existe un certain nombre de arguments contre l'obscurcissement .

Cela étant dit, voici quelques techniques supplémentaires à celles plutôt intéressantes que vous avez déjà mentionnées.

Techniques HTML:

  1. Utiliser les signes de commentaires html ou remplacer les entités html a déjà été s'est avéré être une approche assez faible .

  2. L'utilisation d'une image au lieu du texte est une douleur pour la plupart des utilisateurs, y compris les non-malvoyants car ils ne peuvent pas couper et coller. Cela fonctionne bien cependant.

  3. Une approche HTML pure intéressante qui permet d'utiliser un lien hypertexte était suggérée il y a quelque temps .

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

Techniques CSS: Ce ne sont bien sûr pas non plus infaillibles. Outre ce que vous avez déjà mentionné:

  1. Utilisation de l'affichage CSS: aucun n'est également utile. Les bots qui suppriment simplement les balises de style incluront le texte caché dans l'adresse récoltée.

    jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.

  2. Une police d'icône Web peut être utilisée pour insérer une icône @ et il est possible de le faire d'une manière qui ne déclenchera pas les lecteurs d'écran. Je n'ai pas vu de police d'icône Web avec une icône @ pour des raisons évidentes, mais cela fonctionnerait.

Mise à jour: Font Awesome a maintenant une icône @. Peut-être que quelqu'un l'a suggéré après avoir vu ce post ;-).

12
fzzylogic

L'une des façons simples et efficaces d'incorporer des e-mails en html consiste à utiliser des valeurs hexadécimales! par exemple, la valeur hexadécimale pour [email protected] est:

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

et vous pouvez utiliser la balise suivante dans votre code 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>

Il s'agit d'un moyen très simple et efficace d'incorporer des e-mails dans une page Web.

vous avez ainsi masqué le "maito:" et l'e-mail.

vous pouvez utiliser ceci outil pour générer le code hexa% 64

vous pouvez également utiliser ceci outil pour générer le code hexadécimal

10
Hbirjand

Vous pouvez combiner les deux réponses ci-dessus ( Ans1 & Ans2 ) pour que le mailto fonctionne avec le css pour la convivialité.

<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>
9
Yeo

Vous pouvez utiliser Font Awesome:

Dans <head>:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Dans <body>:

<p>john<i class="fa fa-at"></i>hotmail.com</p>
3
VME

Je recommanderais d'utiliser JavaScript si possible sur CSS et JavaScript car il peut manipuler le dom. Vous pouvez facilement le faire avec du code comme

<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>

C'est une solution simple mais pas idéale.

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

2
Dean Meehan

J'ai utilisé pendant un certain temps une technique JavaScript similaire qui permettait la fonctionnalité "mailto" tout en gardant le HTML valide:

HTML: 

<a href="http://www.domain.com" class="js-contact">user</a>

JavaScript (petit 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);

Utilisation 

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

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

Mais récemment, Google Chrome a affiché un avertissement de phishing sur le site Web. Comme ce n'est pas tout à fait faux (techniquement, le lien est usurpé), existe-t-il une autre solution simple à cela?

0
Cedric Anamorphik

Pour désactiver les personnes à copier, essayez comme:

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;
}

Et HTML:

<span class="email">[email protected]</span>

JSFIDDLE

Et pour vous protéger contre les bots, utilisez CSS Codedirection:

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

Flexbox vous permet de modifier l'ordre des éléments à l'intérieur d'un élément conteneur, nous pouvons l'utiliser pour séparer et réorganiser des parties de notre adresse e-mail en html mais les présenter à l'utilisateur dans un ensemble lisible.

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>

Ici, nous utilisons flex-direction: row-reverse pour inverser l'ordre des éléments.

Un escroc pourrait probablement résoudre ce problème s'il essayait dur, tout ce qu'il avait à faire était d'inverser les éléments pour recréer l'adresse. Pour une tentative plus approfondie, nous pouvons spécifier la commande manuellement.

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>

Ici, nous utilisons order pour spécifier notre propre commande afin qu'un simple revers ne puisse pas être utilisé.

Malheureusement, faire un de ces pauses copier/coller de sorte que votre utilisateur devra taper l'adresse, mais c'est mieux que de recevoir de la correspondance d'un autre prince nigérian. Utilisez-le en conjonction avec d'autres techniques pour une adresse e-mail vraiment à l'épreuve des balles.

0
George Richardson

Utiliser l'encodeur Formate

encoder l'URL du site pour convertir les e-mails de données

Hide email using CSS trick (direction property)

Démo

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.

Comment cacher votre adresse e-mail aux spammeurs avec 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:
  1. Script d'e-mail de base
<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>
  1. Fichier JavaScript externe
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
0
ravi patel