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

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

従来の方法

一部／全部を画像にする
@ を（ａ）など他の文字や記号で置き換える
CSS の疑似要素で @ を追加する

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

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

コンテンツ

HTML エンティティ

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

よく使用されているものとしては、<（<）、>（>）、&（&）、 （半角スペース）などが挙げられます。

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

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コードに変換するには、下記などのサイトが便利です。

Convert Text to ASCII（カンマ区切りで出力）
CRYPTII（スペース区切りで出力）

その他の対策例

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

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

仮設定したメルアドを正規表現で置換しmailto:リンクで出力します。ここでは、name と domain にメルアドをそのまま代入していますが、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？

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

maiabclto:noabcreply@peasabccode.coabcm

test.html

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

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