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

mail-jquery
このエントリーをはてなブックマークに追加
PR

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

 

回避する方法としては

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

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

 

 

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

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

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

 

  1. abc@example.com [元のメールアドレス]
  2. akkbkc@ekxkakkmple.kcokm [kを混入させて暗号化したメールアドレス]
  3. 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ページで表示している時点で素のメールアドレスが見られているので特に問題は無いです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)