JavaScript と jQuery で、メーラー起動 & アドレスを収集BOTから簡易的に守る実装
[はじめに]
忘れないうちにメモで残しておくためにも書いています。
まだ勉強し始めて半年未満ですので、ご指摘等ありましたらよろしくお願いします。
簡易的にBOTから守る方法ということも改めて踏まえて読んでいただければ幸いです。
（追記: 記事を投稿後、Base64でエンコードする方が良いとアドバイスをいただきましたので、今回の記事はBase64を使用しない場合とします。）
アイコンをクリックするとメーラーが起動するようにしたかったので、色々記事を調べてみて自分なりに書き換えて実装。
収集BOTからも、メールアドレスを認識されないようにしたかったので、試してみた。
[変数に暗号化したメールアドレスを設定]
繰り返しますが、BOTに認識されないレベルの簡易的な実装です。
まず、メールアドレスに含まれていない１文字を含めて暗号化。
var mail_address = 'szzazmzzplzzzez@szazzmzpzzzlze.zzcozmz';
[暗号化されたメールアドレスから、暗号化のために含めた文字を消して置換]
var mail_address2 = mail_address.replace(/z/g,'');
[メールに記入する情報を格納する変数の用意]
メーラーを起動させた時に、メールにあらかじめタイトルや本文に何か記入させておくための変数。
var mail_address2, subject, body, hiddenData;
var sendmail = document.getElementById('mail');
[アイコンをクリックした時のonclickイベントハンドラ]
$('.mail-contact').attr('href','mailto:' + mail_address2 + '?subject=' + subject + '&body=' + body);
ここの部分でメーラー起動 & メールに記入する情報を格納する変数を実行。
メールにあらかじめ記入しておきたい内容（タイトルと本文）をhiddenタグから取得。
sendmail.onclick = function() {
hiddenData = document.getElementById('hidden_data').value;
address = mail_address2;
subject = 'title';
body = 'contents' + hiddenData;
$('.mail-contact').hide(mail_address2);
$('.mail-contact').show('.fa-envelope-o');
$('.mail-contact').attr('href','mailto:' + mail_address2 + '?subject=' + subject + '&body=' + body);
};
[main.jsの上記全てを含めて書いた最終的なコード]
$(document).ready(function() {
var mail_address = 'szzazmzzplzzzez@szazzmzpzzzlze.zzcozmz';
var mail_address2 = mail_address.replace(/z/g,'');
var mail_address2, subject, body, hiddenData;
var sendmail = document.getElementById('mail');
sendmail.onclick = function() {
hiddenData = document.getElementById('hidden_data').value;
address = mail_address2;
subject = 'title';
body = 'contents' + hiddenData;
$('.mail-contact').hide(mail_address2);
$('.mail-contact').show('.fa-envelope-o');
$('.mail-contact').attr('href','mailto:' + mail_address2 + '?subject=' + subject + '&body=' + body);
};
});
[main.jsに対応するHTML]
対応する部分のみ記載しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>send emails</title>
<!-- external libraries -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="mail">
<input type='hidden' id='hidden_data' value=''>
<a href="" id="mail" class="mail-contact"><i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i></a>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- main.js -->
<script src="../main.js"></script>
</body>
</html>
[実装してできる機能]
- メーラーがアイコンがクリックされると起動する
- BOTにmain.jsで暗号化されたメールアドレスを認識されることを防ぐ
- メーラーが起動すると、暗号化されたメールアドレスが元の暗号化前の正しいアドレスで、送信先に設定されている
- メール本文とタイトルにあらかじめmain.jsで設定した内容が記入されている
引用記事
http://rukiadia.hatenablog.jp/entry/2014/02/19/132445
http://9-bb.com/jquery-6/