ログイン画面のHTMLフォームとPHPプログラムの一部を解析してみた

コメントする / エキスパート講師, ブログ / By

今月のミニセミナーでは、「PHPでWebアプリケーションを構築するのに必要な基礎知識を利⽤してプログラムを作成する」具体的な例がいくつか紹介されました。実は、WordPressもHTMLフォームを使ってユーザーからデータを受け取り、PHPでそのデータを処理する場面が多々あります。その中でも、私たちがよく利用するのがWordPressのログインフォームです。そこで、今回はログイン画面のHTMLフォームとPHPプログラムの一部を詳しく解析していきます。

ユーザー情報の入力

WordPressのログイン画面を開発者ツールで確認すると、form要素が使われていることに気づきます。

<form name="loginform" id="loginform" action="https://example.com/wp-login.php" method="post">

このコードから分かることは、以下の２点です。

  1. フォームデータがPOSTメソッドを使ってサーバーに送られる
  2. wp-login.phpがそのデータを受け取って処理する

このフォームに含まれる「ユーザー名またはメールアドレス」のフィールドを見てみましょう。

<label for="user_login">ユーザー名またはメールアドレス</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" autocapitalize="off" autocomplete="username" required="required">

このコードで注目してほしいポイントは、inputタグのname属性とvalue属性です。なぜなら、フォームデータは「name=value」の形式でサーバーに送られるからです。たとえば、ユーザーが「user123」と入力した場合、下記のようなデータがサーバーに送信されます。

log=user123

POSTメソッドを使うと、データはHTTPリクエストのボディ部分に含まれて送信されます。そのため、HTTPプロトコルがセキュアでない場合、通信内容が第三者に傍受される可能性があります。このような理由から、ログイン情報を含むデータ送信では、HTTPSを使用することが推奨されています。

POSTされたデータは、ブラウザの開発者ツールで確認できます。

  1. 開発者ツールを開く
  2. Networkタブを選択
  3. Nameタブからフォームが設置されているページのURLを選択
  4. Headersタブでリクエストヘッダーを確認
  5. Payloadタブで送信データを確認

ログインフォームの出力

多くの方がWordPressの管理画面を開く際、https://example.com/wp-adminにアクセスしますが、これはログイン後の管理画面のURLです。ログインしていない場合は、https://example.com/wp-login.phpにリダイレクトされ、ログイン画面が表示されます。

WordPressはオープンソースのソフトウェアなので、GitHubなどでwp-login.phpの内容を確認することができます。一般公開されているWordPress6.7のwp-login.phpをみていきましょう。ファイル内で「loginform」というIDが使われている箇所を探すと、目当てのform要素が見つかります。以下のコードはファイルの1511行目から始まります。

<form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
	<p>
		<label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
		<input type="text" name="log" id="user_login"<?php echo $aria_describedby; ?> class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" autocomplete="username" required="required" />
	</p>

このコードで注目してほしいポイントは、以下の通りです。

  • URLのエスケープ処理：esc_url()関数を使ってXSS（クロスサイトスクリプティング）対策が施されています。
  • HTML属性のエスケープ：esc_attr()関数を使ってHTMLの属性に挿入する値がエスケープされています。
  • サイトのURLを動的に取得：site_url()関数を使ってWordPressアプリケーションファイルが保存されている現在のサイトのURLを取得しています。
  • 翻訳対応：_e()関数は国際化に対応するためのもので、表示テキストを翻訳可能にしています。

フォームデータの受け取りと処理

フォームからPOSTメソッドを使用して送信されたデータは、PHPの$_POSTという変数に格納されます。この変数は、送信されたデータをkeyとvalueの組み合わせで保存する連想配列です。「ユーザー名またはメールアドレス」は、inputタグのname属性が「log」であるため、その値は$_POST[‘log’]を使って取得できます。以下のコードは、ファイルの1491～1493行目にあります。

if ( isset( $_POST['log'] ) ) {
	$user_login = ( 'incorrect_password' === $errors->get_error_code() || 'empty_password' === $errors->get_error_code() ) ? wp_unslash( $_POST['log'] ) : '';
}

このコードが何をしているのか、詳しくみてみましょう。

  1. POSTデータの存在を確認
    • isset( $_POST['log'] )は、$_POST['log']が送信されたかを確認します。
  1. エラーの確認
    • $errors->get_error_code()でエラーコードを取得しています。
    • 「incorrect_password」はパスワードが間違っている場合、「empty_password」はパスワードが空の場合に返されるエラーコードです。
  1. 値の代入
    • 間違ったパスワードまたは空のパスワードの場合、wp_unslash( $_POST['log'] )が呼ばれます。これは、スラッシュを削除して元の値を取得する関数です。
    • それ以外の場合は、空文字が代入されます。

この$user_loginという変数は、inputタグのvalue属性としてログイン画面に表示されます。

value="<?php echo esc_attr( $user_login ); ?>"

これにより、パスワードが間違っている場合またはパスワードが空の場合、入力した「ユーザー名またはメールアドレス」がフォームに再表示されます。

まとめ

HTMLフォームとPHPの連携は、Webアプリケーション開発の基本的な仕組みです。フォームデータの送信方法、PHPでの処理、そしてセキュリティ対策の重要性をしっかりと押さえておくことが、今後の開発において大いに役立つでしょう。

関連投稿

コメントする

上部へスクロール