質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
さくらのVPS

さくらのVPSは、さくらインターネット社が提供するVPS(仮想専用サーバー)です。高速なSSDの選択や複数台構成も可能。利用者に応じた柔軟なプランが用意されています。大規模システムにも対応可能なスケーラビリティを備えたホスティングサービスです。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

Q&A

解決済

1回答

2977閲覧

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

GenkiSugiyama

総合スコア86

さくらのVPS

さくらのVPSは、さくらインターネット社が提供するVPS(仮想専用サーバー)です。高速なSSDの選択や複数台構成も可能。利用者に応じた柔軟なプランが用意されています。大規模システムにも対応可能なスケーラビリティを備えたホスティングサービスです。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

0グッド

1クリップ

投稿2020/04/25 05:49

編集2020/04/26 10:23

###起こっている現象

バックエンド: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" ・ ・ ・

設定後のエラーログ
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ockeghem

2020/04/25 09:41

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

2020/04/26 05:17

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

回答1

0

ベストアンサー

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

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 のみから始めるとよい

投稿2020/04/26 09:09

ockeghem

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

GenkiSugiyama

2020/04/26 10:24

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

2020/04/26 11:25

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

2020/04/27 04:00

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問