メールアドレスをBase64でエンコードして、jQueryで実装 #jQuery

前回の記事で、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の方法]

以下の参考記事で試してみました。
1. developer tool の console を開く
2. console に console.log(btoa('xxx@mail.com')); と記入（encode したいメールアドレスが xxx@mail.com の場合）
3. encode された結果が表示される

参考記事:
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa
http://jhirniak.github.io/post/hiding_email_with_jquery/