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 를 부여하는 것이었습니다.

참조> htps : // v2. wp-아피. 오 rg/구이데/아우테펜치카치온/

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

  • 결과





    게시할 수 있는지 확인했습니다.

    좋은 웹페이지 즐겨찾기