Securimageの3.Xから4.Xへのバージョンアップを試みる

Securimage 3.2RC3を使用していて、現在の最新版4.0.2へアップグレードを試験してみた。

https://github.com/dapphp/securimage

というのは、PHPのバージョンを7.4から8.Xへ上げるためである。

サンプルのexample_form.phpを見ると、HTML出力用の getCaptchaHtml というstatic functionができて、簡単に使うにはそれだけ記述すれば良さそうだ。

4.0.2での記述

      echo "<div id='captcha_container_1'>\n";
      echo Securimage::getCaptchaHtml($options);
      echo "\n</div>\n";

この記述だけで、文字列、再生ボタン、再表示ボタン、文字入力テキストフィールドが生成される。
展開されたHTMLの中身は下記のような感じ

<div id='captcha_container_1'>
<img style="float: left; padding-right: 5px" id="captcha_image" src="/securimage/securimage_show.php?id=5a8bbfe3b4c78c615754356f335fdea831d7f97c&amp;amp;" alt="CAPTCHA Image" /><div id="captcha_image_audio_div">
<audio id="captcha_image_audio" preload="none" style="display: none">
<source id="captcha_image_source_wav" src="/securimage/securimage_play.php?id=5a8bbfe3b4c78c615754356f335fdea831d7f97c" type="audio/wav">
</audio>
</div>
<div id="captcha_image_audio_controls">
<a tabindex="-1" class="captcha_play_button" href="/securimage/securimage_play.php?id=5a8bbfe3b4c78c615754356f335fdea831d7f97c" onclick="return false">
<img class="captcha_play_image" height="32" width="32" src="/securimage/images/audio_icon.png" alt="Play CAPTCHA Audio" style="border: 0px">
<img class="captcha_loading_image rotating" height="32" width="32" src="/securimage/images/loading.png" alt="Loading audio" style="display: none">
</a>
<noscript>Enable Javascript for audio controls</noscript>
</div>
<script type="text/javascript" src="/securimage/securimage.js"></script>
<script type="text/javascript">captcha_image_audioObj = new SecurimageAudio({ audioElement: 'captcha_image_audio', controlsElement: 'captcha_image_audio_controls' });</script>
<a tabindex="-1" style="border: 0" href="#" title="Refresh Image" onclick="securimageRefreshCaptcha('captcha_image', 'captcha_image_audioObj'); this.blur(); return false"><img height="32" width="32" src="/securimage/images/refresh.png" alt="Refresh Image" onclick="this.blur()" style="border: 0px; vertical-align: bottom"></a><br /><div style="clear: both"></div><label for="captcha_code">Type the text:</label> <input type="text" name="captcha_code" id="captcha_code" autocomplete="off" required="1" ><input type="hidden" id="captcha_image_captcha_id" name="captcha_id" value="5a8bbfe3b4c78c615754356f335fdea831d7f97c">
</div>

3.2RC3でのexample_form.php記述↓と比較してみると、

  <p>
    <img id="siimage" style="border: 1px solid #000; margin-right: 15px" src="./securimage_show.php?sid=<?php echo md5(uniqid()) ?>" alt="CAPTCHA Image" align="left" />
    <object type="application/x-shockwave-flash" data="./securimage_play.swf?bgcol=#ffffff&amp;icon_file=./images/audio_icon.png&amp;audio_file=./securimage_play.php" height="32" width="32">
    <param name="movie" value="./securimage_play.swf?bgcol=#ffffff&amp;icon_file=./images/audio_icon.png&amp;audio_file=./securimage_play.php" />
    </object>
    &nbsp;
    <a tabindex="-1" style="border-style: none;" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = './securimage_show.php?sid=' + Math.random(); this.blur(); return false"><img src="./images/refresh.png" alt="Reload Image" height="32" width="32" onclick="this.blur()" align="bottom" border="0" /></a><br />
    <strong>Enter Code*:</strong><br />
     <?php echo @$_SESSION['ctform']['captcha_error'] ?>
    <input type="text" name="ct_captcha" size="12" maxlength="8" />
  </p>

昔はフラッシュの利用を想定していたこと、音の再生と文字列変更がJavaScriptになったこと、securimage_show.phpのGETパラメータがsidからidになったことなどが異なる点か。

ということで、getCaptchaHtml が使えると楽なことはわかったが、デザイン的にHTMLを手で書きたい、特に今回は既存フォームの移行であり、getCaptchaHtmlを使わずにどうするかを考えた。
基本的には展開後のHTMLに相当するものを出せば良いわけだ。

PHP＋HTML記述例）

<?php
	$set_captcha_id = md5(uniqid());
?>
<img id="captcha_image" src="./securimage_render.php?id=<?php echo $set_captcha_id; ?>" alt="CAPTCHA Image">

<div id="captcha_image_audio_div">
<audio id="captcha_image_audio" preload="none" style="display: none">
<source id="captcha_image_source_wav" src="/securimage/securimage_play.php?id=<?php echo $set_captcha_id; ?>" type="audio/wav">
</audio>
</div>

<div id="captcha_image_audio_controls">
<a class="captcha_play_button" href="/securimage/securimage_play.php?id=<?php echo $set_captcha_id; ?>" onclick="return false">
【音を聞く】]</a>
</div>

<script type="text/javascript" src="/securimage/securimage.js"></script>
<script type="text/javascript">captcha_image_audioObj = new SecurimageAudio({ audioElement: 'captcha_image_audio', controlsElement: 'captcha_image_audio_controls' });</script>

<div>
<a href="#" onclick="securimageRefreshCaptcha('captcha_image', 'captcha_image_audioObj'); this.blur(); return false" class="link">【画像を変更】</a>
</div>

<input type="text" name="captcha_code">
<input type="hidden" name="captcha_id" id="captcha_image_captcha_id" value="<?php echo $set_captcha_id; ?>">

音声再生ボタンと、画像変更ボタンはテキストを想定した。

なお、PHP 8.3.10で試験をしたところ、Deprecated: が出た。

Deprecated: Creation of dynamic property Securimage::$code_entered is deprecated in <path>/securimage/securimage.php on line 1028

Deprecated: Creation of dynamic property Securimage::$correct_code is deprecated in <path>/securimage/securimage.php on line 1029

未定義プロパティへの代入として怒られた。
securimage.phpの適切な位置に宣言を入れておくことにした。

    private $code_entered;
    private $correct_code;