スパム対策をしてメルアド&電話番号を公開する方法

Webサイトでメールアドレスや電話番号を掲載する際、一昔前までは下記のような方法で対処していましたが、コピペできなくなるなど、 ユーザビリティを損ねることに繋がってしまうのが嫌でした。数年前に別の方法に置き換えたところ、メンテナンス性も高く、特別スパムが増えたなどの症状もなかったので、今のところ、僕的にベストな方法としてメモ代わりに紹介します。

従来の方法
  • 一部/全部を画像にする
  • @ を(a)など他の文字や記号で置き換える
  • CSS の疑似要素で @ を追加する

そのベストな方法というのは、HTMLエンティティ、もしくは ASCIIコードJavaScriptで出力する方法です。

JavaScript が無効になっているブラウザでは機能しないという懸念は、はるか昔の話。今じゃ、JavaScript が無効の状態ではそもそも見れないサイトがほとんど。その点はもはや気にするポイントではないと思います。

HTML エンティティ

HTMLエンティティとは、HTMLのタグなどで使用される特殊記号(< or > など)を、ブラウザにHTMLと解釈させずに出力したい場合に使用する代替えコードで、&で始まり;で終わる形の文字列です。

よく使用されているものとしては、&lt;(<)、&gt;(>)、&amp;(&)、&nbsp;(半角スペース)などが挙げられます。

HTMLエンティティで contact@peascode.com を表現すると下記になります。

&#99;&#111;&#110;&#116;&#97;&#99;&#116;&#64;&#112;&#101;&#97;&#115;&#99;&#111;&#100;&#101;&#46;&#99;&#111;&#109;

これをこのままHTMLに含めても良いのですが、より精神的に安心したいために、下記のように JavaScriptで小細工を加えます。一部の数字の部分を、あえて算数させる形に変更します。関数化して、 外部共通 JSファイルに入れておけばいつでも好きな時に、メールアドレスを呼び出せます。

サンプルコード

common.js
function setEmail_e() {
	var name = '&#' + (90+9) + ';&#111;&#' + (55*2) + ';&#116;&#97;&#' + (100-1) + ';&#116;'; // アカウント名
	var domain = '&#' + (100+2+10) + ';&#101;&#97;&#' + (111+4) + ';&#99;&#111;&#' + (50*2) + ';&#101;&#46;&#99;&#111;&#109;'; // ドメイン名
	document.write(name);
	document.write('&#' + (60+4) + ';'); // @マーク
	document.write(domain);
}
test.html
<html>
<head>
<!-- JS ファイル読み込み-->
<script src="common.js"></script>
</head>
<body>

<p>メールアドレスはこちら</p>
<p><script>setEmail_e()</script></p>

</body>
</html>

文字列 → HTML エンティティへ変換

メールアドレスなど通常の文字列をHTMLエンティティに変換するには、下記などのサイトが便利です。

ASCIIコード 

ASCIIコードは、現代のコンピュータにおいて最もよく使われている標準的な文字コードです。 半角英数字と記号を10進数の数字のみで表現することができます。

ASCIIコードで contact@peascode.com を表現すると下記になります。

99 111 110 116 97 99 116 64 112 101 97 115 99 111 100 101 46 99 111 109

ASCIIコードの場合、HTMLファイルにそのまま記述してもブラウザはただの数字として認識してしまいますので、JavaScriptのfromCharCodeメソッドを使用して元の文字列に変換してあげる必要があります。

そして今回も同様、適当なところに算数を入れ少し複雑にしておきます。ASCIIの場合は数字のみなので見やすいですね。

サンプルコード

common.js
function setEmail_a() {
	var name = String.fromCharCode(90+9,111,55*2,116,97,99,120-4); // アカウント名
	var at_symbol = String.fromCharCode((30*2)+4); // @マーク
	var domain = String.fromCharCode(114-2, 101, 97, 115, 101-2, 111, 50*2, 101, 46, 90+9, 111, 109); // ドメイン名
	document.write(name + at_symbol + domain);
}
test.html
<html>
<head>
<!-- JS ファイル読み込み-->
<script src="common.js"></script>
</head>
<body>

<p>メールアドレスはこちら</p>
<p><script>setEmail_a()</script></p>

</body>
</html>

文字列 → ASCIIコードへ変換

通常の文字列をASCIIコードに変換するには、下記などのサイトが便利です。

その他の対策例

その他、ネット上で見つけたコードを参考までに載せておきます。

正規表現で置換してmailto:リンク出力

仮設定したメルアドを正規表現で置換しmailto:リンクで出力します。ここでは、namedomain にメルアドをそのまま代入していますが、HTMLエンティティ、ASCIIコードでカモフラージュしても良いでしょう。

common.js
function setEmail_r() {
	var at_symbol = '@',
	name = 'contact', 
	domain = 'peascode.com',
	email = name + at_symbol + domain,
	res = '<a href=mailto:{{spam@cia.gov}}>{{spam@fbi.gov}}</a>'.replace(/{{.+?(}})/g, email);
        document.write(res);
}
test.html
<html>
<head>
<!-- JS ファイル読み込み-->
<script src="common.js"></script>
</head>
<body>

<p>お問い合わせは下記まで。</p>
<p><script>setEmail_r()</script></p>

</body>
</html>

メーラー起動

mailto:に設定したダミーのメルアドを、リンククリック時に差し替えします。メールアドレスは上で使用したASCIIコードを使ってカモフラージュしています。

common.js
function setEmail_href(elm) {
	var name = String.fromCharCode(55+55, 100+11, 57*2, 101, 112, 108, 121); // アカウント名
	var at_symbol = String.fromCharCode((30*2)+4); // @マーク
	var domain = String.fromCharCode(114-2, 101, 97, 115, 101-2, 111, 50*2, 101, 46, 90+9, 111, 109); // ドメイン名
	elm.setAttribute('href', 'mailto:' + name + at_symbol + domain);
}
test.html
<html>
<head>
<!-- JS ファイル読み込み-->
<script src="common.js"></script>
</head>
<body>

<p>お問い合わせは下記まで。</p>
<p><a href="mailto:test@test.com" onclick="setEmail_href(this)">メーラー起動</a></p>

</body>
</html>

シンプル is the best?

とにかくシンプル。 とりあえず1ヵ所にメーラー起動のリンクを入れておきたい場合などに便利。 “ href=” に設定した mailto: & メルアドに特定の文字列を混入させて置き、マウスオーバーで取り除く方法です。今回の例では abc を複数混入させています。

maiabclto:noabcreply@peasabccode.coabcm

test.html
<a href="maiabclto:noabcreply@peasabccode.coabcm" 
	onmouseover="this.href=this.href.replace(/abc/g,'');">メーラー起動</a>

他にもっと良い方法などあれば是非コメントで教えてください。

この記事を書いた人

日本では主にUNIXサーバーの構築、運用などに携わり、2006年に仕事を辞めてカナダに来てそのまま永住。

カナダでは、日本からカナダに留学や永住、ビジネスで渡航する人たちのサポートを行う傍ら、専門分野+趣味でもあるWeb制作、運用を継続しながら、最近では写真/動画撮影、動画制作、モーショングラフィックなど、新しい分野のスキルアップに励んでいます。

Peas Code は、僕が過去の経験の中で学んだことを、特定の分野に限定せず公開していくことを目的としています。中にはコードに見えてしまうような意味不明な僕独自の理論も含まれますが、知っていると平和になれると言う意味で、Peas(peace → peas) Code と名付けました。これが意味不明か・・・。

僕について、もうちょっと詳細を知りたいという変わった人は[About me]を見てください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です