web-dev-qa-db-ja.com

ボットからメールアドレスを隠す-mailtoを保持：

tl; dr

スクリプトを使用せずにボットからメールアドレスを非表示にし、mailto:機能を維持します。メソッドはスクリーンリーダーもサポートする必要があります。

概要

  • 電子メール難読化なし使用scriptsまたはお問い合わせフォーム

  • メールアドレスは完全に表示人間の視聴者に、mailto:機能の維持である必要があります

  • メールアドレス画像形式ではない。

  • 電子メールアドレススパムクローラーとスパムボットから「完全に」非表示にする必要がありますおよびその他のハーベスタータイプ

望ましい効果：

  • スクリプトなし、お願いします。プロジェクトで使用されているスクリプトはなく、そのままにしておきたい。

  • 電子メールアドレスはページに表示であるか、モーダルを開くなどのユーザーインタラクションの後に簡単に表示できます。

  • ユーザーは電子メールアドレスをクリックできますは、mailto:機能をトリガーします。

  • メールをクリックすると、ユーザーのメールアプリケーションが開きます。

    つまり、mailto:機能が機能する必要があります。

  • 電子メールアドレスが表示されないか、ボットの電子メールアドレスとして識別されない（これにはページのソースが含まれます）

  • スパムでいっぱいの受信トレイがありません

ではなくとは何ですか

  • 電子メールアドレスの代わりに、連絡先フォーム（または同様のもの）を追加する

    連絡フォームが嫌い。私はめったに連絡フォームに記入しません。メールアドレスがない場合は電話番号を探し、それがない場合は代替サービスを探し始めます。どうしても必要な場合にのみ、問い合わせフォームに記入します。

  • 住所を住所の画像で置き換える

    これはHUGEスクリーンリーダーを使用している人にとって不利になります（将来のプロジェクトで視覚障害者を覚えておいてください）

    また、画像をクリック可能にしてからmailto:機能をリンクのhrefとして追加しない限り、削除mailto:機能ですが、それは目的を無効にしますボットに。

動作するもの：

  • CSSでのpseudo-elementsの巧妙な使用法

  • base64エンコードを使用するソリューション

  • Breaking upメールアドレスとドキュメント全体に部品を広げ、ユーザーがボタンをクリックしたときにそれらをモーダルに戻す（これにはおそらく複数のCSSクラスとanchor tagsの使用が含まれます）

  • htmlを介したCSS属性の変更

    @MortezaAsadiは、以下のコメントで可能性を優雅に持ち出しました。これは完全版へのリンクです-記事は2012年のものです。

    HTML属性を変更するためにCSSを使用できたらどうなりますか？

  • 私の知識の範囲を超えている他の創造的なソリューション。

同様の質問/修正

（これはJoe Mallerによって提案された素晴らしい修正であり、うまく機能しますが、スクリプトベースです。これは次のようになります。

<SCRIPT TYPE="text/javascript">

  emailE = 'emailserver.com'

  emailE = ('yourname' + '@' + emailE)

  document.write('<A href="mailto:' + emailE + '">' + emailE + '</a>')

</script>



<NOSCRIPT>

  Email address protected by JavaScript

</NOSCRIPT>

  • PHPのみのメールアドレス難読化機能を探しています

    （PHPとCSSの両方を最初に使用する巧妙なソリューションreverse PHPを使用する電子メール、そしてreverse it CSSで戻る） ！しかし、それは解決するのが簡単すぎるです。

  • 最近のWeb上の電子メールアドレスを難読化する価値はありますか？

    （Javascriptの修正）

  • Webサイト上の電子メールアドレスを難読化する最良の方法？

    選択した回答は機能します。実際にうまく機能します。電子メールをhtml entitiesとしてエンコードする必要があります。改善できますか？

    これは次のようになります。

    <A HREF="mailto:

&#121;&#111;&#117;&#114;&#110;&#097;&#109;&#101;&#064;&#100;&#111;&#109;&#097;&#105;&#110;&#046;&#099;&#111;&#109;">

&#121;&#111;&#117;&#114;&#110;&#097;&#109;&#101;&#064;&#100;&#111;&#109;&#097;&#105;&#110;&#046;&#099;&#111;&#109;

</A>

  • 電子メールアドレスの難読化は実際に機能しますか？

    （このスーパーユーザーの質問に対する選択された回答は素晴らしいものであり、さまざまな難読化方法を使用して受信したスパムの量の調査を提示します。

    CSSを使用して電子メールアドレスを操作して、rtlを機能させているようです。これは、このセクションでリンクした最初の質問で使用したのと同じ方法です。

    mailto:機能を修正に追加すると、結果にどのような影響があるかはわかりません。

  • SO には他にも多くの質問があり、それらはすべて同様の答えを持っています。適切なものが見つかりませんでした私の希望する効果

質問：

2つ以上の修正を組み合わせる（または新しい修正を追加する）によって、上記の電子メール難読化方法の効率を上げる（つまり、スパムをできるだけ少なくする） = while：

A- mailto:機能の維持。および

B-スクリーンリーダーのサポート

編集：

以下の回答とコメントの多くは、ある種のjsなしでこれを行うことは不可能であることを示しながら、非常に良い質問を投げかけています。

asked/impliedである質問は次のとおりです。

jsを使用しないのはなぜですか？

答えは、jsにアレルギーがあるということです

冗談はさておき、

この質問をした主な3つの理由は次のとおりです。

  • 問い合わせフォームは、メールアドレスを提供するための代替としてますます受け入れられています-すべきではありません。

  • 実行できるスクリプトを使用しない場合実行する必要があるスクリプトを使用しない場合。

  • Curiosity：（私は実際にjs修正の1つを実際に使用しているので）問題を議論することがより良い方法につながる場合、を見たかった。

htmlcssweb-crawlermailto
63
user7234396

定義上、スクリーンリーダーはある種の「ボット」であるため、リクエストの問題は特に「スクリーンリーダーのサポート」です。スクリーンリーダーが電子メールアドレスを解釈できる必要がある場合、ページクローラーもそれを解釈できるでしょう。

また、mailto属性のポイントは、Web上で電子メールアドレスを実行する方法の標準になることです。 2番目の方法があるかどうかを尋ねることは、2番目の標準があるかどうかを尋ねるようなものです。

スクリプトを使用してページをロードすると、スクリプトが実行され、DOMで電子メールアドレスが表示される（電子メールアドレスon clickなどを入力しない限り）と同じ問題が引き続き発生します。いずれにしても、スクリーンリーダーはまだ読み込まれていないため、これに関する問題が発生します。

正直なところ、半分のまともなスパムフィルターを備えたメールサービスを取得し、受信トレイで簡単にソートできるデフォルトの件名を指定するだけです。

<a href="mailto:[email protected]?subject=Something to filter on">Email me</a>

あなたが求めているのは、標準が何かをする2つの方法を持っているかどうかです。1つはボット用、もう1つは非ボット用です。答えはそうではなく、できる限りボットと戦う必要があります。

31
k2snowman69

メールボットを倒すのは難しいです。ウィキペディアの 電子メールアドレス収集対策セクション をご覧ください。

私のバックストーリーは、検索ボットを書いたことです。それは何年も前の最初の実行中に105,000以上のURLをクロールしました。それから学んだことから、ウェブクロールボットは文字通りすべてを見ることができます。これはWebページに表示されるテキストです。ボットは画像以外のすべてを読み取ります。

次の理由により、コードを介してスパムを簡単に止めることはできません。

  1. Mailto：タグを使用する場合、CSSとJSは無関係です。ボットは、特に「mailto：」キーワードのHTMLページを調べます。そのコロンから次の単一引用符または二重引用符（いずれか早い方）までのすべてが電子メールアドレスと見なされます。 HTMLエンティティの電子メールアドレス-上記の例のように-ASCIIの逆メソッド/関数を使用して、すばやく変換できます。上記のJavaScriptコードスニペットを実行すると、＆＃121;＆＃111;＆＃117;＆＃114; ...で始まる文字列がすぐに「[email protected]」に変わります。 （私のボットはmailto：emailアドレスを持つhrefを捨てました。メールアドレスではなくウェブページのURLが欲しかったからです。）

  2. ページがボットをクラッシュさせる場合、ボットの作成者はボットを調整して、そのページを念頭に置いてクラッシュを修正し、今後そのページでボットが再びクラッシュしないようにします。したがって、ボットをよりスマートにします。

  3. ボットの作成者は、ボットを作成できます。ボットは、ページをクロールせずに、すべての既知のバリエーションの電子メールアドレスを生成します。それを実行することは不可能かもしれませんが、今日の高コアカウントCPU（ハイパースレッドであり、4 GHz以上で実行される）と、分散クラウドベースのコンピューティング、さらにはスーパーコンピューターを使用することも考えられません。誰かのメールアドレスを知らなくても、だれかが全員をスパムするボットファームを作成できると考えられます。 20年前には、それは理解できなかったでしょう。

  4. 無料のメールプロバイダーには、無料のユーザーアカウントを広告主に販売してきた歴史があります。以前は、無料のメールアカウントに登録するだけで、そのメールアドレスをオンラインで使用することなく、そのメールアドレスにスパムを配信し始めることが自動的に保証されました。私はそれが有名な会社名で何度も起こるのを見てきました。 （名前については言及しません。）

  5. Mailto：キーワードはこの一部です IETF RFC 。このキーワードを含むリンクから、デフォルトの電子メールクライアントを自動的に起動するブラウザーが構築されます。 JavaScriptを使用して、アプリケーションの起動プロセスを中断する必要があります。

電子メールサーバーでフィルターを使用したり、場合によっては画像を使用したりせずに、従来の電子メールサーバーを使用している間、スパムを100％阻止することは不可能だと思います。

1つの代替手段があります...また、Webサイトで内部的に実行されるチャットのようなメールクライアントを構築することもできます。 Facebookのチャットクライアントのようなものです。これは「メールのようなもの」ですが、実際にはメールではありません。これは、アーカイブ機能を備えた1対1のインスタントメッセージングです...ログイン時に自動的にロードされます。ドキュメントの添付ファイルとリンク機能があるため、電子メールのような働きをしますが、スパムはありません。外部からアクセス可能なAPIを構築しない限り、それは人々がスパムを送信できないクローズドシステムです。

厳密に従来の電子メールを使用することを計画している場合、最善の策は、企業の電子メールサーバーでApacheの SpamAssassin を実行することです。

上記の複数の戦略を組み合わせて、メールハーベスタがWebページからメールアドレスを収集するのをより困難にすることもできます。スパムの100％、時間の100％を止めることはできません...また、スクリーンリーダーの100％が盲目の訪問者のために働くことを許可します。

従来の電子メールの何が問題なのか、非常に優れたスタートルックを作成しました。そのためにあなたに称賛を！

優れたスクリーンリーダーは JAWS from Freedom Scientific です。私はそれを使って、目の不自由なユーザーが自分のWebページをどのように読んでいるかを聞きました。 （男性の声が両方のアクション（リンクをクリックするなど）とテキストを読んでいる場合、1つの声を女性に変えて、1つの声がアクションを読み、別の声がテキストを読むようにしてください。視覚的に不明瞭です。）

メールアドレス収集対策 頑張ってください！

26
Clomp

JavaScriptを使用するアプローチですが、フットプリントはかなり小さくなります。また、非常に「ゲットー」であり、一般に、JSを使用することに極端に抵抗する場合を除き、HTMLのインラインJSを使用するアプローチはお勧めしません。

<a
  href="#"
  data-contact="bGUtZW1haWxAdGhlLWRvbWFpbi5jb20="
  data-subj="QW4gQW1hemluZyBTdWJqZWN0"
  onfocus="this.href = 'mailto:' + atob(this.dataset.contact) + '?subject=' + atob(this.dataset.subj || '')"
  >
  Send an email
</a>

data-contactは、base64でエンコードされた電子メールアドレスです。そして、data-subjはオプションのbase64エンコードサブジェクトです。

JSなしでこれを行う場合の主な課題は、CSSがHTML属性を変更できないことです。 （リンクされている article は「空のパイ」ミュージングであり、現在または近い将来に可能なこととは関係ありません。）

あなたが述べたHTMLエンティティのアプローチ、またはそのバリエーションは、おそらく最も有効なオプションです。さらに、 iframeアプローチ は賢く、 サーバーリダイレクトアプローチ はとても素晴らしいです。ただし、3つともボットに対して脆弱です。

  • HTMLエンティティは、 converted である必要があります（そしてそれを検出するのは簡単です）
  • Iframeによって参照されるドキュメント 単純に追跡される場合があります
  • サーバーのリダイレクトも単純に追跡される可能性があります

上記のアプローチでは、data-contact属性でbase64エンコードされた電子メールアドレスを使用することは非常に「一度限り」です。スクレーパーがサイト用に特別に設計されていない限り、動作します。

13
tiffon

シンプル+多くの@ +ツールなしで編集可能

<a href="mailto:user@domain@@com"
   onmouseover="this.href=this.href.replace('@@','.')">
   Send email
</a>
7
MaanooAk

Googleのrecaptcha mailhideの使用を検討しましたか？ https://www.google.com/recaptcha/admin#mailhide

ユーザーがチェックボックスをクリックすると（下のnocaptchaを参照）、完全な電子メールアドレスが表示されるという考え方です。

Recaptchaは伝統的にスクリーンリーダーだけでなく人間にとっても難しいものですが、アクセシビリティテストに関連する here について読むことができるgoogleのnocaptcha recaptchaの役割があります。ビューからの従来のチェックボックスとしてレンダリングされるため、スクリーンリーダーに関しては有望であるように見えます。 Nocaptcha reCAPTCHA

例＃1-安全ではないが、アイデアをわかりやすく説明するために

以下に、mailhideを使用せず、recaptchaを使用して何かを実装するコード例を示します。 https://jsfiddle.net/43fad8pf/36/

<div class="container">
    <div id="recaptcha"></div>
</div>
<div id="email">
    Verify captcha to get e-mail
</div>

function createRecaptcha() {
    grecaptcha.render("recaptcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light", callback: showEmail});
}
 createRecaptcha();

function showEmail() {
    // ideally you would do server side verification of the captcha and then the server would return the e-mail
  document.getElementById("email").innerHTML = "[email protected]";
}

注：私の例では、javascript関数に電子メールがあります。サーバー側でrecaptchaを検証し、電子メールを返すことが理想的です。そうでない場合、ボットは単純にコードで取得できます。

例＃2-サーバー側の検証と電子メールの返信

このような例を使用すると、追加のセキュリティが得られます。 https://designracy.com/recaptcha-using-ajax-php-and-jquery/

function showEmail() {
    /* Check if the captcha is complete */
    if ($("#g-recaptcha-response").val()) {
        $.ajax({
            type: ‘POST’,
            url: "verify.php", // The file we’re making the request to
            dataType: ‘html’,
            async: true,
            data: {
                captchaResponse: $("#g-recaptcha-response").val() // The generated response from the widget sent as a POST parameter
        },
        success: function (data) {
            alert("everything looks ok. Here is where we would take 'data' which contains the e-mail and put it somewhere in the document");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("You’re a bot");
        }
    });
} else {
    alert("Please fill the captcha!");
}
});

Verify.phpは次のとおりです。

$captcha = filter_input(INPUT_POST, ‘captchaResponse’); // get the captchaResponse parameter sent from our ajax

/* Check if captcha is filled */
if (!$captcha) {
    http_response_code(401); // Return error code if there is no captcha
}
$response =     file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR-SECRET-KEY-HERE&amp;amp;response=" . $captcha);
if ($response . success == false) {
echo ‘SPAM’;
http_response_code(401); // It’s SPAM! RETURN SOME KIND OF ERROR
} else {
// Everything is ok, should output this in json or something better, but this is an example
    echo '[email protected]'; 
}
6
Brian

まず、CSSで何もしないとうまくいかないと思います。すべてのボット（Googleのクローラーを除く）は、Webサイト上のすべてのスタイリングを単に無視します。すべてのソリューションは、JSまたはサーバー側で動作する必要があります。

サーバー側のソリューションは、新しいタブにリンクする<a>を作成することで、目的のmailtoに単にリダイレクトします。

今のところ、これが私のすべてのアイデアです。それが役に立てば幸い。

3
Pablo Kvitca

スクレーパーを書く人は、スクレーパーをできるだけ効率的にしたいと考えています。したがって、スタイル、スクリプト、およびその他の外部リソースをダウンロードしません。 CSSを使用してmailtoリンクを設定する方法はありません。さらに、Javascriptを使用してリンクを設定したくないと具体的に述べました。

他にどのような種類のリソースがあるかを考えると、外部ドキュメント（iframeを使用したHTMLドキュメントなど）もあります。 iframeのコンテンツのダウンロードを気にするスクレーパーはほとんどいません。したがって、次のことが簡単にできます。

index.html：

<iframe src="frame.html" style="height: 1em; width: 100%; border: 0;"></iframe>

frame.html：

My email is <a href="mailto:[email protected]" target="_top">[email protected]</a>

人間のユーザーにとって、iframeは通常のテキストのように見えます。 iframeはデフォルトでインラインで透明なので、境界線と寸法を設定するだけです。 Javascriptを使用せずにiframeのサイズをコンテンツのサイズに一致させることはできないため、事前に定義されたサイズを指定することが最善です。

3
Leo Jiang

すべての要件を満たす簡単な答えは、不可能です。

ここで回答したスクリプトベースのオプションの一部は、特定のボットで機能する場合がありますが、スクリプトを使用しないことを望んでいたため、使用できません。

2
peiiion