【GatsbyJS】Basic認証下でiOS safariからページを開くとリロードする度に認証を求められる場合の対処法
先日、GatsbyJSでサイトを構築していた際、Basic認証がかけられた開発環境用のサーバーにビルドしたファイル群を置くと、表題のようにページをロードする度にBasic認証の入力を求められてしまう現象が発生しました。iOS13 safariでは発生し、PC Chrome では発生しませんでした。Androidは不明です。
その時にあれこれ試行錯誤したのでメモとして残しておきます。
（対策を調べていても同じ現象が発生したひとは見当たらなかった & GatsbyJSをBasic認証下で開発する際に毎回同じ現象が起こるとは少し考えづらいので、環境次第の可能性がありそうです）
原因
GatsbyJSで生成されたプリロード用のタグ（ページ情報のjsonを読み込んでる）がBasic認証に必ず引っかかることがわかりました。GatsbyJSのビルドではhtmlに以下のようなタグが生成されています。
<link rel="preload" as="fetch" href="~~~~~~~.json">
具体的には preaload がBasic認証に引っかかっていました。
まずは対策を書いていきます。
対策
preloadそのものはあくまでもリソースの先読みに関するものでGatsbyJSの機能には影響しないと考えました。
そこで、preloadをprefetchに変える or タグごと消すのどちらかを行うと、この現象が起こらなくなりました。
ビルドするたびに手動で行うのは手間なので、書き換え用のnodeのスクリプトをGatsbyJSのビルドの後に自動的に実行するようにします。
↓ npm-scriptsでgatsbyのビルド後にスクリプトを実行します。
... "build": gatsby build --prefix-paths && node replace-link-preload-props.js", ...
↓ replace-link-preload-props.js: 書き換え用のスクリプト。タグごと消して上書き保存する形になっています。
preload
preloadは今まで使ったことがなかったので調べたのですが、結局Basic認証に引っかかる理由はわからずでした・・・。
<link rel="preload">を使用してフェッチされたリソースが 3 秒以内に現在のページで使用されない場合、Chrome デベロッパー ツールのコンソールに警告が表示されるので注意してください。
とのことで、実際、Basic認証が求められて3秒以上経つと警告が表示されていたので、少なくともBasic認証が求められたタイミングは、リソースの要求が行われた後のようです。
