Help us understand the problem. What is going on with this article?

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

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整形した後のドキュメントも拾えるのではないだろうか?
という根源的な疑問も生じています…

webbingstudio@github
フリーランスのWebエンジニアです。HTML5/CSS3/jQuery/PHP/Movable Type/WordPress/a-blog cms/baserCMS
https://webbingstudio.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした