WEBサイトにメールアドレスを素のままで記載するとSPAMメールのアドレス収集ロボットに集められてしまうので色々と工夫しますよね。
迷惑メールが増えてしまうと大事なメールを見落としていまう確率があがってしまいます。
対策してよくあるのは
・＠マークを全角にする
・＠マークをHTMLエンティティ化（【@】にする）
・メールアドレス自体を画像にして表示する
どれも利用者に不便をかけたり、煩わしかったりします。
画像以外はクローラーが対策をすれば収集するのは簡単ですしね。
『クリックしたときにメールソフトを起動させてすぐにメールが送れるようにしたい。しかも、あんまり複雑にしたくない。』
そんな場合にJavaScriptを使ってサイトソースにメールアドレスを残さない方法です。
【用意するもの】
・jQuery
普通にJavaScriptだけでもできますが、他の部分の処理をjQuery使っているのにここだけ記述が違うのもメンテナンスが悪いので
・メールアドレスをbase64に変換
今回の仕組みはbase64にした値を元にメールアドレスを戻して表示します
【記述】
メールアドレス例：(わざと大文字化と半角スペースを空けています)
test-info ＠ exsample.com
base64形式にエンコード後：
dGVzdC1pbmZvIEAgZXhzYW1wbGUuY29t
[HTML]
|
1 2 3 4 |
<!-- <a id="obfuscate-address" href="#" data-obfuscatekey="ここにbase64化した文字列を入れる"></a> --> <a id="obfuscate-address" href="#" data-obfuscatekey="dGVzdC1pbmZvIEAgZXhzYW1wbGUuY29t"></a> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(window).on('load', function() { "use strict"; var obfuscate = "#obfuscate-address"; if($(obfuscate).length){ var obfuscateStr = $(obfuscate).data('obfuscatekey'); $(obfuscate).attr("href", atob("bWFpbHRvOg==") + atob(obfuscateStr)); $(obfuscate).html(atob(obfuscateStr)); } }); /* if($(obfuscate).length){} の記述は要素がないときにJavaSciptがエラーを起こさないようにするために要素の有無をチェックした上で動作するようにしています。 */ |
メールアドレスを表示させるアンカータグの記述にあるdata属性(data-obfuscatekey)にbase64形式にエンコードしたアドレスを入れます。
JavaScriptで該当の要素にあるdata属性(data-obfuscatekey)の値を取得して、atob関数でbase64形式でエンコードされたデータの文字列をデコードします。
”bWFpbHRvOg==”という文字列をデコードすると”mailto:”となっているので、アンカータグ内のリンク先がattr関数で”mailto:test-info @ exsample.com”と置き換えられます。
最後にリンクテキストにデコードしたメールアドレスを書き換えています。
ソースコードを見てもbase64形式にエンコードされた文字列しか残っていませんのでクローラーもメールアドレスとは判別するのは難しいでしょう。
data属性の値をデコードしてメールアドレス形式だったら収集するクローラーが出てくる可能性もあります。
より複雑にしたい場合はメールアドレスを分割し、data属性を複数持たせておいてデコードしたものを繋ぎ合わせればいいだけです。