web-dev-qa-db-ja.com

CSSのみで電子メールアドレスを保護する

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

しかし、私はJavaScriptとPHPを知りません。 HTMLとCSSのみを知っています。

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

htmlcsscss3spam-preventionemail-address
30
user3087089

とても簡単です。 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>

上記のコードの出力：

[email protected]

注意：

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

1）data-userメールIDユーザー名をreverseに書き込みます。

2）data-website電子メールID Webサイトをreverseに記述します。

68
user3087089

このコードを試してください：

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

これは、16進数でエンコードされた電子メールです。

18
Chandra Nakka

ご存知のように、難読化手法は絶対に安全ではなく、ハーベスタボットは改善し続けます。多くの 難読化に対する主張 があります。

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

HTMLテクニック：

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

  2. テキストの代わりに画像を使用することは、カットアンドペーストできない視覚障害者を含むほとんどのユーザーにとって苦痛です。それでもうまくいきます。

  3. ハイパーリンクの使用を可能にする興味深いピュアHTMLアプローチの1つは、 しばらく前に推奨 でした。

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

CSSテクニック：もちろん、これらは絶対確実ではありません。あなたがすでに言及したことに加えて：

  1. CSS display：noneを使用することも便利です。スタイルタグを単純に削除するボットには、収集された住所に非表示のテキストが含まれます。

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

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

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

12
fzzylogic

HTMLに電子メールを埋め込む簡単で効果的な方法の1つは、16進値を使用することです！たとえば、john @ smith.meの16進値は次のとおりです。

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

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>

これは、Webページに電子メールを埋め込むための本当にシンプルで効果的な方法です。

この方法で「maito：」とメールを非表示にしました。

この tool を使用して、％64 16進コードを生成できます。

この tool を使用して16進コードを生成することもできます

10
Hbirjand

上記の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>
9
Yeo

Font Awesomeを使用できます：

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

可能であればCSSおよびJavaScriptを介してJavaScriptを使用することをお勧めします。これは、domを操作できるためです。次のようなコードで簡単にできます

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

これは単純ですが理想的なソリューションではありません。

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

2
Dean Meehan

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サイトにフィッシング警告を表示しました。これは完全に間違っているわけではないので（技術的にはリンクが偽装されています）、これに対する別の簡単な解決策はありますか？

0
Cedric Anamorphik

人々がそれをコピーできないようにするには、次のようにしてください：

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">[email protected]</span>

[〜＃〜] jsfiddle [〜＃〜]

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

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

Flexboxを使用すると、包含要素内のアイテムの順序を変更できます。これを使用して、html内の電子メールアドレスの一部を分離および並べ替えることができますが、それらを読みやすい全体としてユーザーに提示できます。

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>

ここでは、flex-direction: row-reverseを使用して要素の順序を逆にします。

詐欺師は、一生懸命やった場合、おそらくこれを解決できます。アドレスを再作成するために要素を逆にするだけです。より徹底的な試行のために、順序を手動で指定できます。

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>

ここでは、orderを使用して独自の順序を指定しているため、単純な逆は使用できません。

残念ながら、これを行うとコピー/貼り付けが中断されるため、ユーザーはアドレスを入力する必要がありますが、ナイジェリアの別の王子から通信を受け取るよりはましです。真に防弾の電子メールアドレスを得るために、これを他の手法と組み合わせて使用​​します。

0
George Richardson

エンコーダーFormateを使用する

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

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.

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 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.
0
ravi patel