Protection de l'adresse e-mail avec CSS seulement

Question

Protection de l'adresse e-mail avec CSS seulement

je veux protéger mon adresse e-mail sur les pages web.

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

alors, s'il vous plaît aidez-moi à protéger mon adresse e-mail avec CSS seulement.

25

css css3 email-address html spam-prevention

demandé sur Jack Wilsdon 2014-01-29 08:14:28

11 réponses

score 61 · Answer 1

C'est très simple. Vous pouvez protéger votre adresse email avec seulement HTML & CSS. Vous n'avez pas besoin de connaître PHP ou Java script. Essayez sous le code.

Simple HTML and CSS code:

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "40" 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:

jhon@gmail.com

remarque:

Ici, je suis juste utilisé deux attributs supplémentaires.

1)data-user Ecrivez votre nom d'utilisateur e-mail dans inverse.

2) data-website Ecrivez votre adresse e-mail dans inverse.

score 17 · Answer 2

Essayez ce code:

.e-mail:before {
  content: "6a686f6e40676d61696c2e636f6d";
}

<span class="e-mail"></span>

c'est juste l'email encodé en hexadécimal.

score 10 · Answer 3

comme vous le savez probablement: les techniques D'Obfuscation ne peuvent pas être infaillibles et les robots de récolte continueront à s'améliorer. Il y a un certain nombre de arguments à l'encontre de la dissimulation de l'.

ceci étant dit, Voici quelques techniques supplémentaires aux techniques assez intéressantes que vous avez déjà mentionnées.

techniques HTML:

en utilisant commentaire html signes ou à la substitution d' entités html a certains il y a des années déjà été s'avère être une approche assez faible.
utiliser 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. Il fonctionne bien.
une approche HTML pure intéressante qui permet d'utiliser un hyperlien était a suggéré un temps de retour.

<a href="mailto:jhonnotspam@gmail.com?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>

CSS techniques: Ce ne sont bien sûr pas des preuves invraisemblables non plus. En plus de ce que vous avez déjà mentionné:

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

jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.
une police d'icône web pourrait être utilisée pour tirer dans un @ icône et il est possible de le faire d'une manière qui ne fera pas trébucher les lecteurs d'écran. Je n'ai pas vu d'icône web police avec une icône @ pour des raisons évidentes, mais cela fonctionnerait.

mise à Jour:Police Génial a maintenant une icône@. Peut-être quelqu'un l'a suggéré, après avoir vu ce post ;-).

score 8 · Answer 4

l'une des façons simples et efficaces d'intégrer les e-mails en html est d'utiliser des valeurs hex! par exemple valeur hex pour john@smith.me is:

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

C'est une façon très simple et efficace d'intégrer le courriel dans une page web.

vous avez attaqué le "maito:" et l'email de cette façon.

vous pouvez utiliser ce outil pour générer le %64 hex code

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

score 5 · Answer 5

Ans1& Ans2) pour faire le mailto fonctionne avec le css pour la facilité d'utilisation.

<style type="text/css">
    .e-mail:before {
        content: attr(data-website) "40" 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>

score 2 · Answer 6

Vous pouvez utiliser la Police Génial:

<head>:

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

<body>:

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

score 1 · Answer 7

je recommande 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/

score 0 · Answer 8

utilisez l'API reCAPTCHA Mailhide

cache Mail à l'aide de l'api

Utilisez l'encodeur de Formiate

Encoder l'url du site pour convertir les données email

Hide email using CSS trick (direction property)

Démo

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.

<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 email aux spammeurs avec 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:

Basic Email Script

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

fichier JavaScript externe

<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.

score 0 · Answer 9

Pour désactiver les personnes à copier essayer de la forme:

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">jack@gmail.com</span>

JSFIDDLE

Et pour protéger contre les bots utiliser les CSS Codedirection:

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

score 0 · Answer 10

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. Comme ce n'est pas entièrement mal (techniquement le lien est mystifié en effet), y a-t-il une autre solution simple à cela ?

score 0 · Answer 11

Flexbox vous permet de modifier l'ordre des éléments dans un élément containing, nous pouvons l'utiliser pour séparer et réordonner des parties de notre adresse e-mail dans le html mais les présenter à l'utilisateur comme 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 arnaque pourrait probablement résoudre ce problème s'il s'efforçait, tout ce qu'il a à faire est d'inverser les éléments pour recréer l'adresse. Pour une tentative plus approfondie nous pouvons spécifier l'ordre 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 de façon à ce qu'une simple inversion ne puisse pas être utilisée.

malheureusement faire l'une de ces pauses copier / coller donc votre Utilisateur devra taper l'adresse, mais c'est mieux que de recevoir de la correspondance d'un autre prince Nigérian. Utilisez ceci en conjonction avec d'autres techniques pour une adresse e-mail vraiment pare-balles.

Las etiquetas más populares

Protection de l'adresse e-mail avec CSS seulement

11 réponses