rails + reactのアプリにsafari最新版からログインできなくなった

Question

###起こっている現象

バックエンド：RailsAPIモード、フロント：Reactを使用したアプリを公開しているのですが、先日Safariの最新版からのみログイン、新規登録等が行えなくなってしまいました。

###自分で調べた結果

原因を調べたところ、SafariのバージョンアップにおけるCORS対応の強化により、APIのリクエスト制限の設定がSafariのAPI使用条件をクリアできなかったことで、API接続エラーとなっているようです。

※railsのサーバーとreactのサーバーは別ドメインで管理しています。

※該当するバージョンアップ情報
■Safariリリース情報
https://support.apple.com/ja-jp/HT211102
・本件の対象となったバージョンアップ情報

WebKit
対象となるデバイス：iPhone 6s 以降、iPad Air 2 以降、iPad mini 4 以降、iPod touch (第 7 世代)
影響：ダウンロードのオリジンが間違って関連付けられる可能性がある。
説明：制限を強化し、ロジックの脆弱性に対処しました。

###試したこと
CORSの対応強化への対策として、apiサーバーのapacheの設定ファイルの内容を変更いたしました。
【変更ファイル】
/etc/httpd/conf/httpd-le-ssl.conf
/etc/httpd/conf.d/passenger.conf

※両ファイルに同じ記載があったのでどちらも変更

【変更内容】
・変更前

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token, access-token, application/json, client, uid"

・変更後

Header set Access-Control-Allow-Origin "http://react-app.domain.com" //Reactアプリのドメインに変更
Header set Access-Control-Allow-Credentials: true //←この1行追加
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, User-Agent, Referer, Origin, authorization, Accept, client-security-token, access-token, application/json, client, uid" //何点か変更

変更後の状態でapacheを再起動、safariのログインを検証しましたが、エラーは解消されませんでした。

###safariでのエラー内容 （04/27追記）
safariでのエラー出力は下記の通りです。
※apache設定ファイル変更前に表示されたエラーになります。

最新版safariからログインができるようにするための、有効な手段があればご教示いただけると大変助かります。
※アップデートしたiOSのchromeアプリからもログインできなくなっているぽいです、、、

よろしくお願いいたします。

##4/27追記
ockeghem 様からいただいた回答内容を元に設定を変更しましたが、挙動は変わらずログインできませんでした。

・変更後
/etc/httpd/conf.d/passenger.conf

Header set Set-Cookie HttpOnly;Secure
Header set Access-Control-Allow-Origin "http://react-app.domain.com"
Header set Access-Control-Allow-Credentials: true
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
#Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, originn
, authorization, accept, client-security-token, application/json"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, User-Agg
ent, Referer, Origin, authorization, Accept, client-security-token, access-tokenn
, client, uid" # application/jsonを除去
Header set Access-Control-Expose-Headers "access-token, client, uid"
・
・
・

/etc/httpd/conf/httpd-le-ssl.conf

<IfModule mod_ssl.c>
  <VirtualHost *:443>
    Header set Set-Cookie HttpOnly;Secure
    Header set Access-Control-Allow-Origin "http://react-app.domain.com"
    Header set Access-Control-Allow-Credentials: true
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Max-Age "1000"
    #Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, orr
igin, authorization, accept, client-security-token, application/json"
    Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Usee
r-Agent, Referer, Origin, authorization, Accept, client-security-token, access-tt
oken, client, uid" # application/jsonを除去
    Header set Access-Control-Expose-Headers "access-token, client, uid"
・
・
・

設定後のエラーログ

Comments

[ockeghem]

Safariで起こっているエラーの内容を追記ください

[GenkiSugiyama]

エラー内容を追記いたしました。
ご確認お願いいたします。

Answer 1

現象を再現できました。原因はヘッダが足りないからではなく、余計なものがついているからです。
改修前のヘッダですが、

Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token, access-token, application/json, client, uid"

色々余計なものがついていますが、さしあたりは application/json が余計です。これを除去することでエラーはなくなると思います。
ただ、他にも余計なヘッダがあります。RefererとOriginはセキュリティ上の理由で変更できないヘッダなので、変更しようとするとエラーになります。プリフライトの時点ではエラーにならないようですが、将来エラーになるかもしれないので、つけないことをお勧めします。User-Agentは最近仕様上は変更できるようになりましたが、長い間変更できないヘッダだったので、プリフライトに含めないことをお勧めします。
…というか、ここに指定するヘッダはアプリケーションから指定するものに限定すべきです。さしあたりはContent-Typeだけあればよいような気がします。余計なものを追加すればするほど、セキュリティ上は悪い設定になります。

ということで、結論は下記となります。

• さしあたりは Access-Control-Allow-Headers から application/json を除去すれば動くはず
• 本来は Access-Control-Allow-Headers は必要なヘッダのみ指定すべきで、Content-Type のみから始めるとよい

Comments

[GenkiSugiyama]

詳細な解説、ご回答いただきありがとうございます。
ご指摘いただいたように、「Access-Control-Allow-Headers」群の中から「application/json」を除去してapacheを再起動、挙動を確認しましたが、ログインできませんでした、、、
変更箇所や接続時のエラー内容を掲載いたしましたので再度ご確認いただけますと幸いです。
何卒よろしくお願いいたします。

[ockeghem]

おそらくapplication/jsonを外したことで別のエラーが出るようになったのでしょう。
そもそも、元の「動いていた」プログラムから大きく変え過ぎです。元々動いていたものから、原因の箇所だけを変更しないと、新たな問題が混入し、わけがわからなくなります。変更後のエラーはAccess-Control-Allow-Originが間違っていると考えられます（当方では確認しようがないですが）。なので、元々の "*" にすると解消されると思います。

[GenkiSugiyama]

ご指摘の通り「Access-Control-Allow-Origin」を元の「*」に変更したところ、safariからログインできない問題が解消されました。ありがとうございます。
それぞれの行で何の設定を行なっているか把握しないままあちこちいじってしまったので、今後は最小単位で変更を行うよう気をつけます。
もし可能であれば、今回のエラー解決のために必要な知識（クロスドメインに関する知識とそれに伴うapacheの設定方法なのでしょうか）を得るための参考書籍・記事などございましたら是非ご教示いただけますと幸いです。今後の学習に活かしていきたいです。