ウェブサイトにメールアドレスを記載する方法｜スパムメール対策【JavaScript】

ウェブサイトに連絡用のメールアドレスを掲載するとき、スパムメール対策はどうしていますか？

メールアドレスをそのままサイトに掲載すると、スパムメール業者のクローラー（メールアドレス自動収集システム）に読み取られて、毎日大量のスパムメールが届くことに…

対策はいろいろあるようですが、わたしがやっている方法をご紹介します。

スパムメール対策いろいろ

古典的な方法

昔からある方法はこれ。

yuyu■hoge.com（■を@に置き換えてください）

単純な方法ですが、わたしの経験上、これよく効きます。

わたしはこのブログの他に、1日3万アクセスあるウェブサイトを運営しています。英語版もあるのでアクセスの3分の1は外国からです。そのトップページに、この方法でメルアドを記載しています。約８年運営して、そのアドレスにスパムメールが来たことは一度もありません。

スパムメール対策として、十分に機能していると思います。

ただ、この方法には大きな欠点があります。

「見た目が悪い。ダサい。」

という致命的な欠点です。

きれいなサイトに、こんなヤボったい方法は使えません。もう少しスマートな方法で行きましょう。まずは、よくある方法をご紹介します。

画像化

メールアドレスを画像化して貼り付けてあるサイトをたまに見かけます。たとえば下記のメルアドは、Jpgで画像化したものです。

Googleの優秀なクローラーなら画像認識で文字を読み取っていきますが、スパム業者のクローラーにそこまでの機能はないので、スパムメール対策として有効です。

ただし、これだとユーザーがメールアドレスをコピペできず、手打ちしなけけばならないので、面倒ですし、打ち間違いで迷子メールを生む原因になります。

ユーザーフレンドリーな方法ではありませんね。

エンティティ(実体参照)化

HTMLエンティティとは、abcや@などの文字や記号を、ASCIIコードやUNICODEのルールにしたがって数字と記号に置き換えたものです。

たとえばabcや@は、それぞれ、

と置き換えます。

置き換えたエンティティ（実体参照）をHTMLに書きます。たとえば、

a@bc

という並びなら、上記の対照表に従って、

a@bc

と書きます。

これをブラウザで閲覧すると、元のa@bcが表示されます。

エンティティへの変換を自動的にやってくれるウェブサイトを使えば、一瞬でメールアドレスをエンティティ化できます。たとえばこちらのサイトとか。

https://tools.arashichang.com/html_entity.html

ただ、この方法は、もとの文字を標準的な規則にしたがって数字に置き換えているだけなので、実際にはスパムメール業者に簡単にメールアドレスを取得されてしまいます。

2020年の時点で、スパムメール対策としてお勧めできる方法ではないと思います。

JavaScriptを使った暗号化

スパム業者のクローラーに補足されないように、メールアドレスを暗号化するのも良い方法です。たとえば、

yuyu@hoge.com

というメールアドレスを、

7975797540686f67652e636f6d

のような暗号に変換しておきます。

ユーザーがブラウザで閲覧するときは、JavaScriptで復号します（ブラウザが自動的に復号してくれます）。

いろいろなサイトが、その具体的な方法（JavaScriptの記述方法）を紹介してくれています。たとえばこことか。

https://ao-system.net/emailriddler/

ただし、この方法だと、ブラウザのJavaScriptをオフにしている閲覧者にはメールアドレスが表示されません。空白になってしまいます。

その救済策として、JavaScriptのオン・オフでユーザーを振り分けて、オフの人には画像化したメールアドレスを表示する方法が採られるようですが、その場合、ユーザーは画像の文字を見てメールアドレスを手打ちしなければならず、面倒ですし、タイプミスのリスクがあります。

わたしの方法

わたしは、以下の方法でメールアドレスを記載することにしました。

まず、

yuyu■hoge.com（■を@に置き換えてください）

という記載方法がスパム対策に有効であることは、この８年間の経験でわかっています。

なので、このように書いたうえで、■から@への置き換えを、JavaScriptでおこないます（PCやスマホのブラウザが自動的に置き換えてくれるようにします）。

たとえば、メールアドレスがyuyu@hoge.comの場合、

• yuyu<span id="atmark">■</span>hoge.com<span id="notice">（■を@に置き換えてください）</span>
• <script>
• window.onload = function() {
• document.getElementById('atmark').innerHTML ='@';
• document.getElementById('notice').style.display ='none';
• };
• </script>

上のコードをこのままHTMLにコピペすると、ブラウザで見たときに次のように表示されます。

JavaScriptがオンの閲覧者（つまりほとんどの閲覧者）には、完全なメールアドレスが表示されます。そのままコピペしてメール送信に使えます。

JavaScriptがオフの閲覧者には、■を@に置き換える手間をおかけすることになりますが、アルファベット部分についてはコピペできるので、タイプミスのリスクは小さいと思います。

スパムメール業者のクローラー（メールアドレス自動収集システム）が認識するのは、おそらく■で偽装されたほうなので、メールアドレスと気づかずスルーしてくれるはずです。

わたしは、とりあえず、これでやってみます。スパムメールがたくさん来るようなら、この記事は削除します。この記事を今あなたが読んでいるということは、いまのところうまく機能しているのだと思ってください。

ではまた (^_^)/~~