mailtoでメールアドレスにリンクを貼る際にスパム対策をする
メールフォームを使わずmailtoを使って直接メールを受け付けるということもたまにあると思うんですが、mailtoでだとメールアドレスを直接記述することになるのでスパムメールが山程届くことになります。
私もとあるサイトでメールアドレスをmailtoで公開していたんですが、案の定スパムが毎日届きます。
ほったらかしにしてたんですが、毎日毎日届くのもいい加減うんざりしてきて何か対策をと考えて思いついた方法を試したところ、ぱったりこなくなったのでここで紹介してみようと思います。
普通にmailto
まずは普通にmailtoで書くとこんな感じ。
<a href="mailto:mail@test.com">mail@test.com</a>
となります。
対策をする
考え方はすごくシンプルでhrefにアドレスは直接書かずにjQueryで後から整形します。
//html
<a href="mail+test.com" class="mto"><i>mail</i>test.com</a>
//jQuery
$( '.mto' ).click( function() {
var address = $( this ).attr( 'href' ).replace( '+', '@' );
location.href = 'mailto:' + address;
return false;
});
//css
.mto i {
font-style:normal;
}
.mto i:after {
content:'@';
}
デモ
要素の検証でソース見てみてください。
html
まずhtmlにはアドレスを直接書かずアドレス+ドメインという風に@マークを+に変えたものを設定しておきます。
aタグにはクラスmtoを付与し、テキストはアドレス部分をiタグでくくっておきます。
これでhtmlソースからはメールアドレスをメールアドレスとして認識できなくなります。
jQuery
クラスmtoが付いたリンクがクリックされると、hrefの値を取得し、+を@に変換します。
その後、mailto:を付け加えたリンク先にリンクさせます。
jsのlocation.hrefはmailtoにも有効なんですね。
css
クラスmtoが付いたリンク内のiタグに「@」マークを足します。
これで見かけ上はメールアドレスになります。
これでメールアドレス隠蔽の上、mailtoを機能させることができます。
件名・本文を加える
mailtoは件名や本文も予め指定できるので、それにも対応できるようにしました。
//html
<a href="mail+test.com" data-subject="件名" data-body="本文本文" class="mto"><i>mail</i>test.com</a>
//jQuery
$( '.mto' ).click( function() {
var address = $( this ).attr( 'href' ).replace( '+', '@' );
var subject = $( this ).data( 'subject' );
var body = $( this ).data( 'body' );
var obj = {};
if( subject ) {
obj['subject'] = subject;
}
if( body ) {
obj['body'] = body + '\n';
}
var prm = ( Object.keys( obj ).length ) ? '?' + $.param( obj ) : '';
location.href = 'mailto:' + address + prm;
return false;
});
デモ
要素の検証でソース見てみてください。
jQuery
件名と本文をそれぞれdata-subject、data-bodyとし、aタグに設定します。
まずはそれぞれの値を取得し、あれば変数objに格納していきます。
bodyを格納する際に改行コード「\n」を足しているのは、こうしないと本文の一行目に改行がはいっちゃうんですよね。
次にobjが空でなければ$.paramでURLパラメータ化して変数prmに入れます。
なければ空の文字列を返しておきます。
$.paramはそれぞれの値を「&」でつないで文字をURLエンコードしてくれます。
その際に頭に「?」を付けておきます。
結果：
?subject=%E4%BB%B6%E5%90%8D&body=%E6%9C%AC%E6%96%87%E6%9C%AC%E6%96%87%0A
こうなります。
最後にメールアドレスの後に作成したパラメーターをつけれやればOK！
件名・本文がなければ空にしておけば大丈夫です。
こんな感じでスパム対策してみました。
私の場合、この方法でぱったり止まったので効果はあると思います。
まだ数日なので本当のところどうなのかはわかりませんが…
スパムで困ってる方はとりあえず試してみてください。
