フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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 エラーが発生します。

スクリーンショット 2018-12-08 16.43.46.png

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

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

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

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

投稿の編集_WordPress.jpg

エラーの原因

403 エラーになったリクエストは WP REST API にアクセスしています。
投稿者のユーザ情報は認証無しで取得できてしまうと問題なので、何かしらの認証情報を付与してAPIを呼び出していると推測しました。

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

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

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

対応

CloudFront の Behavior で WP REST API のアクセスに該当のHTTPヘッダーをオリジンに渡すよう設定します。
AWSコンソールの CloudFront ページで対象の Distribution を選択し “Create Behavior” から以下のように設定・作成します。

cloudfront_settins_01.jpg

要点だけ

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

cloudfront_settins_02.jpg

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

結果

投稿の編集_WordPress_after.jpg

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

コメント

記事に戻る

コメントを残す