2022.02.09

セッション有効期限を非同期に延長させる方法【WordPress】｜ウェブアクセシビリティ対応

こんにちは、webエンジニアのゾノ( @ozonosho )です。

今回は記事ではWordPressでセッション有効期限を非同期に延長させる方法をご紹介いたします。

セキュリティの都合上、一般的なwebサイトはセッションの有効期限（例：ログイン状態のまま放置した際にどれぐらいの間ログイン状態を保持するか）を設定します。

セッションの有効期限を必要以上に長くしてしまうとセッションハイジャックなどのセキュリティリスクが高まるため、弊社が制作した行政のサイトを例に挙げるとセッション有効期限は30-60分の間に設定することが多かったです。

しかしながら、ウェブアクセシビリティの観点で考えると何かを入力するページ（例：プロフィール登録ページ）においてセッション有効期限が30-60分の場合、身体に障害を抱えている方が有効期限内に操作を完了できず、更新ボタンを押してもログアウトしてしまうケースが出てきます。

でも、でも、セキュリティも大事なのでセッション有効期限を延ばすわけにもいかない。。。

そこで、セキュリティとウェブアクセシビリティどちらの基準も満たすため『時間切れになる前に利用者に警告し、かつ少なくとも 20 秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、利用者が制限時間を少なくとも 10 倍以上延長することができる。』といった対応が求められます。

※詳細はこちら
『達成基準 2.2.1: タイミング調整可能を理解する』

上記記事を読むとウェブアクセシビリティ的には利用者が有効期限を解除できるようにする対応でも問題ないようですが、セキュリティ的にはあまり宜しくないので弊社では「有効期限が切れる前に有効期限を延長できる」ようにしてみました。

WordPressでセッション有効期限を非同期に延長させる方法

今回は「セッションの有効期限は60分」「セッションが切れる1分前にアラートを表示し、有効期限の延長を希望する場合はOKボタンをクリックするだけで再度60分の有効期限が与えられる」という仕様にしてみます。

僕がこの対応をしたのはWordPressを利用したサイトのためWordPressの関数を利用しますが、考え方としてはWordPress以外にも流用できます。

尚、WordPressでセッション有効期限を変更する方法はこちらの記事に書いているので必要であればご参照ください。

まずは、セッションが切れる1分前にアラートを表示し、ajaxで非同期処理を実行するためのコードをJSで用意します。

var SessionTimeOutID = setTimeout(ConfirmSessionTimeOut, 3540000);
function ConfirmSessionTimeOut() {
    let checkSessionTimeOut = window.confirm('ページの表示有効期限が設定されているため1分後にログイン状態が切れます。まだ編集を続ける場合は「OK」ボタンをクリックしてください。');
    if(checkSessionTimeOut) {
        $.ajax({
            url:'/session-reissuance.php',
            type:'POST'
        })
        //通信成功
        .done(function(data) {
            if(data[0].is_reissuance) {
                clearTimeout(SessionTimeOutID);
                setTimeout(ConfirmSessionTimeOut, 3540000);
            } else {
                alert('すでに有効期限を過ぎていたため再度ログイン後に操作してください');
                location.reload();
            }
        })
        //通信失敗
        .fail(function(data) {
        })
    }
}

飛ばした先の「session-reissuance.php」では下記のように、再ログインさせてセッションの有効期限をリセットします。
（WordPressだと多分これが一番楽な方法！）

<?php

session_start();
require_once("../../../../../wp-load.php"); //WP関数を利用するためwp-load.phpを読込

if(is_user_logged_in()) {
	$user_id = get_current_user_id();
	//一度ログアウト
	wp_logout();
	//再ログインさせてセッション期限を更新
	wp_set_auth_cookie($user_id, true);
	//旧セッションは削除する ※セッションハイジャック対策
	session_regenerate_id(true);
	$result[] = array(
		'is_reissuance' => true
	);
} else {
	$result[] = array(
		'is_reissuance' => false
	);
}

//結果をjsonで出力
header('Content-type: application/json');
echo json_encode($result, JSON_UNESCAPED_UNICODE);

?>

上記方法で、アラートが表示された際に有効期限の延長を希望した利用者には再度60分間の有効期限を渡すことができます。

尚、ここでは割愛しましたが実際に実装する際にはajaxでトークン情報もPOSTしてCSRF対策をおこなったほうが良いです。