2017年01月03日

ロボットによるメールアドレス収集への対策

 スパムメールの対策を見直してみました。

antispam01.png


 従来は、上のように「エンティティ」を利用してきました。

 WEBページに掲載したメールアドレスをロボットに収集され、スパムメールを送りつけられるのは嫌ですから、対策は講じてきましたが、自分のメールアドレスならば、メールサーバーやメーラーでスパムを減少させられますが、依頼されて掲載した自分以外の人のメールアドレスについては、とにかく「知られないこと」が第一です。
 そのためには、すでにエンティティも不十分な気がしてきて、変更をすることにしました。

 参考にさせてもらったのは、こちらのページです。
https://allabout.co.jp/gm/gc/23933/7/
 要するにフォームとJavaScriptを使った対策です。

 この通りにすると、こんな感じになります。

@

(ブログのセキュリティのためか、JavaScript部分が実行されず、ボタンをクリックしても変化が起きません。以下同じ。)

<form name="fm">
<input type="text" name="e1" value="webmaster2012" onfocus="this.select();">
@
<input type="text" name="e2" value="qp.jpn.org" onfocus="this.select();">
<script type="text/javascript">

function ms() {
location.href = "mailto:" + document.fm.e1.value + "@" + document.fm.e2.value;
}
</script>
<input type="button" value="メーラで送信" onclick="ms();">
</form>


 気になるのは、
1 本来、入力するための箇所ではないのにテキスト入力の枠が2つ見えている
2 @の前に空白ができていること
です。そこで、
1 枠をスタイルシートで非表示にする
2 同じくスタイルシートで、@の前は右寄せにする
 ついでに(必須ではありませんが)
3 背景色を指定して、前半・@・後半の一体感を示す
を指定してみます。

@


 ソースです。

<form name="fm">
<div align="center" style="background-color:#FFC; padding:0.5em 0em 0.1em 0em; margin-bottom:0.5em;">
<input type="text" name="e1" value="webmaster2012" onfocus="this.select();" style="text-align:right; background-color:#ffc; border:none;">
@
<input type="text" name="e2" value="qp.jpn.org" onfocus="this.select();" style="text-align:left; background-color:#ffc; border:none;">
</div>
<script type="text/javascript">

function ms() {
location.href = "mailto:" + document.fm.e1.value + "@" + document.fm.e2.value;
}
</script>
<input type="button" value="メーラで送信" onclick="ms();">
</form>


 このformを使う表示方法の欠点は、
4 もしもtext欄に何かを書き込んでしまうと、送信ボタンをクリックしたときに、メールアドレスが書き換えられてしまう
ということです。

 そこで
4 表示用のinputエリアに加えて、ユーザーが手を加えられないhidden属性を与えた送信用inputエリアを、@の前後に加え、そちらを送信データとする
5 せっかく「表示用のアドレスと実際の送信内容を別にする」という仕様なので、送信アドレスには、メールの件名も追加する
ことにしました。

@

(↑外見は変わりません。)

 この際、表示用専用のinputエリアの名前は元のe1/e2のままでは送信用inputエリアの名前と重複してしまうので、それぞれe3/e4と変更します。

<form name="fm">
<div align="center" style="background-color:#FFC; padding:0.5em 0em 0.1em 0em; margin-bottom:0.5em;">
<input type="hidden" name="e1" value="webmaster2012">
<input type="text" name="e3" value="webmaster2012" onfocus="this.select();" style="text-align:right; background-color:#ffc; border:none;">
@
<input type="hidden" name="e2" value="qp.jpn.org?subject=管理人への問合せ">
<input type="text" name="e4" value="qp.jpn.org" onfocus="this.select();" style="text-align:left; background-color:#ffc; border:none;">
</div>
<script type="text/javascript">

function ms() {
location.href = "mailto:" + document.fm.e1.value + "@" + document.fm.e2.value;
}
</script>
<input type="button" value="メーラで送信" onclick="ms();">
</form>


 さらに実際にはボタンが味気ないので、ボタンの背景に意図したアイコン画像を背景としました。
 また、わざわざメールアドレスを3回に分けてコピーして使う人がいては申し訳ないので、ボタンの機能が分かりやすいように、tooltipによる表示を加えました。


posted by kewpie at 01:46| Comment(0) | TrackBack(0) | パソコン
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/178259204
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。