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


81

tl; dr

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


概要

  • スクリプトやお問い合わせフォーム使用せずに難読化をメールで送信

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

  • メールアドレスは画像形式であってはなりません

  • メールアドレスは、スパムクローラーやスパムボットその他の種類のハーベスターから「完全に」隠されている必要があります


望ましい効果:

  • スクリプトありません。プロジェクトで使用されているスクリプトはありません。そのままにしておきたいと思います。

  • メールアドレスはページに表示されるか、モーダルを開くなどのユーザー操作の後に簡単に表示できます。

  • ユーザーは、電子メールアドレスを上のクリックできる順番にトリガーするmailto:機能を。

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

    言い換えれば、mailto:機能が機能する必要があります。

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

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


何をしない仕事は

  • メールアドレスの代わりに連絡フォーム(または同様のもの)を追加する

    お問い合わせフォームが嫌いです。お問い合わせフォームに記入することはめったにありません。メールアドレスがない場合は電話番号を探し、電話番号がない場合は別のサービスを探し始めます。どうしても必要な場合にのみ、コンタクトフォームに記入します。

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

    これは、スクリーンリーダーを使用している人に大きな不利益をもたらします(将来のプロジェクトで視覚障害者を覚えておいてください

    また、画像をクリック可能にしてからリンクの機能を追加しない限り、機能が削除されmailto:ますが、それでは目的が果たせなくなり、ボットにメールが表示されるようになります。mailto:href


何がうまくいくか:

  • 賢い使い方pseudo-elementsCSS

  • base64エンコーディングを利用するソリューション

  • 解体ユーザーがボタンをクリックしたときに電子メールアドレスを、文書間の部分を広げることは、その後(これはおそらく複数含むことになるモーダルで一緒に戻ってそれらを置くCSSクラスとの使用をanchor tags

  • を介してhtml属性を変更するCSS

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

    CSSを使用してHTML属性を変更できるとしたらどうでしょうか。

  • 私の知識の範囲を超えている他の創造的な解決策。


同様の質問/修正

(これは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のみのメールアドレス難読化機能を探しています

    (A賢いソリューションの両方を使用PHPし、CSS最初にその後、PHPを使用して電子メールを、それを逆にCSSバック)Aは非常に素晴らしい作品解決策を約束!しかし、解決するは簡単すぎます。

  • 最近、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以上を組み合わせながら:

A-mailto:機能の維持; そして

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


編集:

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

尋ねられる/暗示される質問は次のとおりです。

使ってみませんjsか?

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

冗談はさておき、

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

  • お問い合わせフォームは、メールアドレスを提供する代わりとしてますます受け入れられるようになっていますが、そうすべきではありません。

  • スクリプトなしで実行できる場合は、スクリプトなしで実行する必要があります。

  • 好奇心:(私は実際にjs現在修正の1つを使用しているので)問題について話し合うことがそれを行うためのより良い方法につながるかどうかを見たかったのです。


21
mailto:機能を維持しようとしていて、Javascriptを使用したくない場合は、それは不可能だと思います。
xrisk 2016

CSSを使用してHTML属性を変更しますか?
モルテザーアサディ2016

@Rishavjsを使用せずに目的の効果を得るのはかなり難しいかもしれないことに同意します。ただし、私が強調したようなメソッドの存在は、電子メールをhtmlエンティティとしてエンコードする場合に、その不可能性を否定する可能性があると言えます。

@MortezaAsadiあなたが答えと呼んだものの例を投稿できますか?

@ i-love-cssはこの記事を見てください:andydavies.me/blog/2012/08/13/…–
Morteza Asadi

回答:


35

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

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

スクリプトを介して実行すると、ページが読み込まれた後も同じ問題が発生し、スクリプトが実行され、電子メールアドレスがDOMにレンダリングされます(電子メールアドレスon clickなどを入力しない限り)。いずれにせよ、スクリーンリーダーはまだ読み込まれていないため、これにはまだ問題があります。

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

<a href="mailto:no-one@no-where.com?subject=Something to filter on">Email me</a>

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


8
ロボットとの戦いは
最悪

申し訳ありませんが、ロボットが動作すると、ですべての文字列が検索され@、次にこのテキストがで分割され?、最初の部分が正規表現と一致するかどうかが確認されます。最後に2つのバージョンを保存します
Adrian Bobrowski 2016

どういう意味かわからない。件名を追加する私のポイントは、エンドユーザーが件名を変更しないことを期待することです。そうすれば、電子メールフィルターを作成して、これらすべての件名固有の電子メールを特定のフォルダーに配置できます。重要なのはボットを防ぐことではなく、電子メールのルールを支援することでした。前に言ったように、ボットを防ぐことは終わりのない戦いです。
k2snowman69 2016

首尾一貫した詳細な回答をありがとうございます。スクリーンリーダーは本質的にボットであると言うとき、あなたは有効なポイントを上げると思います。ただし、ユーザーがボタンを押してモーダルを開くなどの何らかのアクションを実行するまで、電子メールを隠しておくという考え方です。ユーザーインタラクションが発生すると、メールアドレスが表示されます。スクリプトを使用せずにこれを実現できるのであれば、それが私の質問に対する答えになります。メールに件名を追加し、それに基づいてメッセージをフィルタリングする方法は純粋な天才であるため、私はこの回答に+1を付けています。

また、mailto:属性に関しては、ウェブ上でのメールアドレスの表示方法を標準化することがポイントであるのは事実かもしれませんが、それが事実かどうかはわかりませんが、私はそれをもっと気にかけています。使い方は簡単で、メールアドレスをクリックします。新しいメッセージがメールクライアントで開かれ、入力して送信するだけです。最後に、「標準」は不動産に追いつくのに時間がかかることが多く、その逆ではありません。

29

電子メールボットを打ち負かすことは難しいことです。ウィキペディアの電子メールアドレス収集対策のセクションを確認することをお勧めします。

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

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

  1. mailto:タグを使用する場合、CSSとJSは関係ありません。ボットは、その「mailto:」キーワードのHTMLページを具体的に調べます。そのコロンから次の一重引用符または二重引用符(どちらか早い方)までのすべてが電子メールアドレスとして表示されます。HTMLエンティティの電子メールアドレス(上記の例のように)は、逆ASCIIメソッド/関数を使用してすばやく変換できます。上記のJavaScriptコードスニペットを実行すると、&#121;&#111;&#117;&#114; ...で始まる文字列が... "yourname@domain.com"にすばやく変換されます。(私の検索ボットは、メールアドレスではなくWebページのURLが必要だったため、mailto:emailアドレスでhrefを破棄しました。)

  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から自由科学。私は以前、目の見えないユーザーが自分のWebページをどのように読んでいるかを聞くためにそれを使用しました。([リンクをクリックするなど]アクションとテキストの両方を読む男性の声が聞こえる場合は、1つの声を女性に変更して、1つの声がアクションを読み、別の声がテキストを読むようにします。これにより、Webページの読み方が聞き取りやすくなります。視覚障害者。)

あなたのメールアドレスを頑張ってください収穫対策の努力!


2
非常に徹底的な回答をありがとうございました。あなたは豊富な情報を共有しました。この情報は、問題にさらに焦点を当てるのに役立ち、最終的には問題を修正する方法を見つけることにつながる可能性があります。

どういたしまして!追加の経験的洞察であなたを助けようとすることは喜びでした。受賞に感謝します。驚きでした。ありがとうございます!
2017年

26

これは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-contactbase64でエンコードされた電子メールアドレスです。そして、data-subjはオプションのbase64でエンコードされたサブジェクトです。

JSなしでこれを行う際の主な課題は、CSSがHTML属性を変更できないことです。(あなたがリンクした記事は「空のパイ」の黙想であり、現在または近い将来に何が可能であるかには何の関係もありません。)

あなたが言及したHTMLエンティティアプローチ、またはそのバリエーションは、おそらく最も簡単なオプションであり、ある程度の効果があります。さらに、iframeアプローチは巧妙であり、サーバーリダイレクトアプローチは非常に優れています。ただし、3つすべてがボットに対して脆弱です。

  • HTMLエンティティを変換する必要があるだけです(そしてそれを検出するのは簡単です)
  • iframeによって参照されるドキュメントは単にフォローされるかもしれません
  • サーバーのリダイレクトも単純に追跡される可能性があります

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


私はこれが好き。jsが有効になっていない場合は、他の人にメールを送信できます。
マイケル・ロジャース

15

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

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


私はこれが好きです、きちんとした小さなスニペット!
マーロンクリエイティブ

2
@AndyHolmes私はこれにonclick = "..."を使用しましたが、モバイルでも機能します(android / mobile chromeでテスト済み)。ボットはおそらくonclickをチェックするので、その方法で役に立たなくなった場合はわかりません。オンマウスオーバーよりも。
ゴレオン

2
@goleon onclickはモバイルで機能しますが、モバイルにはホバー状態がないため、onmouseoverは機能しません
Andy Holmes

7

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

アイデアは、ユーザーがチェックボックスをクリックしたときです(以下のnocaptchaを参照))、完全な電子メールアドレスが表示される。

reCAPTCHAは、従来、スクリーンリーダーだけでなく人間にとっても難しいものですが、アクセシビリティテストに関連する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@something.com";
}

注:私の例では、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@something.com'; 
}

4

スクレーパーを書く人は、スクレーパーをできるだけ効率的にしたいと思っています。したがって、スタイル、スクリプト、およびその他の外部リソースをダウンロードすることはありません。mailtoCSSを使用してリンクを設定するために私が知っている方法はありません。さらに、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:me@example.com" target="_top">me@example.com</a>

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


3
最初の段落については同意しますが、iframeの内容に関する2番目の段落が正しくありません。ボットは、できるだけ多くのHTMLコンテンツを必要としています。リンクやテキストなどを探しているので、iframeのコンテンツをダウンロードします。ボットは、iframeタグであるかどうかを気にしません。彼らは単にページをクロールします。URLがiframeまたはjavascriptタグのsrcセクションにある場合、クロールされます。
2016

3

まず、CSSで何もできないと思います。すべてのボット(Googleのクローラーを除く)は、Webサイトのすべてのスタイルを単に無視します。すべてのソリューションは、JSまたはサーバー側で機能する必要があります。

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

今のところ、これが私の考えです。それが役に立てば幸い。


1
約1年前にこれをテストしたとき、すべての主要なブラウザがそれをサポートしていましたが、mailto:「セキュリティ」の理由で、302リダイレクト内の場所としての処理がなくなるのを見ることができましたfile:。(そうは言っても、JavaScriptが無効になっている場合のフォールバックとして、このリダイレクトを使用します。)
Ulrich Schwarz

それは本当だ。良い考え
Pablo Kvitca 2016

2

すべての要件を満たすための簡単な答えは、 それ不可能であるということです

ここで回答したスクリプトベースのオプションの一部は、特定のボットで機能する可能性がありますが、スクリプトなしが必要だったため、できません。


彼らは電子メールにある種の暗号化を使用し、JavaScriptで動的に復号化することができます。単純な+1暗号でもうまくいきます。TheorericLlyは壊れますが、ボットは壊れません。
johnktejik20年

0

PHPソリューション

function printEmail($email){
    $email = '<a href="mailto:'.$email.'">'.$email.'</a>';
    $a = str_split($email);
    return "<script>document.write('".implode("'+'",$a)."');</script>";
}

使用する

echo printEmail('test@gmail.com');

結果

<script>document.write('<'+'a'+' '+'h'+'r'+'e'+'f'+'='+'"'+'m'+'a'+'i'+'l'+'t'+'o'+':'+'t'+'e'+'s'+'t'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m'+'"'+'>'+'t'+'e'+'s'+'t'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m'+'<'+'/'+'a'+'>');</script>

PS要件:ユーザーはJavaScriptを有効にする必要があります


-3

私が効果的だと思った1つの方法は、以下のようなcssでそれを使用することです。

<a href="mailto:myemail@ignore-domain.com">myemail@<span style="display:none;">ignore-</span>domain.com

次に、正規表現を使用ignoreme-してhref="mailto:..."属性から単語を削除するJavaScriptを記述します。これは、ignore-実際のドメインの前に単語を追加するため、ボットから電子メールを非表示にします。これはスクリーンリーダーで機能し、ユーザーがリンクをクリックすると、カスタムjs関数がignore-単語を削除します。href属性、実際の電子メールを開きます。

この方法は、これまで私にとって非常に効果的に機能してきました。あなたはこれについてもっと読むことができます-http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/


申し訳ありませんが、この方法は適切な方法ではありません。すべてではないにしても、ほとんどの優れたボットがアンカーテキストとa href。使用display:noneすることはカットをするつもりはありません。
Simon Hayter 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.