前回の記事で、Base64を使用しない簡易的な方法を書いてしまったので、Base64でencodeした方法を試した結果を書きます。
ご指摘いただきありがとうございました。
[HTML]
該当部分だけ書いています。
index.html
<!-- shortcut all above -->
<body>
<div class="mail">
<a href="" id="mail"><i class="fa fa-envelope-o fa-5x" aria-hidden="true"></i></a>
</div>
<!-- shortcut all <script> -->
</body>
</html>
[jQuery]
Base64でencodeをあらかじめ行ったメールアドレスを書く。
main.js
$(function () {
$("#mail").click(function () {
var iAmComplicated = function () { return atob('aGVsbG9Ad29ybGQuY29t') }; // encodeしたメールアドレス
$(this).attr("href", 'mailto:' + iAmComplicated());
$(this).hide(iAmComplicated());
$(this).show('.fa-envelope-o');
$(this).off("click");
preventDefault();
});
});
[ここで実装できたこと]
- メールアドレスをBOTと人の両方から解読が難しいものにすることができた
- メーラーも起動する
- encodeしたアドレスが、起動したメーラーではdecodeされている
当たり前のことですが、明らかにBase64を使用する方法が賢明だとわかりました。助言をいただいて気づくことができ、とても勉強になりましたので、こちらの記事もご指摘がありましたらよろしくお願いします。
[encodeの方法]
以下の参考記事で試してみました。
- developer tool の console を開く
- console に console.log(btoa('xxx@mail.com')); と記入（encode したいメールアドレスが xxx@mail.com の場合）
- encode された結果が表示される
参考記事:
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa
http://jhirniak.github.io/post/hiding_email_with_jquery/