JavaScript製のCAPTCHAで簡単スパム対策
画像認証スクリプト「Jcap.js」の紹介と修正版のダウンロード
サイトにメッセージフォームを設置
このサイトを作って２週間ちょっと経ちましたが、この度はサイトにお問い合わせフォームを設置してみました。このフォームはHTMLとJavaScriptだけで出来ていて、送信したメッセージはGoogleフォームに届くようになっています。
せっかくフォームを作ったら、やっぱりスパム対策に何か欲しいと思いますよね。最初はGoogleのreCAPTCHAを使おうかと思ったんですけど、ページが重くなるのが嫌でやめました。そこで色々と探した結果、JavaScript製で軽量な画像認証スクリプトを見つけたので、それを使ってお問い合わせフォームを設置してみたというわけです。
この記事では備忘録も兼ねて、私のやったことを書いておきます。
概要
Jcap.js
JavaScript製でHTMLに簡単なCAPTCHA（画像認証）を埋め込むことができる。最終更新日が2008年で公式サイトも既に消滅しているが、動作が軽いのでサイトの負荷にならないのが良い。スパム対策にどれほどの効果があるのか不明だが、とりあえず軽量なCAPTCHAが欲しければ選択肢に入れる価値はありそうだ。
公式サイト跡地（InternetArchive）
サンプル
後述する問題点を修正したバージョンをコメント欄で使用していますので試してみてください。
問題点（解決済み）
上記の公式サイト跡地から「jcap.zip」をダウンロードして使ってみたところ、問題点を２つ見つけました。
1. ブラウザのJavaScriptを無効にすると認証なしで普通に通過する
これはマズいですよね。JavaScriptが無効になっている状態で「送信」ボタンをクリックしたら、入力が間違っていても普通に通過しちゃいました（笑）とりあえずこれは、JavaScript無効時は送信ボタンを非表示にすることで解決しました。
2. document.write() が使われている
現在ではJavaScriptのdocument.write()を使うことは非推奨とされているみたいです。理由はよくわかりませんが、GoogleのPageSpeed Insightsでそのタグは使うなと言われたので、これも修正しました。色々調べた結果、document.currentScript.insertAdjacentHTMLに書き換えることで解決しました。
修正版のダウンロード
上記の問題点を私が修正したファイルがあるので参考にしてください。
修正箇所
jcap.js
- 88行目：
document.writeをdocument.currentScript.insertAdjacentHTMLに１行で書き換え。同じ行に<input>タグを追加。 - 97行目 認証が通った場合、送信ボタンを二度押せないようにした。
- 98行目 こちらの記事で紹介しているコメント欄にJcapを付ける方法に対応
- 101行目：エラーメッセージを日本語に変更。
おまけで動作サンプルsample.htmlも付けました。
使い方
簡単です。
md5.jsとjcap.jsを読み込んで、普通にフォームを設置するだけです。
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="jcap.js"></script>
<form action="javascript:alert('正解です！');" method="get" onsubmit="return jcap();">
<script type="text/javascript">sjcap();</script>
<noscript><p>JavaScriptを有効にしてください。</p></noscript>
</form>
ポイントは、<form>タグの中にonsubmit="return jcap();"を書くこと。
<script type="text/javascript">sjcap();</script>で認証画像・入力フォーム・送信ボタンの３つが表示されます。
また、サイトに設置する時はjcap.jsの11行目、
var imgdir = "cimg/"; // identify directory where captcha images are located
これの “cimg/” の部分を認証画像が入っているディレクトリに書き換えてください。そのままだと画像が正しく表示されない可能性があります。
以上です。
関連記事:
コメント
※コメントは管理人の承認後に反映されます。