月刊アフタヌーン 2006年11月号, comment_captcha.rb, captcha.rb - ツッコミ投稿時に CAPTCHA による画像認証を行うプラグイン(とフィルタ)

不断の日記 (の体裁をした覚え書き) です。

2006-09-26 (Tue) [長年日記]

■ 月刊アフタヌーン 2006年11月号

通勤途中に会社近くのコンビニエンスストアにて。

Tags: 本散財 |

| Permalink

■ comment_captcha.rb, captcha.rb - ツッコミ投稿時に CAPTCHA による画像認証を行うプラグイン(とフィルタ)

というわけで、さっそく comment_captcha.rb, captcha.rb を導入。

オリジナル版はスタイルシートで画像の配置が右側になるようになっている。当然、スタイルシートを切っていると画像は右に表示されないのだが、「右の画像に書かれている文字列を入力してください」と表示されてしまう…。

というわけで、文言を修正。ついでに img 要素に alt 属性を追加するなど、ちょこちょこ修正。

--- comment_captcha.rb.orig	2006-09-26 20:00:05.888256000 +0900
+++ comment_captcha.rb	2006-09-26 20:29:57.524502400 +0900
@@ -9,7 +9,7 @@
 require 'rexml/document'
 
 def comment_captcha_label
-	'右の画像に書かれている文字列を入力してください'
+	'画像に書かれている文字列を入力してください'
 end
 
 alias :comment_body_label_orig :comment_body_label
@@ -23,14 +23,16 @@
 		secret = @conf['captcha.secret'] || ''
 		expire = (Time.now.to_i+86400).to_s
 		digest = Digest::MD5.hexdigest( code+secret+expire )
-		r << %Q[<div class="captcha-image" style="float: right"><img src="#{image}" width="100" height="50">]
-		r << %Q[<br><a href="http://www.trynt.com/" title="TRYNT Web Services">TRYNT Web Services</a> Powered]
+		r << %Q[<div class="captcha-image">]
+		r << %Q[<img class="captcha-image" src="#{image}" width="100" height="50" alt="Captcha Code"><br>]
+		r << %Q[<span class="captcha-powered"><a href="http://www.trynt.com/">TRYNT Web Services</a> Powered</span>]
 		r << %Q[</div>]
+		r << %Q[<div class="field captcha">]
 		r << comment_captcha_label
 		r << %Q[:<input class="field" name="captcha_code" value="">]
 		r << %Q[<input type="hidden" name="captcha_digest" value="#{digest}">]
 		r << %Q[<input type="hidden" name="captcha_expire" value="#{expire}">]
-		r << %Q[<br>]
+		r << %Q[</div>]
 	end
 	r << comment_body_label_orig
 end

追記

W3C Markup Validator に怒られると思ったら、 TRYNT CAPTCHA Web Service で取得できる画像の URI には「&」が含まれているのか…。

img 要素に食わせる前に「&」→「&」にエスケープしなさいってことなんだけど………どうすればいいんだろう?(^^;;

追記(2)

解決。

「Ruby レシピブック 268の技」の376ページ「236 : HTML をエスケープする/エスケープを外す」によると、 cgi ライブラリの CGI.escapeHTML を使うことで、「<」, 「>」, 「&」, 「"」を、それぞれ「<」, 「>」, 「&」, 「"」に変換することができるとあった。

というわけで、パッチのさらにパッチ。

--- comment_captcha.rb.old	2006-09-26 20:29:57.524502400 +0900
+++ comment_captcha.rb	2006-09-26 21:51:00.256768000 +0900
@@ -7,6 +7,7 @@
 require 'digest/md5'
 require 'open-uri'
 require 'rexml/document'
+require 'cgi'
 
 def comment_captcha_label
 	'画像に書かれている文字列を入力してください'
@@ -20,11 +21,12 @@
 	if doc then
 		code = doc.elements['captcha_code'].text
 		image = doc.elements['captcha_image'].text
+		enc_image = CGI.escapeHTML(image)
 		secret = @conf['captcha.secret'] || ''
 		expire = (Time.now.to_i+86400).to_s
 		digest = Digest::MD5.hexdigest( code+secret+expire )
 		r << %Q[<div class="captcha-image">]
-		r << %Q[<img class="captcha-image" src="#{image}" width="100" height="50" alt="Captcha Code"><br>]
+		r << %Q[<img class="captcha-image" src="#{enc_image}" width="100" height="50" alt="Captcha Code"><br>]
 		r << %Q[<span class="captcha-powered"><a href="http://www.trynt.com/">TRYNT Web Services</a> Powered</span>]
 		r << %Q[</div>]
 		r << %Q[<div class="field captcha">]