WordPressのAjaxでセキュアな通信を行う。ワンタイムパスワードっぽい処理。

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressのAjaxでセキュアな通信を行う方法を、サンプルコードを使って説明します。

nonceを使ってかんたんに実装します。

noneceは意味のないランダムな文字列で、ワンタイムパスワード認証っぽいことをすると言ったほうが分かりやすいかも。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

nonceとは何か？

nonceは使い捨てのランダムな値です。これを使ってサーバが正当なhttpsリクエストを受信したことを確認します。

nonceはCSRF対策です。

くわしくは、WordPress セキュア処理で使うnonce関数のちがい（CSRF対策）で

実装はかんたんです。さっそく見てみましょう。

サンプルコードは『WordPressでAjaxを使う（公開サイト編）』を元にすすめます。WordPressでのAjaxの実装方法が分からない人は、こちらからどうぞ。

また、HTMLで<form>を使わず、ajaxでフォームを送信します。<form>を使った方法はさっきのリンク（...nonceのちがい...）にあるので割愛します。

JavaScriptのコーディング

ここでは、キャッシュのクリア処理をサーバーにリクエストします。

jsファイルのキュー登録

キュー登録のサンプルコードです。

add_action('admin_enqueue_scripts', function() {
    $handle = 'js_handle_name';
    wp_register_script( $handle, plugins_url( 'my-plugins/js/clear-cache.js', __FILE__ ), [ 'jquery' ], '1.0.0', true );

    $localize = [
        'ajax_url' => admin_url('admin-ajax.php'),
        'action' => 'clear_cache',
        'check_nonce' => wp_create_nonce( 'ajax-nonce' )
    ];
    wp_localize_script( $handle, 'localize', $localize );
    wp_enqueue_script( $handle );
} );

（公開サイトのときは'admin_enqueue_scripts'を'wp_enqueue_scripts'に変える。）

wp_localize_script()のパラメータに、生成したnonceのランダムな値を追加します。

$ajax = [
    'check_nonce' => wp_create_nonce('ajax-nonce')
];

jsファイルの内容

次に、リクエストでnonceの値を送信するように、jsファイルに追加します。

下準備にHTMLにajaxのトリガーのボタンとurlリファラーを追加しておきます。

（リファラーはセキュア処理で使います。）

HTMLの準備（.phpファイル）
<?php wp_referer_field(); ?>
<button id="clear-cache">キャッシュのクリア</button>
出力するHTML
<input type="hidden" name="_wp_http_referer" value="/example/">
<button id="clear-cache">キャッシュのクリア</button>
JavaScript
(function($) {
  $(function() {
    $('#clear-cache').on('click', function(){
      "use strict";
      const http_referer = $('input[name="_wp_http_referer"]').val();

      $.ajax({
        type: "POST",
        url: localize.ajax_url,
        dataType: 'text',
        data: {
          action: localize.action,
          check_nonce: localize.check_nonce,
          _wp_http_referer: http_referer
        }
      }).done(function(data, textStatus, jqXHR) {
        outputMsg(data);
      }).fail(function() {
        outputMsg('cache clear error!!');
      });
    });
  })
})(jQuery)

check_nonceというクエリにnonceの値をつけて、リクエストを送信します。

サーバの処理（phpのコーディング）

次の関数がajaxで送信したリクエストをサーバーで受信する処理です。

function clear_cache() {
    $cache_file = '../cache/11111111111111111.cache';
    $success = __('Complete clear cache');
    $error = __('Clear cache failer');
    $result = '';

    if ( ! check_ajax_referer( 'ajax-nonce', 'check_nonce', false ) ) {
        echo $error;
        die();
    }

    if(file_exists($cache_file)) {
        if(unlink($cache_file)) {
            $result = $success;
        } else {
            $result = $error;
        }
    } else {
        $result = $success;
    }
    echo $result;
    die();
}
add_action('wp_ajax_clear_cache', 'clear_cache');
add_action('wp_ajax_nopriv_clear_cache', 'clear_cache');  // <--- 公開サイトのときだけ追加

check_ajax_referer()はAjax通信用のnonce値の確認を行います。

パラメータには、Ajax通信で指定したactionとnonceのクエリ変数名を指定します。

check_admin_referer()は管理画面用のnonce値の確認を行いますが、デフォルトではcheck_ajax_referer()と同じなので使う意味がありません。

管理画面からしか許可しないなら認証処理を追加しましょう。

/**
 * admin認証の追加
 */
add_action('check_ajax_referer', function( $action, $result ) {
    // urlリファラーチェックの追加
    if ( $result ) {
        $adminurl = strtolower( admin_url() );
        $referer  = strtolower( wp_get_referer() );

        // 管理画面のurlからだけ許可する。
        if ( false === strpos( $referer, $adminurl ) ) {
            $result = false;
        }
    }
    return $result;
}, 10, 2 );

公開サイトで特定のページからしか許可しないならurlを制限しましょう。

/**
 * ajax認証の追加
 */
add_action('check_ajax_referer', function( $action, $result ) {
    // URLリファラーチェックの追加
    if ( $result ) {
        $referer  = strtolower( wp_get_referer() );

        if ( 'ajax_test' === $action ) {

            // 特定の投稿ページからだけ許可する。
            $slug = 'nonce-test';
            $post = get_posts('name=' . $slug);
            $url = get_permalink( $post[0]->ID );

            if ( ! strpos( $referer, $url ) ) {
                $result = false;
            }
        }
    }
    return $result;
}, 10, 2 );

また、Ajaxでない通常のリクエスト用にwp_verify_nonce()も用意されています。

このあたりの関数のちがいをまとめました。

WordPress セキュア処理で使うnonce関数のちがい（CSRF対策）

訂正

管理画面のurlリファラーチェックは、プラグインのアップデート処理が正常に動きません。

ほかの処理を入れるようにしましょう。

これでも分かるように、認証の追加処理は自分の作成したajaxだけでなくすべてのajax処理に影響します。

特定のajax処理にしたければactionに条件をつけましょう。

nonceだけで大丈夫か？

WordPressのnonceは有効期間があるので、正確にはワンタイムパスワードではなく、セキュアではないとも言えます。しかし、有効期間の設定の変更ができます。

たとえば、有効期間を4時間に変更するときは、functions.phpなどに次のように定義します。

add_filter( 'nonce_life', function () { return 4 * HOUR_IN_SECONDS; } );

有効期間をできるだけ短くして、ワンタイムパスワードに近いセキュリティができます。

それでも、これだけで大丈夫？と思うかもしれません。

このへんの気になるところもこちらに書いています。

WordPress セキュア処理で使うnonce関数のちがい（CSRF対策）

WordPress.org Codex 日本版

WordPress Nonce

wp create nonce

check ajax referer

check admin referer

クラスに処理を入れよう！

ajaxの処理は、キュー登録と受信した後処理をまとめたほうがいいです。クラスオブジェクトにしましょう。

class Clear_Cache_Ajax {
    $is_publish = false;
    $action = 'clear_cache';
    $nonce_query = 'check_nonce';

    function __construct( $is_publish = false ) {
        $this->enqueue();
        $this->add_authentication();
        $this->action();
    }

    private function enqueue() {
        $action = $this->action;
        $handle = $this->is_publish ? 'wp_enqueue_scripts' : 'admin_enqueue_scripts';
        $nonce_query = $this->nonce_query;
        add_action( $handle, function() use ( $action, $nonce_query ) {
            $handle = 'my_ajax_handle';

            // urlの取り方は適宜変更。方法は割愛。
            $js_url = plugins_url( 'my-plugins/js/clear-cache.js', __FILE__ );

            wp_register_script( $handle, $js_url, [ 'jquery' ], '', true);

            $localize = [
                'ajax_url' => admin_url( 'admin-ajax.php' ),
                'action' => $action,
                $nonce_query => wp_create_nonce( $action )
            ];
            wp_localize_script( $handle, 'localize', $localize );
            wp_enqueue_script( $handle );
        });
    }

    private add_authentication() {
        add_action('check_ajax_referer', function( $action, $result ) {
            // URLリファラーチェックの追加
            if ( $result ) {
                $referer  = strtolower( wp_get_referer() );

                if ( 'ajax_test' === $action ) {

                    // 特定の投稿ページからだけ許可する。
                    $slug = 'nonce-test';
                    $post = get_posts('name=' . $slug);
                    $url = get_permalink( $post[0]->ID );

                    if ( ! strpos( $referer, $url ) ) {
                        $result = false;
                    }
                }
            }
            return $result;
        }, 10, 2 );
    }

    private function action() {
        $handle = 'wp_ajax_' . $this->action;
        $handle_publish = 'wp_ajax_nopriv_' . $this->action;
        $function = 'response';

        add_action( $handle, [ $this, $function ] );
        if ( $this->is_publish ) {
            add_action( $handle_publish, [ $this, $function ] );
        }
    }

    public function response() {
        $action = $this->action;
        $nonce_query = $this->nonce_query;

        $cache_file = '../cache/11111111111111111.cache';
        $success = __('Complete clear cache');
        $error = __('Clear cache failer');
        $result = '';

        if ( ! check_ajax_referer( $action, $nonce_query, false ) ) {
            echo $error;
            die();
        }

        if( file_exists( $cache_file ) ) {
            if( unlink( $cache_file ) ) {
                $result = $success;
            } else {
                $result = $error;
            }
        } else {
            $result = $success;
        }
        echo $result;
        die();
    }
}

/*----------------
 Ajax通信を使う。
 -----------------*/
new Clear_Cache_Ajax();    // <--- クラスインスタンスを作るだけ。

このクラスはまだ未完成です。actionを動的にすることで汎用的なAjax通信クラスにスケールアップできます。

このクラスを改修して完成度を高めるチャレンジをしてみてください。

ここではクラスの作り方を紹介しているわけではないのでこの辺にしておきます。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ
前の投稿
WordPressでAjaxを使う（公開サイト 編）
WordPress 引っ越し方法を手順を踏んで分かりやすく解説
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*

新着記事