JavaScript
jQuery

一般の人にもわかる範囲でメールリンクの難読化ができないか考えた

More than 1 year has passed since last update.

背景

メールアドレスを収集されるリスクがあるとはいっても、やはりウェブサイトにはコンバージョン向上の思惑などでmailtoリンクが必要になります。
なので、通常はこのような難読化ツールのお世話になっているわけなのですが…

http://www.luft.co.jp/cgi/coding.php

CMSテーマの制作中に「クライアントが、設定画面からメールリンクのアドレスを変更できるようにしたい」という要件が出てきて悩んでしまいました。

複数行のブログカスタムフィールドを作って、その欄に先述の難読化ツールのコードを書いてもらうのは危なすぎます。
また、先述のコードは単純なメールリンクの生成なので、リンクがボタンになっていたり、メールリンクのラベルにアイコンが付いていたりという状況に対応できません。

なので、一般の人にもわかる範囲の書き方(かつ推測されにくい)で「プチ難読化」させ、それを整形する手段を考えてみました。

テーマからの出力時にbase64エンコードできるのが理想ですが、PHPが書けないCMSではできないし、IE9が非対応らしいので…

実装手順

1. ライブラリを追加

テーマ内に、以下のjQueryのライブラリを読み込みます。

mailto.js
https://gist.github.com/webbingstudio/b962ad96a0a4b6803a298e35d95ee418

2. プチ難読化したメールアドレスを入力

続いて、ブログの設定画面から、クライアントに以下の書式でメールアドレスを入力してもらいます。

(@より後の前半)***(@より前)***(@より後の後半)

メールアドレスが「info[at]example.com」なら「examp***info***le.com」となります。

3. テーマ側で出力

CMSのテーマ側で以下の通り出力させると、自動的にメールリンクに変換します。

基本的な使い方

<a href="#" class="js-mailto" data-mailto-set="(難読化したアドレス)">メールを送る</a>

hrefだけでなくテキストもメールアドレスに置き換える

<a href="#" class="js-mailto" data-mailto-set="(難読化したアドレス)" data-mailto-changetxt="true">メール</a>

span要素やtd要素にメールアドレスを出力したい場合

<span class="js-mailto" data-mailto-set="(難読化したアドレス)" data-mailto-changetxt="true">メール</span>

まとめ

すべての文字を逆順に書かせることも考えましたが、逆に見破られやすいかなと思い、3分割にしました。

メールアドレスに「***」が入っていたケースまでは流石に考慮していません。ですが、上記ライブラリは対象クラスをjs-mailto以外にしたり、セパレータを変更したりもできます。
その辺りはコードを参照ください。

そもそも最近の収集ボットって、DOM整形した後のドキュメントも拾えるのではないだろうか?
という根源的な疑問も生じています…