CloudFront + WordPress (4.9.8以降?) で WP REST API 403 rest_cookie_invalid_nonce が出たときの対応方法

CloudFront + WordPress (4.9.8以降?) で WP REST API 403 rest_cookie_invalid_nonce が出たときの対応方法:

CloudFront + WordPressでサイトを公開していて WordPress 4.9.8 で表題のエラーが発生し、記事の投稿がエラーになっていました。

その際の対応方法を備忘録としてまとめます。

環境

CloudFront -> EC2 (WordPress) -> RDS

WordPress は 4.9.8 で不具合を確認して、対応したあと 5.0 にアップデートしてから投稿できることを確認しています。

参考・前提

CloudFront + WordPress で環境を構築するのは以下が大変参考になるかと思います。

丁寧にまとめてくださってありがとうございます！

WordPressサイトをCloudFrontで配信する - Qiita
CloudFrontの下でWordpressを実行する時に色々ハマった話 前編 - Qiita
CloudFrontの下でWordpressを実行する時に色々ハマった話 後編 - Qiita

上記に関する内容はこの時期では省略します。

投稿画面でエラー

新規投稿画面を開くと 403 エラーが発生します。



レスポンスの内容はこんな感じです。

{code: "rest_cookie_invalid_nonce", message: "Cookie nonce が不正です", data: {status: 403}} 

WordPressのいつのバージョンから発生するかは正確にはわかりませんが、Gutenberg の新エディタの状態でページで開いたときに非同期で投稿者のユーザ情報やカテゴリ情報を取得しているようです。

このエラーが発生している状態で内容を入力して公開しようとすると公開に失敗します。

エラーの原因

403 エラーになったリクエストは WP REST API にアクセスしています。

投稿者のユーザ情報は認証無しで取得できてしまうと問題なので、何かしらの認証情報を付与してAPIを呼び出していると推測しました。

検索したところAPI呼び出しは _wpnonce の値を設定して GET / POST で取得するか、HTTP Header に X-WP-Nonce を付与するかのいずれかでした。

参照 > https://v2.wp-api.org/guide/authentication/

Gutenberg の新エディタでは X-WP-Nonce のHTTPヘッダーを付与してアクセスしようとしているのですが、CloudFrontで該当のHTTPヘッダーを許可していないのでオリジンに届いていないことが原因です。

対応

CloudFront の Behavior で WP REST API のアクセスに該当のHTTPヘッダーをオリジンに渡すよう設定します。

AWSコンソールの CloudFront ページで対象の Distribution を選択し "Create Behavior" から以下のように設定・作成します。

要点だけ

• Path Pattern : /wp-json/
  
• Cache Based on Selected Request Headeres : Whitelist を選択
  
  
  • 
    X-WP-Nonce を入力して「Add Custom」ボタンを押下して追加

• Forward Cookies : All
• Query String Forward and Caching : Forward all, cache based on all

結果

投稿できることを確認しました。