0

Rails の devise を使ったログイン画面で
Chrome 使った場合だけ
Can't verify CSRF token authenticity.
が出るんですが
Safari を使うと正常にログインできます

[サーバー環境]
MacOSX 上の docker 19.03.5 上の 4.9.184-linuxkit x86_64 GNU/Linux イメージ上
ruby 2.5.1p57
Rails 5.2.0
devise 4.7.1

[クライアント]
MacOSX Chrome最新版(84.0.4147.125) で発生
(6月ぐらいまでの Chrome では発生していませんでした)

Safari 13.0.3 (15608.3.10.1.4) では発生しません

docker 上のサーバーに http://localhost:3000 でアクセスする場合のみ発生するようで
同じブランチを AWS amazonlinux2 上にデプロイして
nginx + unicorn + Rails で https のドメイン名でアクセスしたときは Chrome でも発生しません

Rails 側の設定のせいだと思って dervise のコードを読んでみたりしたんですが原因がわからず
Safari だと問題なく動いたのでどうも Chrome + docker の組み合わせが原因みたいなのですが
どうしてこういうことが起こるか解決法をご存知の方はいらっしゃいませんか


こちらが Chrome が生成しているヘッダ(ログインできないケース)

CONTENT_LENGTH:251
CONTENT_TYPE:application/x-www-form-urlencoded
GATEWAY_INTERFACE:CGI/1.1
HTTP_ACCEPT:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
HTTP_ACCEPT_ENCODING:gzip, deflate, br
HTTP_ACCEPT_LANGUAGE:ja,en-US;q=0.9,en;q=0.8
HTTP_CACHE_CONTROL:max-age=0
HTTP_CONNECTION:keep-alive
HTTP_COOKIE:email=xxxxx; remember=true
HTTP_HOST:localhost:3000
HTTP_ORIGIN:http://localhost:3000
HTTP_REFERER:http://localhost:3000/users/login
HTTP_SEC_FETCH_DEST:document
HTTP_SEC_FETCH_MODE:navigate
HTTP_SEC_FETCH_SITE:same-origin
HTTP_SEC_FETCH_USER:?1
HTTP_UPGRADE_INSECURE_REQUESTS:1
HTTP_USER_AGENT:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36
HTTP_VERSION:HTTP/1.1

これが safari の生成しているヘッダ(ログインできるケース)

CONTENT_LENGTH:299
CONTENT_TYPE:application/x-www-form-urlencoded
GATEWAY_INTERFACE:CGI/1.1
HTTP_ACCEPT:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
HTTP_ACCEPT_ENCODING:gzip, deflate
HTTP_ACCEPT_LANGUAGE:ja-jp
HTTP_CONNECTION:keep-alive
HTTP_COOKIE:email=xxxxx; remember=true; _session_id=xxxxx
HTTP_HOST:localhost:3000
HTTP_ORIGIN:http://localhost:3000
HTTP_REFERER:http://localhost:3000/users/login
HTTP_UPGRADE_INSECURE_REQUESTS:1
HTTP_USER_AGENT:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Safari/605.1.15
HTTP_VERSION:HTTP/1.1

違う項目は
HTTP_ACCEPT の種類が多いのは関係ないとして

HTTP_CACHE_CONTROL:max-age=0

があること

HTTP_COOKIE に _session_id=xxxxx 

の項目がないけどこれは1度も成功してないから?
そもそも初回は Cookie はないものなので関係なさそう

HTTP_SEC_FETCH_DEST:document
HTTP_SEC_FETCH_MODE:navigate
HTTP_SEC_FETCH_SITE:same-origin
HTTP_SEC_FETCH_USER:?1

という4項目があって CSRF に関係しそうな HTTP_SEC_FETCH_SITE:same-origin という項目があるんですが Rails 内でどう使われているか不明
ただ same origin check 自体は通過していてトークン自体の照合に失敗しているようなのです

あと気になるのが form data が safari は

rack.request.form_hash:{"utf8"=>"✓", "authenticity_token"=>"xxxxx", "user"=>{"email"=>"xxxxx", "password"=>"xxxxx", "remember_me"=>"1"}, "commit"=>"ログイン"}

と commit の項目があるのに対して chrome が送信したものには

rack.request.form_hash:{"utf8"=>"✓", "authenticity_token"=>"xxxxx", "user"=>{"email"=>"xxxxx", "password"=>"xxxxx", "remember_me"=>"1"}}

と commit が含まれません

<input type="submit" name="commit" value="ログイン" data-disable-with="ログイン">

という HTML は当然表示されてるんですが
ブラウザによって form タグの HTML の解釈方法が違ったりするのでしょうか…


コメントで教えていただいた
https://qiita.com/yu_suke1994/items/39fa64ef96aa2a67dc2a
こちらのサイトを確認して各チェック項目をデバッグ表示したところ

request.origin => 'http://localhost:3000'
request.base_url => 'http://localhost:3000'
valid_request_origin? => true

で same origin check には成功していて

any_authenticity_token_valid? => false

になるのでトークン自体の照合に失敗しているようなのです

https://qiita.com/ksilverwall/items/1dfdc2f7a45cea591dd4

こちらのサイトと同じ現象のようなのですが原因は不明みたいです

3
  • qiita.com/yu_suke1994/items/39fa64ef96aa2a67dc2a こちらに確認すべき項目が載っていますので、参考になると思います。動く環境と動かない環境で見比べてみるといかがでしょうか 2020年8月11日 8:23
  • 1
    qiita.com/ahera/items/0c8276da6b0bed2b580c chromeでだけ発生するということなのでこの辺が影響してたりしないでしょうか
    – user35303
    2020年8月13日 18:26
  • ドンピシャでそれでした! まだサーバーサイドの対応を理解してないんですが docusign.jp/blog/google-chrome-80-samesite-cookie こちらで chrome の挙動を古い状態にしたところログインできるようになりました。今のところ開発環境でしか問題になってないのでしばらくこの状態で開発してみようと思います。ずっと解決できずに悩んでたので本当に助かりました!
    – user35303
    2020年8月14日 2:47

0

この質問に回答するには、ログインする必要があります。