Safari等だけBasic認証が何度も聞かれる

現象の詳細

昨今の事情に鑑み、内部専用サイトについて、外部からWAF経由でアクセスできるようにしました。ただ、そのまま無条件アクセスできるのはよろしくないので、関係者だけがアクセスできるようWAFでBasic認証をかけるようにしました。

アクセスは下記の流れで通信していきます。

WAF (Apache HTTP Server + ModSecurity2)
ロードバランサー (nginx)
Webサーバー (nginx)
アプリケーションサーバー (puma + 自作Webアプリ)

※ 3.と4.は一つのサーバーに同居して、サーバー自体は冗長化している。1.と2.はそれぞれ別サーバーでホットスタンバイの二重化。全てオンプレ。

WAFの所でAuthType Basic等を設定して、普通のBasic認証を行っています。内部からは2.のロードバランサーに直接アクセスできるため、Basic認証はかかりません。

ほとんどの場合はうまくいくのですが、次のOSとブラウザでのみ、何度もBasic認証が聞かれます。

iOS Safari
iOS Crome
iPadOS Safari
iPadOS Chrome
macOS Safari

次のOSとブラウザはBasic認証は一回のみです。

Windows10 Edge/Chrome/Firfox
macOS Chrome
iOS Edge

同じ仕組みがもう一つ(対象のWeb画面はアプライアンス製品の組み込み)あるのですが、そちらは、駄目なSafariとかでも一回のみです。なぜかSafariだけ聞かれて、なぜか該当のWebアプリだけが発生する謎な現象が発生しました。

Webアプリの詳細

WebアプリはRuby制でHanamiフレームワークを使用した自家製の物です。少し他のWebアプリと変わったところと言えば<script type="module" src="...">を使っていることぐらいです。複数のJavaScriptをモジュールベースで遅延読み込みし、その中でもimport文でJavaScriptの読み込みをいくつか行っています。

動作の検証と推測

Basic認証は、一回成功すれば、それ以降の通信は毎回Authorizationヘッダがついて、自動的に認証してくれるはずです。しかし、SafariではモジュールベースのJavaScript読み込みにバグがあり、Authorizationヘッダを付けてくれないのでは無いかと推測しました。

実際に、macOSのSafariで検証したところ、モジュールベースのJavaScript読み込みについて、Authorizationヘッダを付けずにアクセスしようとしているようでした。もう一回認証を通すと、その時読み込もうとしたJavaScriptは正常に読み込みますが、そのJavaScript内のimport文でのJavaScript読み込みについてはAuthorizationヘッダを付けてくれず、またまた再度認証が聞かれる状態でした。つまり、import文のネストの数だけBasic認証が聞かれてしまうと言う状況です。

なお、これはSafariのみで発生しています。iOS/iPadOSのChromeでも起きるのは、内部でSafariのエンジンを用いているか、内部エンジンが古いからと言う可能性が考えられます。