1,482 views

この記事は最終更新から 2240日 が経過しています。

前回の (29) WordPressで独自ログインパラメータを追加する では、WordPressのログイン画面にスパム対策のための独自の認証項目を追加した。

しかし…
HTMLファイル中に認証コードが書かれているため、簡単な構文解析プログラムで自動入力されてしまう。
とっても美しいテキストのため、MNIST用程度の簡単な画像認識プログラムでも高確率で当てられてしまう。

バレにくい認証コードにするには、やはり汚画像化するしかない。

ということで、同プラグインを改造し、数値文字列の代わりに数値画像を表示させてみる。
本当は Imagickでいろいろと画像を見づらく汚したかったのだが、このブログを設置している共有サーバーでは Imagickが使えないため、GDでがんばってみる。

■プログラム

今回はワードプレス的には何も新しいことをしていない。
数値文字列表示個所を画像に変えただけだ。

proc_add_login_field

  public function proc_add_login_field() {
    $my_path = plugins_url('gen_img.php',__FILE__);
echo <<< EOM
<p style="text-align:center"><img src="{$my_path}"></p>
<input type="text" name="add_sec_code" class="input" value="" />
EOM;
  }

gen_img.php

一生懸命に画像を汚してみたが、まだまだ汚し足りないと思う…

<?php
  session_start();
  $_SESSION['MySecurityLoginOTT'] = $ott = sprintf("%04d", rand(0,9999));
  $w = 40;
  $h = 40;
  $nlen = strlen($ott);
  $w_all = $w * $nlen;
  $ary_im = array();
  for($i=0 ; $i < $nlen ; $i++){
    $im  = imageCreateTrueColor($w, $h);
    $black = ImageColorAllocate ($im, 0, 0, 0);
    ImageColorTransparent($im, $black);
    imageFill($im, 0, 0, $black);
    $col = imagecolorallocate($im, rand(128,255), rand(128,255), rand(128,255));
    $c = substr($ott, $i, 1);
    imagechar($im, rand(4,5), 0, 0, $c, $col);
    $ary_im[$i] = $im;
  }
  $im = imageCreateTrueColor($w_all, $h);
  $gray = ImageColorAllocate ($im, 96, 96, 96);
  $black = ImageColorAllocate ($im, 0, 0, 0);
  imageFill($im, 0, 0, $gray);
  ImageColorTransparent($im, $black);
  $x = 0;
  $y = 0;
  for($i=0 ; $i < $nlen ; $i++){
    $pos_x = $x + rand(0,floor($w/2));
    $pos_y = rand(0,floor($h/5));
    imagecopy($im , $ary_im[$i], $pos_x, $pos_y, 0, 0, $w, $h);
    $x += $w;
  }
  $new_w = floor($w_all * 4/3);
  $new_h = floor($h * 4/3);
  $im2 = imageCreateTrueColor($new_w, $new_h);
  imagecopyresized($im2, $im, 0, 0, 0, 0, $new_w, $new_h, $w_all, $h);
  for($i=0; $i < 1500 ; $i++){
    $pos_x = rand(0, $new_w);
    $pos_y = rand(0, $new_h);
    $col = imagecolorallocate($im2, rand(128,255), rand(128,255), rand(128,255));
    imagesetpixel($im2, $pos_x, $pos_y, $col);
  }
  header('Content-type: image/png');
  imagepng($im2);
?>

テキストと比べてだいぶ見づらくなっただろうか？

前回の (29) WordPressで独自ログインパラメータを追加する との大きな違いは以下の2点だ。
1) HTMLファイル中に認証コードが埋め込まれている or not
2) 認証コードがテキスト or 画像

今後は…

幾何学模様などを混ぜ込んで、さらに画像を見づらくする。