34

Web ページで自分の電子メール アドレスを保護したい。

しかし、私は JavaScript と PHP を知りません。HTMLとCSSしか知らない。

CSSのみでメールアドレスを保護する方法を教えてください。

4

13 に答える 13

73

とても簡単です。HTMLとCSSだけでメールアドレスを守れます。PHP や Java スクリプトについて知る必要はありません。以下のコードを試してください。

シンプルな HTML と 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>

上記のコードの出力:

jhon@gmail.com

ご注意ください：

ここでは、2 つの追加属性を使用しています。

1)data-userあなたの電子メール ID ユーザー名を逆に書きます。

2)data-websiteあなたの電子メール ID ウェブサイトを逆に書きます。

于 2014-01-29T04:14:28.803 に答える
12

ご存じのとおり、難読化の手法は絶対確実なものではなく、ハーベスター ボットは引き続き改善されます。難読化には多くの反対意見があります。

そうは言っても、あなたがすでに言及したかなり興味深いものにいくつかの追加のテクニックがあります.

HTML テクニック:

  1. HTML コメント記号を使用したり、 HTML エンティティを置き換えたりすることは、数年前にすでにかなり脆弱なアプローチであることが示されています。

  2. テキストの代わりに画像を使用することは、切り取りと貼り付けができない視覚障害者を含め、ほとんどのユーザーにとって苦痛です。それはうまくいきます。

  3. ハイパーリンクを使用できる興味深い純粋な HTML アプローチの 1 つが、しばらく前に提案されました。

    <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 テクニック: もちろん、これらも絶対確実というわけではありません。あなたがすでに述べたことに加えて：

  1. CSS display:none を使うのも便利です。スタイル タグを単純に削除するボットは、収集したアドレスに非表示のテキストを含めます。

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

  2. Web アイコン フォントを使用して @アイコンを取り込むことができ、スクリーン リーダーをつまずかせない方法でこれを行うことができます。明らかな理由から、@ アイコンを含む Web アイコン フォントは見たことがありませんが、これは機能します。

更新: Font Awesomeに @ アイコンが追加されました。この投稿を見て誰かが提案したのかもしれません;-)。

于 2014-03-31T19:40:27.923 に答える
11

上記の 2 つの回答 ( Ans1 & Ans2 ) を組み合わせmailtoて、css を使用して使いやすくすることができます。

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

于 2015-07-13T22:53:22.117 に答える
1

エンコーダフォーマットを使用

サイトの URL をエンコードしてデータ メールを変換する

Hide email using CSS trick (direction property)

デモ

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.

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. 基本的な電子メール スクリプト
<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. 外部 JavaScript ファイル
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
于 2014-04-02T07:45:59.880 に答える
0

HTMLを有効に保ちながら「mailto」機能を許可する同様のJavaScript手法をしばらく使用しました。

HTML : 

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

JavaScript (小さな 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);

使用法

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

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

しかし最近、Google Chrome の Web サイトにフィッシング警告が表示されました。これは完全に間違っているわけではありません (技術的には、リンクは実際にスプーフィングされています)、これに対する別の簡単な解決策はありますか?

于 2015-03-09T08:30:34.620 に答える
-1

コピーできないようにするには、次のようにします。

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

そしてHTML：

<span class="email">jack@gmail.com</span>

JSFIDDLE

ボットから保護するには、CSS Codedirection を使用します。

<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>
于 2014-04-02T07:14:02.503 に答える