Closed14

Rails, Fetch, Can't verify CSRF token authenticity.

Hid3Hid3

productionでRails起動
jsのFetchでpost
リクエストヘッダにX-CSRF-Token として<meta csrf-tokenにうめこまれてるcontentを付与

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

Hid3Hid3

fetchのオプションは、https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // 本文のデータ型は "Content-Type" ヘッダーと一致する必要があります
  })
Hid3Hid3

routes53->cloudfront -> alb -> ecs

origin変わってるとか?わからない。。

Hid3Hid3

リクエストヘッダーにCookieが付与されてない。
ここ怪しい?

Hid3Hid3

same-originに設定していて、same-originにリクエスト送ってるからcookie付与されると思ったけど。。。
なにか違う。
same-originじゃないのか??
https://aaa.com
から
https://aaa.com/iamges にpostしてるのでsame-orignという認識なんだけどなあ。

Hid3Hid3

別サイトの同じAWS構成のページのfetchのリクエスト

POST /happiness_cards HTTP/1.1
Host: ponest.net
Connection: keep-alive
Content-Length: 369
sec-ch-ua: "Chromium";v="88", "Google Chrome";v="88", ";Not A Brand";v="99"
Accept: text/vnd.turbo-stream.html, text/html, application/xhtml+xml
X-CSRF-Token: hoge
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCnImWAa2IRhWjnTJ
Origin: https://ponest.net
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://ponest.net/happiness_cards/new
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Cookie: hoge

今回エラーの

POST /images HTTP/1.1
Host: eshiritori.com
Connection: keep-alive
Content-Length: 1610
Cache-Control: max-age=0
sec-ch-ua: "Chromium";v="88", "Google Chrome";v="88", ";Not A Brand";v="99"
X-CSRF-Token: hoge
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
Content-Type: application/json
Accept: */*
Origin: https://eshiritori.com
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Hid3Hid3

Cookieが生成されていなかった!
ページ開いた時のレスポンスにset-cookieがないな。

ローカルだとデフォルトでセッション作られてる?
本番だとそうではない?
設定どこだろう。。。

Hid3Hid3

どうやったらset-cookieつけれるのか?
developmentは勝手に付いてるけど。。。

Hid3Hid3

ローカル環境でもproductionモードで起動するとset-cookieつかない

Hid3Hid3

最初api modeで作ったけ?それが関係してる?

Hid3Hid3

cloudfrontのForward Cookiesがnoneになってた!これか?!

これでした。

set-cookieきた。。。

Hid3Hid3

ローカル環境でもproductionモードで起動するとset-cookieつかなかったの謎

このスクラップは2021/03/15にクローズされました