WordPressのセキュリティプラグインSiteGuardで画像認証を有効化してもログイン画面の画像が表示されず画像アイコンが壊れて404エラーになる場合があります。

SiteGuardの画像認証はサーバーサイドに画像ファイルを生成して表示するため、キャッシングや権限回りなどのエラーが発生しやすいです。少しレガシーな技術なので、　CloudflareのTurnstileを導入してみました。

発生したトラブルと原因

SiteGuardの画像認証を有効にしてもログイン画面に画像が表示されずリンク切れアイコンが表示される現象が発生します。

主な原因はURLの変換エラーでファイル名が変わってしまうことです。

例：jsd8ej3-218374873.jpgを生成しますが、ログイン画面では218374873.pngを読み込もうとするため表示に失敗します。

SiteGuardは画像を動的なURLで読み込みますがWebサーバーのリライト設定やパーミッションの影響で本来のファイル名と一致しなくなります。また、Docker環境やCloudflareのキャッシュと喧嘩しやすいのも原因の一つです。

Cloudflareのキャッシュルール設定

Cloudflareを利用している場合はキャッシュルールで管理画面やログイン画面を除外する必要があります。

Cache Rulesでwp-all-ruleという名前のルールを作成しHostnameが一致する場合かつURI Pathが/wp-adminから始まらないかつURI Pathにsiteguardが含まれないかつCookieにwordpress_logged_inが含まれないという条件を設定し、管理画面ではキャッシングを無効化します。

Cloudflare Turnstileに切り替える方法

Cloudflare Turnstileなら動的画像ファイルを生成しないためエラーが発生しません

Cloudflareでキーを発行する

CloudflareのダッシュボードからTurnstileを開きサイトを登録してSite keyとSecret keyを発行します。

プラグインの導入

WordPress管理画面のプラグイン新規追加からSimple Cloudflare Turnstileを検索してインストールし有効化します。

プラグインの設定

設定メニューからCloudflare Turnstileを開き取得したサイトキーとシークレットキーを入力します。

フォームでTurnstileを有効化する設定一覧でWordPressログインにチェックを入れて保存します。（全ての項目にチェックを入れるのがおすすめです）

SiteGuard側の画像認証機能は無効化しておきます。ログインページURL変更はそのまま利用可能です。

ログイン画面での動作確認

設定完了後にWordPressのログイン画面を開くとCloudflareのアイコンが表示されます。

成功しましたという表示が出て安全かつスムーズにログインできればOKです。

まとめ

SiteGuardの画像認証で不具合が起きる場合はサーバー設定の修正に時間をかけるよりもCloudflare Turnstileへ移行するほうが確実です。
Cloudflareのキャッシュルール設定と組み合わせることでセキュリティとモダンな環境になるのでおすすめです。