jQueryを使ってサイトに表示するメールアドレスを収集BOTから簡易的に守る

WEBサイトにメールアドレスを記載するケースがあります。そのまま記載しても良いのですが、世の中には悪い人も居て悪い人も居てWEBページに存在するメールアドレスを収集して、そのメールアドレスリストからウィルス混在のメールとか迷惑メールとかを送ってきます。

回避する方法としては

画像に置き換えてしまう方法
メールフォームにしてしまう
jQueryを使ってメールアドレスの暗号化、複号をする

画像にしてしまっても、メールフォームにしてしまっても本来とは違った形になります。jQueryを使って暗号化したものを複号すると通常のテキストと同じ扱いで使えるのがポイントです

jQueryを使って、メールアドレスを簡易的に守る

jQueryを使ってどのように守るかというと、本来のメールアドレスに適当な文字を混入させてわからないようにします。そのメールアドレスから適当に混入させた文字を消してしまえば元のメールアドレスになるというものです。こうすることで、BOTが認識できないようにします。

今回は簡易的に行いますので混入する文字は、本来のメールアドレスに含まれていない一文字とします。

例

abc@example.com [元のメールアドレス]
akkbkc@ekxkakkmple.kcokm [kを混入させて暗号化したメールアドレス]
abc@example.com [kを取り除いた複号されたメールアドレス]

jQueryで実際に行う

まずは、変数に暗号化したメールアドレスを入れます

var mailadd = "akkbkc@ekxkakkmple.kcokm";

次に暗号化されたメールアドレスから、混入させた文字を正規表現を使って置換します、文字無しに置換すると削除したのと同じ効果になります

var mailadd_2 = mailadd.replace(/k/g,"");

複号したメールアドレスを任意のHTMLタグに書き出す。HTMLのmailtoを組み合わせると、ワンクリックでメーラーが起動できてメール作成画面を出せます。

$(".mail-contact").text(mailadd_2);
$(".mail-contact").attr("href","mailto:"+mailadd_2);

全体的なコードサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>Document</title>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
 
  <a href="" class="mail-contact"></a>
  
</body>

<script>
  $(document).ready(function(){
    var mailadd = "akkbkc@ekxkakkmple.kcokm";
    var mailadd_2 = mailadd.replace(/k/g,"");
    $(".mail-contact").text(mailadd_2);
    $(".mail-contact").attr("href","mailto:"+mailadd_2);
  });
</script>
</html>

実際にjQueryを実行したときにはこちらのDEMOのようになります(CSS足してます)

DEMO 表示

これで暗号化したメールアドレスを記入し、jQueryを使って複号化と表示を行えます。あくまでもBOT対策なので、人が見れば一目瞭然ですがWEBページで表示している時点で素のメールアドレスが見られているので特に問題は無いです